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; }
Related
I have a button at the end of a form in Angular.
<form>
<!-- form inputs and stuff -->
<!-- hovering on button does not work with disabled -->
<button (mouseover)="findInvalidFieldsAndPutInArray()" [disabled]="myForm.form.invalid" data-toggle="tooltip" data-placement="top" title="Tooltip that shows Invalid fields: {{ invalidFieldsArray.join(', ')}}">Submit</button>
</form>
My current work around is to just bind a CSS class instead of the disabled property in the button so that hovering over via (mouseover) allows the tooltip and function to fire.
.cant-click {
pointer-events: none;
touch-action: none;
}
So my question is, is there more to the disabled property that I should know about before removing it in the buttons of my form. Will browsers/screen-readers/crawlers be affected in any negative/misleading way? Or can I just remove it and use the fix listed above?
Here is my dropdownbutton:
<xp_1:dropDownButton id="dropDownButton1">
<xp_1:this.treeNodes>
<xp_1:basicContainerNode styleClass="btn-primary" label="Tools">
<xp_1:this.children>
<xp_1:basicLeafNode label="Edit">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="New">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="Home">
</xp_1:basicLeafNode>
</xp_1:this.children>
</xp_1:basicContainerNode>
</xp_1:this.treeNodes>
</xp_1:dropDownButton>
How to add glyphicon to the main dropdown button?
Adding a span somewhere inside just doesn't work like for core button:
<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</xp:button>
Once you add code in your button, i.e. an eventHandler, you can add the icon there. Here is a button I have that includes a Font Awesome icon, but Glyphicons work the same way. Once you create the button and actions, go into the source code and add the icon as below:
<xp:button
value="Submit"
id="btnSave"
styleClass="btn btn-primary"
>
<i
class="fa fa-check"
aria-hidden="true"
></i>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
>
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument
var="currentDocument"
></xp:saveDocument>
<xp:openPage
name="#{sessionScope.lastPageName}"
></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
UPDATE
I did some tests, and while you can't add the icon the way we both want to, you can use CSS. I used a page with one dropdown button, and added CSS :before to add the icon within the button:
button::before {
font-family: "Glyphicons Halflings";
content: "\e172";
}
You may have to play with the CSS a little but hopefully, this can help.
I'm using the small module Link Badges to display a badge with the amount of flagged nodes next to a link to the View in question. It works great and I've styled the badge to my needs. This is the current HTML code:
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-menu_badges_execute_view">0</span>
</span>
</a>
Now, I'd like to display the badge a little bit differently (other colors etc.) when the value is 0. I thought about doing this by adding a new CSS class link-badge-zero to the value.
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-zero link-badge-menu_badges_execute_view">0</span>
</span>
</a>
How can I achieve this?
If you just want to add a class if the value inside your span is "0", give this a try
JQuery:
if($(".link-badge").text() == "0"){
$(".link-badge").addClass("link-badge-zero");
}
Here is a fiddle
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.
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!