What is the simplest way to change the image selected (class=selected) when a form element is selected? I've tried several different methods (unsuccessfully) but my Javascript is a bit rusty so I could use some help.
I am displaying an image next to each set of radio buttons which depicts the value when hovered or selected. In addition, I've pre-selected a default value to be displayed initially (usually the most popular answer). The css ensures that the relevant images are displayed in a fixed position, and the z-index and opacity change in order to display the correct image. The only problem is that when the user clicks on a radio button it on, the value is correctly set to selected but the corresponding image is not being selected.
I have included the relevant snippets below and posted a fiddle with the full css here.
<style type="text/css">
.new li img {
opacity: 0;}
.new li.selected img {
z-index: 2;
opacity: 1;}
.new:hover li.selected img {
z-index: 0;}
.new li:hover img {
z-index: 2;
opacity: 1;}
</style>
<div class="new alternate_image">
<ul>
<li>
<img src="sports.png" />
<label><input type="radio" name="item1" value="Sports"/>Sports</label>
</li>
<li>
<img src="fashion.png" />
<label><input type="radio" name="item1" value="Fashion"/>Fashion</label>
</li>
<li class="selected">
<img src="city.png" />
<label><input type="radio" name="item1" value="City"/>City</label>
</li>
</ul>
</div>
The following will do the job. Though since it will affect all radio buttons, you may want to tweak the first selector (e.g. '.alternate_image input[type=radio]').
$('input[type=radio]').change(function() {
var name = this.name;
var self = this;
$('input[name=' + name + ']').each(function() {
$(this).closest('li').toggleClass('selected', this === self);
});
});
http://jsfiddle.net/nonplus/qF3P9/1/
Related
I prepared a JSFiddle here to explain my problem.
What I'm trying to accomplish:
I am making a grid out of four transparent square PNGs that float left
each PNG is clickable as a label for a checkbox
when a box is clicked the opacity of the PNG should change to show it's active
grid layer should be on top of a "background image"
"background image" is loaded dynamically so it cannot use CSS
"background image" is a separate div with position:absolute
user clicks on a given square of the grid
user submits form that contains checkbox info (from clicked boxes)
My problem:
without the "background image" the script works as expected
with the "background image" it stays in the foreground and when I click it activates the image itself, making it semi-transparent
My question:
how do I bring the PNG squares to the foreground so they are clickable and change in opacity, the user having no interaction with the "background image"?
HTML
<div class="wrapper">
<span>
<label for="R0_C0">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R0_C0" value="1" class="hidden_checkbox" id="R0_C1">
</span>
<span>
<label for="R0_C1">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R0_C1" value="1" class="hidden_checkbox" id="R0_C1">
</span>
<span>
<label for="R1_C0">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R1_C0" value="1" class="hidden_checkbox" id="R1_C0">
</span>
<span>
<label for="R1_C1">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R1_C1" value="1" class="hidden_checkbox" id="R1_C1">
</span>
</div>
<!-- comment/remove code below this line to see the expected behavior -->
<div class="bg_img">
<img src="http://i.stack.imgur.com/4bVu3.jpg" />
</div>
CSS
.wrapper {
width: 64px
}
span {
float: left
}
.hidden_checkbox {
display: none
}
.selected_checkbox {
opacity: 0.5;
}
.bg_img {
position:absolute
}
JS
$(function() {
$('img').click(function() {
$(this).toggleClass('selected_checkbox');
});
});
Use z-index to help specify that you want your image to be in the background like so:
.bg_img {
position:absolute;
z-index: -1;
}
Updated Fiddle: https://jsfiddle.net/u177yr8z/3/
More information on z-order/z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Improving your selectors would help. Even using "label > img" would prevent the background image from being roped into click events.
Basically any css selector argument is valid to use with jQuery, so just be more specific when you tell it what you're listening for.
I have check boxes which I have images set for the labels, and I'm using code which applies an effect when hovered over. However when tested in a fiddle the hover effect stays when selected and doesn't show the actual check tick box, only issue with the fiddle is that this only works on the last checked not all checked.
However when I apply this to my site only the hover effect works, the effect doesn't stay on any selected and the tick boxes stay visible.
The fiddle: http://jsfiddle.net/Zgh24/1169/
The only differences between that in my code is that the DIV it is in also has classes, I'm using bootstrap.
HTML:
<div id="sites" class="navbar navbar-inverse" style="padding:5px">
<input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>
CSS:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#sites label {
display: inline-block;
cursor: pointer;
}
#sites label:hover {
background-color: #ccc;
}
#sites label img {
padding: 3px;
}
JS:
<script>
$('#sites input:checkbox').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
So my issue is sort of 2, I have a Fiddle which sort of does what I want, and then the fiddle I do have doesn't full work when I implement it.
I'm assuming I possibly have some css which is conflicting with that I'm trying to do, but I don't see how or what.
Any help is very appreciated -Tom
You could use only CSS pseudo class :checked and targeting next sibling label:
input[type=checkbox]:checked + label img
Finally, you should use as CSS rules:
#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
background-color: #ccc;
}
DEMO jsFiddle
FYI, you could wish in some case to use instead of checkboxes radio buttons as in this jsFiddle:
http://jsfiddle.net/Zgh24/1173/
That could let you use persistant style on some element using only CSS with radio buttons hiddden:
http://jsfiddle.net/Zgh24/1174/
May be not sure.. the class .selected is used by bootstrap core and that style is applied to your label element.
Use your browser to see what style is applied.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
Is it possible to set the background-color of the li when I put the cursor in a or b or c?
I have this list with 100 records and I want the hole row ("li") to show up in another color so it gets more easy to work with the list.
<li id=recordsArray_1>
<form medthod=post name=fr_1 id=fr_1>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_1 value=ok>
</form>
</li>
<li id=recordsArray_2>
<form medthod=post name=fr_2 id=fr_2>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_2 value=ok>
</form>
</li>
<li id=recordsArray_3>
<form medthod=post name=fr_3 id=fr_3>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_3 value=ok>
</form>
</li>
.etc .... > 100
You can have a sibling element to the input elements and make it cover the li with background color on hover.
CSS
input[type=text]:focus~div {
background-color:red;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: -1;
}
li {
position:relative;
}
jsfiddle
You can't do this with pure css, you'll need to use javascript / jQuery:
$("input[type='text']").focus(function(){
$("li").removeClass("background");
$(this).closest("li").addClass("background");
});
See: http://jsfiddle.net/HF5Tx/
Even though there is no parent selector, you have a hover state on the li triggered by the hover of the children (the hover bubbles).
One posibility is to use that state, and if you want to avoid the change when the cursor is on the li, but not on the inputs, just disable the hover event:
CSS
li {
position:relative;
z-index: 1;
pointer-events: none;
}
li:hover {
background-color: red;
}
input {
position: relative;
z-index: 2;
pointer-events: all;
}
fiddle
Is it possible to set the background-color of the "li" when I put the cursor in on of its children inputs?
No, unfortunately the :focus selector does not work on the ancestors of the focused element, so you cannot detect that. :active would, but does only flash in the moment of the click.
The :hover selector (applied to the li) could do it, assuming you're using mouse navigation it would have a similar effect - and also help while viewing the table, not only when filling out inputs. However, it doesn't work with keyboard-based navigation.
So you can only resort to JS (using jQuery for an example, same is easily achievable with native DOM):
var $lis = $("li");
$lis.find("input:text").focus(function(e) {
$lis.css("background-color", "none");
$(this).closest("li").css("background-color", "red");
});
I'm trying to create a form in HTML using radio buttons for options. The radio buttons need to be individual clickable thumbnail images (so no browser style radio buttons will be seen, and each radio button is different). There will be 3 groups of radio buttons, each with 3 options.
These need to combine at the end to display a larger main image elsewhere on the page, based on the options the user selected.
I want the main image to change dynamically, as the user selects each option. - I don't want a form with a submit button at the end.
Does anyone have any ideas please?
The code I have so far is:
<style>
label {display:block;}
.radio {
opacity: 0.5;
width: 80px;
height: 80px;
float: left;
margin: 5px;
}
.checked {opacity: 1;}
#single {background: url(a.jpg);}
#double {background: url(b.jpg);}
#none {background: url(c.jpg);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[type=radio].radio-image').each(function() {
var id = this.id;
$(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
});
$('.newrad').live('click', function(e) {
e.preventDefault();
var $check = $(this).prev('input');
$('.newrad div').attr('class', 'radio');
$(this).find('div').addClass('checked');
$('input[type=radio].radio-image').attr('checked', false);
$check.attr('checked', true);
});
});
$(document).ready(function() {
$("input:radio[name=wardrobe]").change(function() {
if (this.value == "a") {
$("#imgOne").attr(
'src', 'a.jpg'
);
}
else {
$("#imgOne").attr(
'src', 'b.jpg'
);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />A</label>
<label><input type="radio" class="radio-image" name="wardrobe" id="double" value="b" />B</label>
<label><input type="radio" class="radio-image" name="wardrobe" id="none" value="c" />C</label>
</form>
<img id="imgOne" />
</body>
It's only a partial code, for the first set of options, I used it as a starting point.
I managed to get thumbnails as radio buttons, which work great. And I managed to get normal radio buttons to swap an image. But I can't get both working together.
So, I think you are on the right track. Although I am a little confused on the functionality of hiding the button and replacing it with an tag, I believe what you want is to make thumbnail images have the functionality of radio buttons. All you have to do is replace your current
<input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />
with
<img src="a.jpg" class="radio-image" data-ref="a"/>
and change your jQuery to allow for these new images:
$(document).ready(function() {
$('img.radio-image').click(function() {
$("img.selected").removeClass("selected");
$(this).addClass("selected");
$("#imgOne").attr("src", $(this).attr("data-ref") + ".jpg");
});
});
and the css
img{
border: 1px solid transparent;
}
.selected {
border: 1px solid #00c;
}
The trick is that your images just need to sit there. Let jQuery do the heavy lifting. I hope this helps.
i have a image with checkbox, i used this code for Checking a checkbox by clicking an image...
<label for="img1"><img class="img" src="myimage.jpg" /></label>
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />
its working fine, my question is, i want when checking check box above image opacity will be 0.5 or display a extra div over this image and when Un check above image opacity return to 1.0 or remove that div if we use div, any idea.???
thanks
You can accomplish this using some advanced CSS selectors provided that the <label> is the checkbox. The ~ selector is called general sibling selector and will match all sibling after the element.
jsFiddle
CSS
input:checked ~ label {
opacity: 0.5;
}
HTML
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />
<label for="img1">
<img class="img" src="https://www.google.com.au/images/srpr/logo4w.png" />
</label>
Support
Support for :checked is only present for IE9 and above, if you need support for IE8 then you can you use a .checked class as use it in addition to the CSS3 :checked selector.
JS
$('#img1').click(function () {
$(this).toggleClass('checked');
});
CSS
input:checked ~ label,
input.checked ~ label {
opacity: 0.5;
}
For support < IE8 then you should use a more general JavaScript solution.
$('#img1').click(function () {
$('label[for=' + this.id + ']').toggleClass('checked');
});
label.checked {
opacity: 0.5;
}
$('.img').click(function() {
if ($('#img1').is(':checked'))
$(this).css('opacity', 0.5);
else
$(this).css('opacity', 1);
});
$('.img').click(function() {
$(this).css('opacity', $('#img1').is(':checked')?0.5:1.0);
});