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.
Related
I have a problem with the width of a select2 dropdown in my ASP.NET page. When I try to view the page with the Chrome emulator of devices screen, the select2 is larger than the containing div, and on the right it goes out of the screen. I saw with code inspection that it adds automatically a style attribute style="width: 498px;" in the <span class="select2 select2-container select2-container--bootstrap select2-container--below"> element that I did not set anywhere. The only operation that I did is to set $("#ContentPlaceHolderContent_mySelect").select2(); in the document.ready function(). My select2 dropdown is contained in a block:
<div class="form-group">
<label class="control-label col-md-3">Select structure</label>
<div class="col-lg-5 col-md-9">
<select class="form-control" id="mySelect" runat="server"></select>
</div>
</div>
How can I remove that style="width" option?
Select2 adds class .select2. You can override what script does using css.
Here I'm set select2 to have 100% width, using !important. If I would not do that select2 would have 24px width.
You can further customize other classes that select2 generates using some principle.
$(document).ready(function(){
$("#mySelect").select2();
});
.select2 {
width:100%!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Select structure</label>
<div class="col-lg-5 col-md-9">
<select class="form-control" id="mySelect" runat="server"></select>
</div>
</div>
This works for me:
$('select').select2({
width: '100%'
});
and add CSS:
.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }
Add to CSS "!important" if you need.
Getting Overflow? Do it with JS also
Using CSS width:100% sometimes get scrolling issue if some elements have overflow property. I would recommend using js also.
Add below js
$('select').select2({
width: '100%'
});
Add below CSS
.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }
/*Copied from already given :) */
if you are using bootstrap ,use the below style
.form-group > .select2-container {
width: 100% !important;
}
try use dropdownParent
$('#mySelect2').select2({
dropdownParent: $('#myModal')
});
https://select2.org/dropdown#dropdown-placement
You don't need to use !important, you just can override it with max-width like:
.select2{
max-width: 100%;
}
The <span> with the .select2 class is created by the Select2 plugin just after creation a new select2 on a given <select>.
To make this span.select2 element responsive, we may have some possibilities, such as:
Use a % width (either on the original before creating the select2 element, or in the select2 width configuration option).
Override via CSS (for example when we use #media() queries). Note that this may affect the plugin's functionality or display.
For the 2nd one, we can use the adjacent sibling combinator (+) with the !important on the width value to style our select2's <span>, since normally the select2's span is created and inserted right after our <select>.
An example below:
#media (max-width: 400px) {
select.my-x-select + span.select2 {
width: 200px !important;
}
}
Note: select and span element selectors aren't needed, #media as an example use case.
First of all add Select2 class .select2 in select tag and used these CSS
.select2-container{
width: 100% !important;
}
.control-label {
width: 100%;
}
I'm trying to show different divs with different tables(Wordpress shortcode) in them by checking and unchecking a checkbox on my Wordpress site.
The code works fine on jsfiddle but on my website it doesn't happen anything when i use the checkbox. I want the div's to include different shortcodes. Maybe it has something to do with that?
Javascript:
$(document).ready(function() {
$("#overlay-1").change(function() {
$(".overlay-1").toggleClass("hide1337", this.unchecked)
$(".overlay-2").toggleClass("hide1338", this.unchecked)
}).change();
$("#overlay-1").change(function() {
$(".overlay-2").toggleClass("hide1337", this.unchecked)
$(".overlay-1").toggleClass("hide1338", this.unchecked)
}).change();
});
CSS
.hide1337 {
display: none;
}
.hide1338 {
display: show;
}
HTML
<div id="nav">
<input type="checkbox" name="overlay-1" id="overlay-1"> Checkbox
<br/>
</div>
<div class="overlay-1">
<br>shortcode2</div>
<div class="overlay-2">
<br>shortcode2</div>
http://jsfiddle.net/p6hFD/16/
No need for Javascript here. Go with pure CSS making use of pseudo selector :checked and sibling selector ~:
.overlay-1, .overlay-2 {
display: none;
}
#overlay-1:not(:checked) ~ .overlay-1 {
display: block;
}
#overlay-1:checked ~ .overlay-2 {
display: block;
}
<input type="checkbox" name="overlay-1" id="overlay-1"> Checkbox
<div class="overlay-1">
<br>shortcode1</div>
<div class="overlay-2">
<br>shortcode2</div>
Note:
For this to work the checkbox and the content containers that you want to hide/show must have the same parent element and the content containers must come after the checkbox.
I am looking to have a checkbox (Football) that when
Unchecked:
displays one DIV (FootballChoice) containing a label image for the checkbox that changes with mouseover
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV (FootballChecked) that contains an alternate label image
shows another hidden DIV (FootballTeams).
When unchecked again, this needs to return to it's original state.
Alternatively if anyone knows how to change the label image when checked to the same as the one specified in the mouseover element here, that would also be a usefull altetrnative?
Thank you in advance.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="FootballTeams"){
$(".FootballTeams").toggle();
$(".FootballChecked").toggle();
$(".FootballChoice").toggle();
}
});
});
</script>
.FootballChecked {
display: none;
}
.FootballChoice {
display: show;
}
.sport {
display: none;
border: 1px dashed #FF3333;
margin: 10px;
padding: 10px;
background: #003366;
}
<input id="Football" type="checkbox" value="FootballTeams">
<div class="FootballChoice">
<label for="Football" class="FootballChoice">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png" onmouseover="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png';" onmouseout="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png';" alt="Football" title="Football">
</label>
</div>
<div class="FootballChecked">
<label for="Football">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png" alt="Football" title="Football">
</label>
</div>
<div class="sport FootballTeams">
Football Teams here
</div>
Do you have to use JavaScript? You could use the CSS Pseudo-selector :checked and the General Siblings Selector to display elements based on whether the checkbox is :checked or not.
E.G:
#football {opacity:0.2;}
.checked {display:none;}
#football:checked ~ .unchecked {display:none;}
#football:checked ~ .checked {display:block;}
label {
display:inline-block;
border:1px solid blue;
padding:20px;
background:url(http://lorempixel.com/100/100/sports)
}
label:hover {
border-color:red;
background:url(http://lorempixel.com/100/100/cats)
}
div {border:1px dotted green;}
<input id="football" type="checkbox" value="1" />
<div class="unchecked">
Unchecked:
displays one DIV
<div id="FootballChoice">
(FootballChoice) containing a
<label for="football">label image for the checkbox that changes with mouseover</label>
</div>
</div>
<div class="checked">
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV
<div id="FootballChecked">
(FootballChecked) that contains an
<label for="football">alternate label image</label>
</div>
shows another hidden DIV .
<div id="FootballTeams">
(FootballTeams)
</div>
When unchecked again, this needs to return to it's original state.
</div>
http://jsfiddle.net/zpz3mvuv/
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 not able to select a checkbox and see a check in it. Somehow the css is not connected to the HTML. One of the issues is that the HTML is generated by a Django custom render function, so I'm keeping changes minimal. Here is the HTML:
<li class="option table"><div class="option-checkbox"><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /></div></li>
Here is the CSS which renders the checkbox:
.option .option-checkbox input[type="checkbox"]{display:none}
.option.selected{color:#10a6b8}
.option.selected .check{margin:3px 1px;background:url(check.png) no-repeat;width:16px;height:13px;overflow:hidden}
.option:hover{border:1px solid #0e91a1}
.option:active,.option.selected:active, .option.active{background-color:#0e91a1;color:#fff}
.option-checkbox {
background-color: #FFFFFF;
border: 2px solid #E2E2E2;
height: 20px;
margin: 20px;
width: 20px;
}
I simply cannot see what the issue is. Thanks.
Is there a way without js/jquery. My HTML is rendered from a database so I want this to be as clean as possible and having js/jquery means its going to be messy.
I simplified this quite a bit I think. The trick to styling "checkboxes" is to style the label and to use the + selector so we can tell when the checkbox is checked. Here's a really simple approach.
/* Let's make our checkbox a simple green box! */
label:before {
content: '';
background-color: green;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
vertical-align: middle;
}
/* When the input **before** the label is checked, let's adjust it's styling. */
input:checked + label:before {
background-color: red;
}
Here's my demo HTML
<div class="field">
<input type="checkbox" name="foo[]" id="foo-003" value="foo-003">
<label for="foo-003">Foo 003</label>
</div>
Here's a demo for you: http://jsbin.com/UvuNaWo/3/edit?html,css,output
It should help get things a bit clearer.
Under the assumption that your complete code looks like this:
<li class="option table">
<div class="option-checkbox"><div class="check"></div><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /></div>
</li>
i can generally demonstrate your desired outcome by adding this:
// In plain javascript
onclick="document.getElementById('id_MyJobChoices_0').click();this.className=(document.getElementById('id_MyJobChoices_0').checked==true?'option table selected':'option table')"
// or using jQuery
onclick="$('#id_MyJobChoices_0').click();$(this).toggleClass('selected')"
to:
<li class="option table">
resulting in:
// In plain javascript
<li onclick="document.getElementById('id_MyJobChoices_0').click();this.className=(document.getElementById('id_MyJobChoices_0').checked==true?'option table selected':'option table')" class="option table">
// or using jQuery
<li onclick="$(this).toggleClass('selected')" class="option table">
See this fiddle for a demonstration
Please note
I used a placeholder image, instead of your check.png file.
Hints
In order to check if the checkbox is currently marked, you can use this:
// In plain javascript
document.getElementById('id_MyJobChoices_0').checked
// or using jQuery
$('#id_MyJobChoices_0').is(':checked')
I demonstrated this in the fiddle, too.
Please keep in mind that this solution is just a demonstration - there is still much room for improvement.