I have two commandLink in my code.
<h:commandLink action="#{localeController.switchLocale('en')}" value="English"/> |
<h:commandLink action="#{localeController.switchLocale('fr')}" rendered="true" value="French"/>
I want to set some css styling for the selected Link. I tried with a:visited but its not working. How can I make some changes for the selected Link?
Please suggest!
Related
Some people like to disable text selection for various reasons like keeping it on can make a page look ugly if someone hits CTRL A, or maybe you don't want people potentially leaving your site after highlighting text to search for on Google!
I globally disabled text selection on my site and wanted to re-enable it on specific elements as required. After some investigation, I found the solution.
All the code listed is tested and working on multiple browsers.
CSS example of globally disabling text selection.
* {user-select:none;}
The solution. Please check out the jsfiddle link below for a working example.
HTML
<h2>Unselectable/Selectable</h2><br/>
<p>You can't select any of this text but you can select the text in the box below because a css rule has been made specifically to reenable text selection for that particular element.<br/><br/></p>
<input name="title" id='selectMe' type="textbox" />
CSS
* {padding:20px; user-select:none;}
#selectMe {user-select:text; border:1px solid #000; padding:10px;}
http://jsfiddle.net/7zwr0ody/1/
I'd like to know, if there is any way to replace the default button of <b:commandButton> with a <b:iconAwesome>.
However, it does work with a <h:commandLink>, perfectly.
<h:commandLink>
<b:iconAwesome name="arrow-down"></b:iconAwesome>
</h:commandLink>
And with replacing, I mean fully replaced and not, that the icon is on the button. Just check the working code above.
Are there other hints to be mentioned?
(Note: <b:...> is a component of BootsFaces.)
Two answers:
To show an icon within a commandButton, just add the iconAwesome attribute:
<b:commandButton value="" ajax="true" update="form:inform infoshow"
iconAwesome="thumbs-up" look="info" />
If you want to display the image instead of the button, while keeping the button functionality, add a couple of inline styles (also see here):
<b:commandButton value="" ajax="true" update="form:inform infoshow"
iconAwesome="thumbs-up" look="info"
style="padding: 0; border: none; background: none;color: #000" />
If you need more flexibility: we're already working on it. BootsFaces 0.8 is going to allow you to nest arbitrary HTML within the <b:commandButton />, exactly the way you did in your <b:commandLink /> example. You can watch the progress on our bug tracker: https://github.com/TheCoder4eu/BootsFaces-OSP/issues/65
On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.
Thanks,
Bruno
Stuff you can do with the “Checkbox Hack”
It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.
It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link
<a href="#" tabindex="0">
<img src="1.png">
</a>
On your CSS:
a:focus img{
content:"xxx";
width:XXpx;
height:XXpx;
/*Whatever you need here*/
}
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .
I am using JSF 2.0
I am able to add Background image to the JSF button but am not able to add icon to the button.
My Requirement is:- JSF button with Background image and a Icon
Following code am using to add background.
<!-- Discard button-->
<h:commandButton action="discard" style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; " value="#{message.discard}">
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
Can somebody help me in adding a icon to the button too please.
I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.
So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces. See also the <p:commandButton> showcase.