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
Related
I am new to learning jQuery so I've been stumped with this for a while (and excuse me if my question is very obvious).
When the user loads the site, I want the screen to append square images continuously every 5 seconds, until they click "Click Me!" which stops it. The function runForever which appends the images works on it's own if I add '$' in front of '(function)', but inside my button click function, runForever doesn't run at all. I know it doesn't run because I added an alert statement for when the user loads the page, but the page never gives me this statement. It does, however, give me the alert for when I click 'Click Me!'.
$(document).ready(function() {
(function runForever() {
(".img-box").append("<div class='img-from-other-class'</div>");
setTimeout(runForever, 5000);
});
var clicked = false;
$("button").click(function() {
if (clicked == false) {
alert ("beginning repetition");
runForever();
}
else {
alert ("button clicked");
clicked = true;
return;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h3>jQuery Practice</h3>
</div>
<div class="col-6">
<button class="float-right">
Click Me
</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="img-box">
<div class="img-from-other-class"></div>
</div>
</div>
</div>
</div>
</body>
style css in follow
.img-from-other-class{
width:50px;
height:50px;
background:red;
border-radius:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="stop-btn">STOP</button>
<div class="image-box"></div>
<script>
$(function(){
function run(){
interval = setInterval(function(){
$('.image-box').append('<div class="img-from-other-class"></div>');
}, 5000);
}
run();
// click for stop append
$('.stop-btn').click(function(){
clearInterval(interval);
});
});
</script>
</body>
<html>
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>
I am trying to work out how, when I click on my "left" and "center" containers my "footertext" changes to Red and when I click on any of my containers (left right and center) it goes back to white
My current HTML is this:
<p class="footertext" style="color:red">Designed by Clarke Cribb<br></p>
<div class="container" id= "left" >
<h1 style="color:white"><a>HAIR</a></h1>
</div>
<div class= "container" id= "center">
<h1 style="color:white"><a>BEAUTY<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>BARBERS</a></h1>
</div>
</div>
My Javascript is this:
<script>
$(document).ready(function(){
$("#left").click(function(){
$("footertext").css("color","red");
});
});
</script>
If anyone can help I would appreciate it. Cheers. Clarke
Try the following
<script>
$(document).ready(function(){
$("#left,#center").click(function(){
if($(".footertext").css("color") == 'rgb(255, 0, 0)')
{
$(".footertext").css("color","white");
}
else
{
$(".footertext").css("color","red");
}
});
$("#right").click(function(){
$(".footertext").css("color","white");
});
});
</script>
Hope it helps!
You can toggle classes.
Use the following CSS:
.red {
color: red;
}
And change your js to:
$(function() {
$("#left,#center,#right").click(function(){
$(this).toggleClass('red');
});
});
And then remove the inline styles on the HTML.
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 :)