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.
Related
I'm not sure whether the title is correct But I have a custom png file that I want to apply as an icon in an existing application. Because this is an existing application, I can't make too many changes in order to keep the consistency. The only thing that I have to do is by using icon tag.
<i class="icon name" />
I've tried to create a new class and set the background image.
.new-icon {
background-image: url("./img/icon.png")
}
After that I applied that class in an icon tag like
<i class="new-icon" />
But the image didn't show at all. What I should do?
You can use <img> tag for png files but if you want to create something that you use in <i> you should create your icons as a font file, I suggest you to use <img> tag.
You should design your icon as SVG, then you can make it web fonts from here: https://fontello.com/
You can not use png as an icon.
I have a button in React which when clicked scrolls the page to the desired location, which is working.
<div className={styles.classB}>
<Button onClick={ScreenMover.MoveToElem} > Extras </Button>
</div>
But I wanted the same onClick feature without a button, say a link and when clicking it should do the same operation. So I have used the below Link button, but it is not taking the onClick instead it goes to the page top based on the to="" attribute.
<div className={styles.classL}>
<Link className={styles.linkButton} onClick={ScreenMover.MoveToElem} to=""> Extras </Link>
</div>
Another thought, if we can not achieve the above one, then can we have a button look like a link by applying some css style to the button? I should be able to override the inherited button styles and instead it should take the link look and feel. Is it possible and can we have a sample css class for it?
Thanks in advance.
The Link object is important for you?
If not you can use a simple <p> tag and the onClick event will working perfectly.
<p className={styles.linkButton} onClick={ScreenMover.MoveToElem}> Extras </p>
I need to make a link to another page in Meteor using Meteoric package. I'm trying to add it to the right of the header with a button. If I create a button in {{#contentFor "headerButtonRight"}} - it aligns as expected. But if I add a tag - alignment is no longer applied. I tried putting the element to "headerTitle" and add class "pull-right" but results are the same. Currently my code looks like this:
{{#contentFor "headerButtonRight"}}
<button class="button button-clear pull-right">{{> ionIcon icon="ios-barcode"}} Scan</button>
{{/contentFor}}
If this is not the correct way to put a link button to the right of the header - what is?
Thank You in advance.
You probably don't need the button nested inside the link tage try...
{{#contentFor "headerButtonRight"}}
{{> ionIcon icon="ios-barcode"}} Scan
{{/contentFor}}
As part of making our site WCAG compliance we are adding play/pause buttons for carousel.Here the screen reader is reading in different manner
<div id="imageCarouselPlayBtn" class="cblt-button imageCarouselPlayBtn" tabindex ="0">
►
</div>
<div id="imageCarouselPauseBtn" class="cblt-button imageCarouselPauseBtn" tabindex ="0">
‖
</div>`
in this case screen reader is reading pause button as double vertical line and group for play button.
if we use sprite image instead it is reading as group for both play/pause buttons.
Is there any good solution for this problem instead of using image tags for both ?
You could use WAI-ARIA’s aria-label attribute:
It provides the user with a recognizable name of the object.
Also: Is there a reason why you don’t use button/input instead of div for the play/pause buttons? With buttons, your markup could look like:
<button type="button" aria-label="Play">►</button>
<button type="button" aria-label="Pause">‖</button>
I want to make a style on html5 audio player.
<audio id="player" controls="controls">
<source src="song.ogg" type="audio/ogg" />
<!-- using mozilla firefox -->
Your browser does not support HTML5 audio. Please upgrade your browser.
</audio>
Is it possible to put css style on the html5 generic audio player timeline?
-thanks.
The following code, when pasted into Chrome's developer console, reveals a document fragment that describes the audio element's structure:
var aud = document.createElement('audio');
document.querySelector('body').appendChild(aud);
aud.controls = true;
Going to the chrome debugger's elements tab reveals this document fragment:
<div>
<div>
<div>
<input type="button">
<input type="range" precision="float" max="0">
<div style="display: none;">0:00</div>
<div>0:00</div>
<input type="button">
<input type="range" precision="float" max="1" style="display: none;">
<input type="button" style="display: none;">
<input type="button" style="display: none;">
</div>
</div>
</div>
If there was a way to change the style of the time display or the play/pause button without redefining the inner structure(i.e. shadow DOM), it would be through that document fragment. There is neither a function nor an attribute that suggests the ability to access said document fragment.
Youtube does their own HTML5 video timeline in case someone wants to "try something new"(or just hack an easy way to download some of their ad-free WebM videos), so I know it is possible. I'm guessing you would need to do it like this:
<audio id="player" ><!--notice how you get rid of the controls -->
<source src="song.ogg" type="audio/ogg" /> <!-- using mozilla firefox -->
Your browser does not support HTML5 audio. Please upgrade your browser.
</audio>
If you have the audio player hidden, you can add Event Listeners to update the status/progress. You will definitely want to use at least onTimeUpdate
Meanwhile, you can make your own DOM controller with a square tags with border-radius = (width/2) for a circle, or just use a . I suggest you look into the Shadow DOM for a way to hide functionality from both users and other scripts.
If you want to just show the user how far the music has played and not allow the user to seek, use a tag or a tag. Otherwise, you can use an tag and stylize that. Don't forget to add an onInput handler to skip through the track.
edit
I did not see that image. You must have uploaded it while I was answering. I would suggest you use a filter, but that might not work on anything but images. Try making a div transparent over it and allowing the user to click through it
edit #2
It turns out that background-color kinda tints the player in Chrome(only the audio player) depending on the background color, but the play time color does not change color with either background-color or color. You can get full control and uniformity over your style with a custom player, but that would mean extra work for you. I hope that my answers were helpful.