Is there a simple way to show a commandButton when I hover an outer div?
<h:panelGroup layout="block" styleClass="galleryPreview">
<a4j:commandButton value="Start from here" styleClass="commandButton"
action="#{skinningBean.setCurrentSkinAndForwardToEditor(skin, false)}" />
</h:panelGroup>
So I guess I have to initially hide my buttons like visibility: hidden;
Is it possible to set all elements in my div visible on hover?
Something like
.galleryPreview:hover {
border: 1.5px solid #6bba29;
visibility: visible;
}
I just have to set the class of the commandButton to visible, not the outer div
.galleryPreview:hover .commandButton{
visibility: visible;
}
Related
I'm looking for a solution for a bootstrap accordion with a button to expand the accordion, but I would like to hide this button when it is expanded.
My accordion headline is like the beginning of the text inside of the accordion, and if I have the button there it is disturbing the view.
How can I hide this button when the accordion is expanded, but visible again when the accordion is collapsed?
The problem here is, that when I click on the title, to close the accordion, then the button remains disappeared, and if I click on the title again, the accordion will expand, but the title will disappear as well. If Possible, I would like to keep the title as link.
a[data-toggle='collapse'].collapsed {
visibility: visible;
}
a[data-toggle='collapse'] {
visibility: hidden;
}
This is what I have so far:
https://jsfiddle.net/o93kwj80/2/
Thanks
How will you close the accordion if you hide the title? I made a solution for you. If you click on the title, the title will be hidden and a close icon will show up. Then click on the close icon and the title will show up and accordion will be closed and close icon will be hidden.
a[data-toggle='collapse'].collapsed .title {
display: block;
}
a[data-toggle='collapse'].collapsed .close {
display: none;
}
a[data-toggle='collapse'] .title {
display: none;
}
a[data-toggle='collapse'] .close {
display: initial;
}
.close {
float: right;
color: red;
}
Please check the updated fiddle:
https://jsfiddle.net/o93kwj80/3/
I have a hidden div which get's displayed when a radio button is clicked, However the paragraph beneath it gets pushed down when I make the div visible, is there any way that I can have the paragraph pushed down even when the div is hidden, so that it doesn't move? Here is my code
HTML
<div id="container">Hello</div>
<p>Click the button below to view content</p>
<input type="radio" onclick="displayDiv()">
CSS
#container {
display: none;
color: #fff;
font-size: 30px;
}
Javascript
function displayDiv() {
document.getElementById("container").style.display = "block";
}
Change the property display by visibility; its purpose is to place the div as if it was on the page, but rendering it invisible if you give it a value of "hiden".
See this
CSS:
#container {
visibility: hidden;
}
JavaScript
function displayDiv() {
document.getElementById("container").style.visibility = "visible";
}
I have the following label:
<label for="payment_method_new">
New <img src="www.example.com/img.png"/>
</label>
What I would like to do is to only hide the text inside the label, but to display the image.
Any help or guidance is much appreciated.
You can use the visibility style for that.
First have your label's content hidden using hidden or collapse, then show your image using visible:
label[for="payment_method_new"]{
visbility: collapse;
}
label[for="payment_method_new"] img{
visibility: visible;
float: left;
}
JSFiddle
#hidet {
visibility: collapse;
}
#hidet img {
visibility: visible;
}
<label id='hidet' for="payment_method_new">
New
<img src="www.example.com/img.png" />
</label>
Is there any specific purpose of first writing text 'New' within your label and then hiding it?
There could be another way of retaining both image and text in your html code, still not showing the text -
<img src="www.example.com/img.png" alt="New" />
I searched on SO and Google and I couldn't find anything related. Is there any way I can hide the radio button next to an image (that is used as a label for it) but still keep its functionality when clicking on the label?
I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.
I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.
But it works. Maybe you didn't set for attribute:
<input id=radio1 name=testradios type=radio><label for=radio1>radio1</label>
<br>
<input id=radio2 name=testradios type=radio><label for=radio2>radio2</label>
#radio1 {
display: none;
}
OR
#radio1 {
visibility: hidden;
}
Both hide radio button but label is still clickable and checks its radiobutton.
http://jsfiddle.net/m0fbd75w/
In Angular, display:none or visibility:hidden didn't work for me.
Instead, I used:
input[type=radio] {
opacity: 0;
}
document.getElementById('myId').addEventListener('click', function() {
alert(this.checked);
})
label {
display: inline-block;
}
label:before {
content: '';
background: url('http://placehold.it/350x150') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
}
input {
display: none;
}
<input type="radio" id="myId">
<label for="myId"></label>
Just cover them with another div whose color matched with the background. This will hide the radio buttons and still your radio buttons will work on clicks of their labels. Hope that helps..
I can't seem to find a way of doing this, I can get it work off of the neares radio button to it, but not a specific one.
Here's my bit of code that almost does what I need it to:
...
Are you a supplier?:<br />
<input type="radio" name="supplier" id="supplier_no" value="0"/> No<br>
<div>
<input type="radio" name="supplier" id="supplier_yes" value="1"/> Yes
<br /><br />
<div class="languagereveal1">
What Language do you work with?:<br />
<select name="language1" value="">
...
And the CSS supporting it:
.languagereveal1 {
opacity: 0;
max-height: 0;
overflow: hidden;
}
input[type="radio"]:checked ~ .languagereveal1 {
opacity: 1;
max-height: 100px;
overflow: visible;
}
What I want, is the "Yes" radio button before the "No" radio button.
I figure there must be a way to specify using ID in that "input[type="radio"]" bit of the CSS, I've tried using what I know but that doesn't seem to be correct and I've looked around but cannot find anything.
Any help would be appreciated, thanks.
If you want to move "Yes" button before "No", then with your HTML structure selector will be:
#supplier_yes:checked ~ div > .languagereveal1 {
opacity: 1;
max-height: 100px;
overflow: visible;
}
Or input[type="radio"]:checked ~ div > .languagereveal1 will also work.
Demo: http://jsfiddle.net/v3p2fju7/