This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
The div is not changing properties when I hover on the <input> of that div. It doesn't seem to work.
I want to hover over myclass div inputs and make myclass2 div visible.
How to do that ?
.myclass #that:hover+.myclass2 #this {
left: 100px;
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn"></input>
<input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
<span class="first"></span>
<span class="second"></span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2"></input>
<input class="logout4" type="button" value="Section2" id="myBtn3"></input>
<input class="logout5" type="button" value="Section3" id="myBtn4"></input>
<input class="logout6" type="button" value="Section4" id="myBtn5"></input>
<span class="third"></span>
<span class="fourth"></span>
</div>
.myclass2{
display:none;
}
.myclass:hover+.myclass2{
display:block;
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn">
<input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
<span class="first"></span>
<span class="second"></span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2">
<input class="logout4" type="button" value="Section2" id="myBtn3">
<input class="logout5" type="button" value="Section3" id="myBtn4"
<input class="logout6" type="button" value="Section4" id="myBtn5">
<span class="third"></span>
<span class="fourth"></span>
</div>
This works - you need position
HOWEVER you cannot click the new buttons - so see second example
#this { position:absolute; width: 300px }
#that:hover + #this {
right: 100px
}
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn" />
<input class="logout2" type="button" value="Section Wise" id="myBtn1" />
<span class="first">First</span>
<span class="second">Second</span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2" />
<input class="logout4" type="button" value="Section2" id="myBtn3" />
<input class="logout5" type="button" value="Section3" id="myBtn4" />
<input class="logout6" type="button" value="Section4" id="myBtn5" />
<span class="third">Third</span>
<span class="fourth">Fourth</span>
</div>
I THINK you mean this:
/*
$("#myBtn").on("click",function() {
$("#this").toggle()
})
*/
$("#myBtn").on("mouseenter",function() {
$("#this").show();
})
$("#myBtn").on("mouseleave",function() {
setTimeout(function() { $("#this").hide(); },3000);
})
#this { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass" id="that">
<input class="logout1" type="button" value="All" id="myBtn" />
<input class="logout2" type="button" value="Section Wise" id="myBtn1" />
<span class="first">First</span>
<span class="second">Second</span>
</div>
<div class="myclass2" id="this">
<input class="logout3" type="button" value="Section1" id="myBtn2" />
<input class="logout4" type="button" value="Section2" id="myBtn3" />
<input class="logout5" type="button" value="Section3" id="myBtn4" />
<input class="logout6" type="button" value="Section4" id="myBtn5" />
<span class="third">Third</span>
<span class="fourth">Fourth</span>
</div>
If you just wan't to make your that div visible when you hover this.
Then you can use visibile properties, can be managed with css or jquery method.
Css method
#that:hover + #this{
visibility : visible;
}
#this{
visibility : hidden;
}
Jquery method
Something like :
$('#this').hide();
$('#that').hover(function(event){
$('#this').show();
});
I would remove the classes or the ids (or keep them if you need them for something else...) however here is an SCSS that can solve this issue for you:
Here, I removed the classes, but as I mentioned above, you can keep the classes and remove the Ids or keep them both :)
#this {
display: none;
}
#that {
&:hover {
+ {
#this {
display: block;
}
}
}
}
Related
I need specific jquery or js function to display onclick:
<div id="resultTab">
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
</div>
It can be repeated 50-100 times.
So when I click button it has to show only <div> which is written after that <button> not all <div>s
Note: all button and div's created by jquery so I can't give specific id to use in function.
Please help me to solve this problem. I'm totally stack, if its possible I want to display that <div> in the middle of page like popup window.
UPDATE: The function is working, but in this situation its not working, what can I do?
Don't use the same ID everywhere, ID need to be uniqe. I changed your ID's to Class
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
$("button").on("click", function() {
$(this).next().show();
});
if you use toggle(), you can hide and show the div
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
You should not have the same ids attached to multiple elements. You can use next() to select he next element after the button and slideToggle() to show/hide the div:
$('input[type="button"]').on('click', function(){
$(this).next('.help').slideToggle();
});
.help{
display: none;
}
input[type='button']{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultTab">
<input id="help_button_1" type="button" value="Full Info">
<div id="help_1" class="help">Table with data</div>
<input id="help_button_2" type="button" value="Full Info">
<div id="help_2" class="help">Table with data</div>
<input id="help_button_3" type="button" value="Full Info">
<div id="help_3" class="help">Table with data</div>
</div>
I have simple radio button, using bootstrap like this
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
So what i want really to do is, when i click the radio, the span class is change from btn-danger into btn-success. Of course previous button that has btn-success is would be back into btn-danger again. I try with my javascript code but it wouldn't work out.
$(document).ready(function() {
$("label").click(function() {
if ($(this).children().children().is(":checked")) {
$(this).children().attr("class", "btn btn-success");
} else {
$(this).children().attr("class", "btn btn-danger");
}
});
});
Ok when I click the radio it turned in to green (btn-success), but when i check another radio, it turned in to green but previous radio which i click it, it still green (still has btn-success class). Can someone help me? Thanks :)
You also need to remove/add the proper CSS class from unckecked radio's parent element element.
Also .addClass() and .removeClass() can be used to add and remove the CSS class. Here in the example I have also used .filter()
$(document).ready(function() {
$("label").click(function() {
//Cache elements
var radioElem = $(":radio[name=tipe]");
//Remove the btn-success and add btn-danger class to all the parent element of radio
radioElem.parent().removeClass('btn-success').addClass('btn-danger');
//Filter out checked radio and add/remove the classes
radioElem.filter(":checked").parent().addClass('btn-success').removeClass('btn-danger');
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
On change of any radio button iterate loop through all the radio buttons and check whether the radio button is checked or not and accordingly made change the classes of the parent div. Please refer the below snippet for more understanding.
$("input[type='radio']").on("change",function(){
$("input[type='radio']").each(function(){
if($(this).is(':checked')){
$(this).parent().removeClass('btn-danger').addClass('btn-success');
}else{
$(this).parent().removeClass('btn-success').addClass('btn-danger');
}
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label for="radio-A">
<span class="btn btn-danger">
<input id="radio-A" type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label for="radio-B">
<span class="btn btn-danger">
<input id="radio-B" type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label for="radio-C">
<span class="btn btn-danger">
<input id="radio-C" type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
You are only checking the children of the clicked button and set or rest that one. But you have to reset the children of the buttons that have not been clicked in order to make them red again.
You could do something like
$(document).ready(function() {
$("label").click(function() {
$("label").children().attr("class", "btn btn-danger"); // reset all
$(this).children().attr("class", "btn btn-success"); // set current
});
});
It is very simple
if(!$('[name="tipe"][value="str"]').is(':checked')) {
alert("it's not checked");
}
Try this code,
$(document).ready(function() {
$('label').click(function() {
$('label').find('span').attr('class','btn btn-danger');
if ($(this).find('input:checked')) {
$(this).find('span').attr('class','btn btn-success');
}
});
});
Thanks!
You can just replace above jQuery code with below code
$(document).ready(function() {
$("label").click(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
} else {
$('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
}
});
});
Can you please take a look at this demo and let me know why I am not able to ONLy remove the .check-wrap classes if exist? what is happening now the .unwrap() is even removing the .well
$("#un-mask").on("click", function() {
if ($("input:checkbox").parent().is('.check-wrap'))
$("input:checkbox").unwrap("<span class='check-wrap'></div>");
});
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<input type="checkbox" />
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
jQuery's .unwrap() method does not accept any arguments. It removes the parent of every matched element. Since your div.well is the parent of the first checkbox input, it is also removed.
One way to fix this would be to wrap the first checkbox input in a tag of some kind just like the others:
$('input:checkbox').unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
https://api.jquery.com/unwrap/
Can I center the content of div with center-block??
The following example does not work:
<div class="form-group">
<div class="center-block">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/2/
And this one works:
<div class="form-group">
<div>
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success center-block" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/3/
I want two buttons centered, that is why I want the div with the center-block.
The class center-block applies the center to the element itself, not to the content; in this case you can use the class text-center on the container and since the input has the class btn making it inline-block, that will work:
<div class="text-center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
DemoFiddle
Just use text-align:center on the div:
.center-block {
text-align:center;
}
jsFiddle example
(or use the selector .form-group > div instead of .center-block if you're not using that class for anything)
You can use simply put text-align:center
<div class="form-group">
<div style="text-align:center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
I am trying to use the Twitter Bootstrap button group as an actual set of form input controls. By default, these button groups can be made to function like a radio button or checkbox group, but since they use the <button> element, they cannot actually be used like a radio button or checkbox.
In my research, I found this site which uses CSS to make these bootstrap buttons actually control radio buttons and checkboxes. The only issue is they use rather recent features of CSS to work, and therefore, require IE9 or above to work.
I would like to extend support to IE8. Is there another (perhaps JS controlled) solution which would offer the same features as the above link without the steep CSS requirements?
Thank you for your time.
Bootstrap 3 has a "native" solution...
There now is a "true" Bootstrap solution for this problem, which appears to work fine also on older browsers. Here's what it looks like:
// get selection
$('.colors input[type=radio]').on('change', function() {
console.log(this.value);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group colors" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" value="red" autocomplete="off" checked> Red
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="orange" autocomplete="off"> Orange
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
</label>
</div>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
See the relevant Bootstrap documentation for more information.
Bootstrap 4
Bootstrap 4 supports component the same way as Bootstrap 3, but Bootstrap 4 does not support IE9. You might want to check out the Bootstrap IE8 project.
Bootstrap 2
Try this fiddle
HTML:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>
Script:
$(".btn-group button").click(function () {
$("#buttonvalue").val($(this).text());
});
then get buttonvalue server side
With Bootstrap 3.2 put the hidden input in the middle of your button group container. Instead of the text content we take the value of th data-value field.
<div id="test" class="btn-group checkit" data-toggle="buttons-radio">
<button type="button" data-value="1" class="btn btn-default active">Yes</button>
<input type='hidden' name="testfield" value='1'>
<button type="button" data-value="0" class="btn btn-default ">No</button>
</div>
Now insert a little javascript snippet into the onload part of your template.
$('.checkit .btn').click(function() {
$(this).parent().find('input').val($(this).data("value"));
});
So you only need to add .checkit to your button group and insert a hidden input field.
With bootstrap 3.2 you can use button groups directly with radio- or checkbox-inputs
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" value="1" /> Yes
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="0" /> No
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" value="42" /> Whatever
</label>
</div>
See here:
http://jsfiddle.net/DHoeschen/gmxr45hh/1/
You can use hidden form elements and javascript to use the button state to trigger the form element states.
CSS-only solution:
HTML:
<div class="btn-group">
<label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
<label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
</div>
SCSS/LESS:
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
span {
display: block;
padding: 10px 15px;
}
input[type=checkbox] {
display: none;
}
input:checked + span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
JSfiddle here
If you don't want to add JS code you can use this pure CSS solution:
HTML:
<div class="btn-group colors">
<label class="btn btn-primary">
<input type="radio" name="g1" value="red" autocomplete="off" checked>
<span class='active'></span>
<span class='label'>RED</span>
<span></span>
</label>
<label class="btn btn-primary">
<input type="radio" name="g1" value="orange" autocomplete="off">
<span class='active'></span>
<span class='label'>ORANGE</span>
</label>
<label class="btn btn-primary">
<input type="radio" name="g1" value="yellow" autocomplete="off">
<span class='active'></span>
<span class='label'>YELLOW</span>
</label>
</div>
CSS:
input {
display:none;
}
input:checked + .active{
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:10;
}
.label{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
}
You may need to set a height and width for the buttons in CSS since the spans are positioned absolute.
See here JSFiddle example