i have jquery in there i want to make my structure of my html change when i click my checkbox
for example :
when i checked my checkbox my .col-md-4 col-md-push-2 will change to .col-md-6
and when i uncheck it will back to normal
here my jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
$(".col-md-4").attr("class", "col-md-6");
$(".col-md-push-2").attr("class", "");
});
});
</script>
and here my view :
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<input type="checkbox" id="try">
in there i can make it change if i check it, but i can't make how to change back again when i uncheck it.
have someone tell me what improvements do i have to make to the code to achieve my goal?
You could toggle these classes, e.g:
$(document).ready(function(){
var $colmd2 = $(".col-md-push-2");
$('input[type="checkbox"]').change(function(){
$(".col-md-4, .col-md-6").toggleClass("col-md-4 col-md-6");
$colmd2.toggleClass("col-md-push-2");
});
});
i think this is what exactly you are looking for...when checks add col-md-6 when uncheck get back its col-md-4
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$(".col-md-push-2").addClass("col-md-6");
$(".col-md-push-2").removeClass("col-md-4");
}
else if($(this).prop("checked") == false){
$(".col-md-push-2").addClass("col-md-4");
$(".col-md-push-2").removeClass("col-md-6");
}
});
});
</script>
</head>
<body>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<input type="checkbox" id="try">
</body>
</html>
try this code ..
$('input[type="checkbox"]').click(function () {
if ($('input[type="checkbox"]').prop('checked')) {
$('.col-md-4').addClass('col-md-6').removeClass('col-md-4 col-md-push-2')
}
else {
$('.col-md-6').addClass('col-md-4 col-md-push-2').removeClass('col-md-6')
}
});
An alternate option. Use This:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
if($(this).is(":checked")){
$(".space").addClass("col-md-6").removeClass("col-md-4 col-md-push-2");
}else{
$(".space").removeClass("col-md-6").addClass("col-md-4 col-md-push-2");
}
});
});
</script>
Related
I have two div and if I resize my page less than 768px then my .tFFiltre div is moving in .tFPopup div..so everything is okay so far but after moving I don't want to make work my js function
for example if you click change background checkbox button you will see background color is chancing but if I move my div in another div than don't change background color..so I mean I don't want to make work js function
$(document).ready(function(){
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
$("body").css("background","red");
} else {
$("body").css("background","white");
}
});
});
$(window).resize(function() {
if ($(window).width() < 768) {
$('.tFFiltre').appendTo('.tFPopup');
} else {
$('.tFFiltre').appendTo('.backFilter');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tFFiltre backFilter">
<h1>Hi this is my filter title</h1>
<p>and this is my article for filter</p>
<span>and I have some elements</span>
<button>html button</button>
<pre>code bla bla </pre>
<xmp>
<html>
<head></head>
<body></body>
</html>
</xmp>
<input type="checkbox" id="checkbox"> <label for="checkbox">change background
</div>
<div class="tFPopup">
<h3>.tFFiltre div will be moved here </h3>
</div>
$(document).ready(function(){
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
$("body").css("background","red");
} else {
$("body").css("background","white");
}
});
});
$(window).resize(function() {
if ($(window).width() < 768) {
$('#checkbox').off();
$($('.tFFiltre')).appendTo('.tFPopup');
} else {
$('#checkbox').off();
$($('.tFFiltre')).appendTo('.backFilter');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tFFiltre backFilter">
<h1>Hi this is my filter title</h1>
<p>and this is my article for filter</p>
<span>and I have some elements</span>
<button>html button</button>
<pre>code bla bla </pre>
<xmp>
<html>
<head></head>
<body></body>
</html>
</xmp>
<input type="checkbox" id="checkbox"> <label for="checkbox">change background
</div>
<div class="tFPopup">
<h3>.tFFiltre div will be moved here </h3>
</div>
Please check the code
I have get the whole element and then appendto required position
Thanks
I am trying to show a <div> when a certain radio button is selected by the user.
I found some nice code form http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php and I adapted it for myself like this:
With the CSS & script:
<style type="text/css">
.box{padding: 2px;display: none;margin-top: 2px;border: 0px solid #000;}
.red{ }
.green{ }
.blue{ }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if($(this).attr("value")=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if($(this).attr("value")=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
});
});
</script>
Then I got this to remember the selection:
if (!empty($_REQUEST['object'])) { $object = $_REQUEST['object']; }
Add the radio selection in the form that remembers the selection if the form needs to be reloaded:
<input tabindex="1" type="radio" name="object" <?php if (isset($object) && $object=="Tax representation") echo "checked";?> value="Tax representation">Tax representation
<input tabindex="2" type="radio" name="object" <?php if (isset($object) && $object=="VAT recovery") echo "checked";?> value="VAT recovery">VAT recovery
<input tabindex="3" type="radio" name="object" <?php if (isset($object) && $object=="Other") echo "checked";?> value="Other">Other
Followed with the <div> to be shown or hidden:
<div class="red box">text 1</div>
<div class="green box">text 2</div>
<div class="blue box">text 3</div>
Now my problem is that when the form is reloaded, the radio selection is memorized, but the corresponding <div> does not show.
I believe there may be a way to change the script from "click" to "selected" or something like that. Would you help?
This is similar to previous answers, extracting the behavior into a function so that you can run it on page load and in an event:
function showBoxes(value) {
if(value=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if(value=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if(value=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
}
$(document).ready(function(){
showBoxes($("input[type='radio']:checked").attr("value"));
$('input[type="radio"]').click(function(){
showBoxes($(this).attr("value"));
});
});
jsFiddle
Use change instead of click
$('input[type="radio"]').change(function(){
Then, move your function to a variable and call it when the page loads.
The final code should look something like this.
$(document).ready(function(){
var updateDivs = function(){
if($(this).attr("value")=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if($(this).attr("value")=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if($(this).attr("value")=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
}
$('input[type="radio"]').click(updateCheckbox);
$.proxy(updateDivs, $('input[type="radio"]'))
});
Add this line after your $('input[type="radio"]').click(function(){ code and inside the document.ready block
$('input[type="radio"]:checked').trigger('click');
Your current logic will work only when the radio buttons are clicked. So let's trigger the click event of the checked radio button when the page reloads. Which inturn will run your logic and toggle the divs accordingly.
I have this code ...
<div class="btn1">Button</div>
<div class="text1">Some text</div>
...
$(document).ready(function(){
$(".btn1").click(function(){
$(".text1").toggle();
});
});
<div class="block2">Some text 2</div>
I want to hide ".block2" when toggle function show ".text1" and show ".block2" when ".text1" is hidden. How can I do that? I hope my question is clear. Thanks for answers.
1) see this http://jsfiddle.net/a6kqvLj8/
Just make the second block diaplay:none, and do the same operations
on it
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
$(".block2").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2" style='display:none;'>Some text 2</div>
2) Or if you want the both blocks to be visible at first, and the
start toggling on click, you can do this:
http://jsfiddle.net/a6kqvLj8/1/
$(document).ready(function() {
$(".btn1").click(function() {
$(".text1").toggle();
if ($(".text1").css('display') == 'none') {
$(".block2").css('display', 'block');
} else {
$(".block2").css('display', 'none');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn1">Button</div>
<div class="text1">Some text</div>
<div class="block2">Some text 2</div>
I got class required on div tag, and I want to remove it change function of text field, but I can't get to that div level, please help me to reach this.parent.parent.closest('div')
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange(removeRequired(this, this.parent.parent.closest('div')))/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
It seems that what you want is to add/remove the required class based on whether the input is empty or not.
$('.required').on('change', 'input', function(event) {
// add or remove required class
$(event.delegateTarget)
.toggleClass('required', this.value.length === 0);
});
It will work with the following HTML:
<div class='required'>
<div>
<div>
<input type='text' value='123'/>
</div>
</div>
</div>
It sets up event delegation on the outermost <div> elements and then sets or removes the required class based on the input value.
Demo
You dont have to mess up with javascript and jquery. You can bind the change event with jquery like this,
$(document).ready(function () {
$("input[type='text'] ").change(function () {
$(this).closest(".required").removeClass("required");
});
});
try this
$("input[type=text]").closest('div.required').removeClass("required");
onchange function be
$("input[type='text']").change(function(){
$(this).closest("div.required").removeClass("required");
});
or
$("input[type='text']").change(function(){
$(this).parents("div.required").removeClass("required");
});
Why not easily working with id?
<div id="input-wrapper" class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired(this, $('#input-wrapper'))"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
By the way, if you want to reach the div class='required' with parent, you need 3 levels! Althougth the use of closest() is by far a better answer.
You can try:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired.call(this)"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(){
$(this).parent().parent().parent().removeClass('required');
}
</script>
The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)