I'm trying to add a custom class to the jQuery Mobile theme. The CSS should look something like this:
.ui-icon-form-ok-f {
background-color: #f09000 !important;
data-icon: check !important;
}
but how can I get jQuery Mobile to recognize this? Thanks.
How to recognize a custom icon style to jqm
For each elements of any
When you set [data-icon=AAA] on buttons, jqm creates <span class="ui-icon-AAA"> inside the buttons.
That is:
<a data-role="button" data-icon="form-ok-f">custom icon button</a>
When loads this html, jqm creates like this:
<a href="#" data-role="button" data-icon="form-ok-f" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">custom icon button</span>
<span class="ui-icon ui-icon-form-ok-f ui-icon-shadow"> </span>
</span>
</a>
So, jqm can recognize your custom-icon-class.
.ui-icon-form-ok-f {
background-color: #f09000 !important;
background-position:-252px 50% !important; /* this mean 'data-icon="check"' on css */
}
By applying this way, pages can load "ui-icon-alt"
<a data-role="button" data-icon="check ui-icon-alt">custom icon button</a>
Jqm renders Black icons (Alt icon color) instead of White icons.
For each theme of any
If you want to 'customize' icon for each theme of any, you should be loaded js like this:
$(function(){
var $alttheme = new Array( "f", "g" ); // this arr means 'data-theme="f", data-theme="g"'
var at = new Array();
for( t in $alttheme ){
at.push(':jqmData(theme="' + alttheme[t] + '"):jqmData(icon="check") > span > .ui-icon');
}
$(at.join()).addClass('ui-icon-"YOUR CUSTOM NAMES"');
});
*YOUR CUSTOM NAME (eg.form-ok, form-ng ...)
OR
$(function(){
$(':jqmData(theme="f"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-f');
$(':jqmData(theme="g"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-g');
});
The former adds the same class to icons in "theme g" and "theme f", the latter adds respectively a separate class to icons in "theme g" and "theme f".
At last
i've to prepare for some samples.
I think you should override also other classes, like .ui-bar-f, .ui-body-f, .ui-btn-up-f,... and then use the attribute data-theme="f" of each tag to specify that you want to use this new theme for the component, but I have not managed to test it.
More information is in jQuery-Mobile docs about theming.
Hope it helps!
Related
I have a h:commandLink and I want it to look like is not clickable (i.e the link has a pale color and when you hover over it the cursor becomes not-allowed ).
I'm using the disabled attribute trying to achieve that but it doesn't perform the desired effect: the link doesn't have a pale color and when I hover over it the cursor doesn't become not-allowed. But when I click the commandLink it doesn't do anything, which is good but I'd prefer for it to have the properties previously defined.
Here's my code:
<h:commandLink onclick="function()" href="#{request.contextPath}/create"
styleClass="#{condition ? 'enabled-link' : 'disabled-link'} mar-left-8 cl-blue"
disabled="#{condition ? 'false' : 'true'}"
data-scroll-goto="0" id="show"><i class="fa fa-plus-circle" aria-hidden="true"/>
<p:ajax/>
</h:commandLink>
Apparently the disabled attribute of the commandLink turns the link into a span tag instead of an anchor tag.
So my code displays on the browser in the following fashion:
<span href="/" id="show"
name="show"
class="disabled-link mar-left-8 cl-blue">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</span>
And the reason why the disabled-link class wasn't making any effect is because I was missing this peace of code on the css:
span.disabled-link {
cursor: not-allowed;
opacity: 0.5; }
how to access img tag inside a href tag to set focus to <img> tag?
eg:
<a href ='#' ><img class="img1" src="abc.png"/> </a>
The a .img1:focus {} didn't work. Not able to access <img> inside an <a href></a> tag
If I add class to tag, I can add focus to tag but tag & tag are of diff size & causing issue. eg: , then a .test:focus{} is working, But I need focus for tag
You need a space between a and .img1 ( the way you wrote it means "a tag with img1 class" ) this way :
a .img1:focus {}
This means "element with img1 class inside a tag"
EDIT : in the link #jdv provided in the comments of your initial answer, don't focus (pun unintended) on the accepted answer, but on the second one. You can fix your problem by adding a tabindex property to your img tag.
Like this :
<a href ='#' ><img class="img1" src="abc.png" tabindex="0"/> </a>
try out this code
<a href ='#' id='link'><img class="img1" src="abc.png"/> </a>
a#link .img1:focus{}
focus is often associated with form elements like input field I advise you use hover like this instead
a img:hover{
width: 500px;
}
<a><img class="img1" src="http://via.placeholder.com/350x150"/></a>
I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2.
Currently my HTML output looks like this:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
And my JSX like this:
<Menu vertical className="some classes" icon=''>
<Menu.Item
active={active}
onClick={onClick}
className="some class"
>
<Icon name="home" large /> Dashboard
</Menu.Item>
</Menu>
I wrote a new Icon component to use my own Icon Font which looks like this. I tried to stay as close to the original Icon class from the React Implementation of Semantic UI.
import React, { Component } from "react";
import classnames from "classnames";
/**
* #class Icon
* #extends {Component}
* #description Icon class for themify icons. Replacement for semantic ui Icon class
*/
class Icon extends Component {
render() {
var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
big: this.props.big,
large: this.props.large,
close: this.props.close
});
return (
<i
aria-hidden={true}
className={this.props.close ? iconClass.replace("icon", "") : iconClass}
onClick={this.props.onClick}
/>
);
}
}
export default Icon;
Now I want the Text and the Icon to be vertically centered but I can't get it to work, they text always seems to be at the top of its parent node. But actually I want it to appear vertically centered in the Menu.Item. with any size of the Icon. So when I change the size of the Icon to large the text should always be centered vertically. The size classes are the same as in Semantic UI.
Does anyone have an idea how to achieve this ? Thanks in advance :)
Hi you are facing a very common problem, possible solutions are depicted in the following codepen
https://codepen.io/anon/pen/XEKZwq
What I suggest you do is to wrap the text in a span so instead of:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
you do the following
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
<span>Dashboard</span>
</a>
Once you've done this you can easily use the solution in the codepen above.
Is there a way to add HTML markup to the tooltip in materialize? I'm trying to arrange some data as definition list inside a tooltip. I tried to add it directly into the data-tooltip attribute but it doesn't seem to recognize the tags.
In materialize.js, around line 1258 make the following change to covert all tooltips to html.
// Change .text()
newTooltip.children('span').text(origin.attr('data-tooltip'));
// To .html()
newTooltip.children('span').html(origin.attr('data-tooltip'));
In the latest version you can use:
$(document).ready(function(){
$('.tooltipped').tooltip({delay: 50, tooltip: 'some text', html: true});
});
See http://materializecss.com/dialogs.html
In Materialize v0.100.2 is possible to use data-html attribute.
If is set data-html="true", then Materialize renders as $(...).html()
So this will be rendered as $(...).text()
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
And this as $(...).html()
<a class="btn tooltipped" data-html="true" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
Hi all having a few problems with my CSS
I am trying to highlight a link on the navigation based on the page the user is on.
I have this style which works as I would like it to do, but when I pass a query-string into pcisHPprofile.aspx the CSS is not working. Does anyone know how i can get this style to work with query-strings?
body form[action="pcisHPprofile.aspx"] #btnuser
{
padding: 18px 4px 5px 4px;
background-image: url(../images/tabbluleft.gif) ;
background-repeat:no-repeat;
color: #fff;
}
<div id="nav" class="nav" >
<ul>
<li id="tab1">
<a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a>
</li>
<li id="tab2">
<a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a>
</li>
<li id="tab3">
</li>
<li id="tab4">
<a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a>
</li>
<li id="tab5">
<a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a>
</li>
<li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li>
</ul>
</div>
I assume that the #btnuser ARE some buttonS inside the some forms, where one of the forms have action="pcisHPprofile.aspx"?
If that is correct, then your error is the fact that you have many buttons with the same id attirbute id="btnuser". The ID attibute MUST be uniqe on the page. change the id="btnuser" to class="btnuser" on the buttons and your selector from:
body form[action="pcisHPprofile.aspx"] #btnuser {
}
to
body form[action="pcisHPprofile.aspx"] .btnuser {
}
Then it should work.
In the first form it might work only if the FIRST button with id="btnuser" is actually inside the form with action="pcisHPprofile.aspx". If it is inside any other form, then it will not work.
Best regards,
SWilk
UPDATE:
After OP updated the question, I think that this form of selector should work:
body form[action^="pcisHPprofile.aspx"] #btnuser {
...
}
It would a element with id=btnuser inside a form, which action begins with "pcisHPprofile.aspx". It would not matter if the acutal action attibute contain only "pcisHPprofile.aspx" or "pcisHPprofile.aspx?any-parameters&and=some-values".
Best regards,
SWilk
Using action attribute for styling is a bad practice. Just give your form a name, class or ID like <form class="pcisHPprofile" action="pcisHPprofile.aspx"> and then apply CSS style to that name/class/id.
form.pcisHPprofile {
padding: ...
Found a working solution. a little hacky which I am not 100% keen on but it works.
I changed the query string to look like this
profile.aspx?-&username=
from this
profile.aspx?username=
and I changed the style to
Form[action|="pcisinterpreterprofile.aspx?"] #tab5
{
background-image: url(../images/tabbluright.gif);
background-repeat:no-repeat;
}
The difference is that I have changed the = to an |=.
[att|=val]
Represents an element with the att attribute, its value either being
exactly "val" or beginning with "val"
immediately followed by "-" (U+002D).
This is primarily intended to allow
language subcode matches (e.g., the
hreflang attribute on the a element in
HTML) as described in RFC 3066
([RFC3066]) or its successor. For lang
(or xml:lang) language subcode
matching, please see the :lang
pseudo-class.
by doing this the css selector works on pages with query strings. you just need to make sure the query string has at least ?- at the start. As I said at the last its not great but works.