i am working on developing on an Html page where i have two div. In each div i have one image. I want that each image should be visible for 2 second and after that the second div should get visible. This function should get repeatedly. For this i used following code.
<script type="text/javascript">
$( document ).ready(function() {
$(".logo-outer").show();
setTimeout(function () {
$(".logo-outer").hide();
$(".logo-outernew").hide();
}, 2000);
});
</script>
But the above code is not working and image in not visible or invisible.
you can make use of SetInterval function instead of timeout function
below is example code , it might now working please check proper function . main point is make use of interval function
var myInterval = setInterval(function () {
if($(".logo-outer").is(':visible'))
{
$(".logo-outer").hide();
$(".logo-outernew").show();
}
else
{
$(".logo-outer").show();
$(".logo-outernew").hide();
}
},2000);
if you want to stop
clearInterval(myInterval);
setInterval(function () {
if ($(".logo-outer").css("display") == "none"){
$(".logo-outer").show();
}
else{
$(".logo-outer").hide();
}
}, 2000);
Every 2seconds it runs the functions and if logo outer is not visible it will show it, else if it's visible it will hide it.
I believe that you have also made an error in hiding the second image insted of displaying it (inside setTimeout):
$(".logo-outer").hide();
$(".logo-outernew").hide();
I believe the second one should be $(".logo-outernew").show();?
You can use the modulo (e.g. % sign) operator with a global variable to determine when hide or show your divs.
var count = 0;
$( document ).ready(function() {
$(".logo-outer").show();
setTimeout(function () {
if(count % 2 == 0) {
$(".logo-outer").hide();
$(".logo-outernew").show();
} else {
$(".logo-outer").show();
$(".logo-outernew").hide();
}
count++;
}, 2000);
});
By default hide your 2nd div and inside setTimeout hide your 1st dive and show your second div.
$(".logo-outer").show();
$(".logo-outernew").hide();
setTimeout(function () {
$(".logo-outer").hide();
$(".logo-outernew").show();
}, 2000);
.logo-outer {
background:red;
width: 50vw;
height: 50vw;
}
.logo-outernew {
background:green;
width: 50vw;
height: 50vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-outer">
<h1>1 div</h1>
</div>
<div class="logo-outernew">
<h1>2 div</h1>
</div>
function swapImage() {
$('.img02').fadeOut();
$('.img01').fadeIn();
setTimeout(function () {
$('.img02').fadeIn();
$('.img01').fadeOut();
}, 2000);
setTimeout(function () {
swapImage();
},4000)
}
$(document).ready(function () {
swapImage();
});
.img01,
.img02{
width: 200px;
height: 200px;
position: absolute;
}
.img01{
background: green;
}
.img02{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img01"></div>
<div class="img02" style="display: none;"></div>
Remove the console and un-comment the lines with hide and show function
var time_to_display = 2000;
var img1 = setInterval(function () {
console.log("Img1");
// $(".logo-outer").hide();
// $(".logo-outernew").show();
}, time_to_display * 2);
setTimeout(function(){
var img2 = setInterval(function () {
console.log("Img2");
// $(".logo-outernew").hide();
// $(".logo-outer").show();
}, time_to_display * 2);
},2000);
You can simply change display for one div to none and use the following code it will hide and show
<script>
$(document).ready(function(){
setInterval(function(){
$("div.logo-outer, div.logo-outernew").toggle(1000);
}, 3000)
});
</script>
Related
I am trying to exceute a javascript function after another div that has been popupated by javascript has loaded. The div has been populated first with javascript is '#am-events-booking'. The function i am trying to use is:
$(window).load(function ()
{
var i = setInterval(function ()
{
if ($('#am-events-booking').length)
{
clearInterval(i);
}
}, 1000);
alert('Page is loaded');
});
I always use $(document).ready() to run code after the page has loaded. Not sure what the difference is, but at least then it works.
Furthermore you need to use .text() to get the text inside an element.
Working code snippet:
$(document).ready(function() {
var i = setInterval(function() {
if ($('#am-events-booking').text().length) {
clearInterval(i);
console.log('Text detected!');
} else {
console.log('Waiting...');
}
}, 1000);
console.log('Page is loaded');
});
setTimeout(loadText, 2200);
function loadText() {
$('#am-events-booking').html("<h2>Hello</h2>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="am-events-booking"></div>
$(document).ready(findDiv);
function findDiv() {
if($('#am-events-booking').is(':visible')){ // if the div is visible
alert('Page is loaded');
} else {
console.log("loading...");
setTimeout(findDiv, 50); // wait 50ms,
}
}
$('body').html('<div id="am-events-booking"></div>');
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
you can use is :visible form JQuery to check if div is added or not
I have a bunch of divs like so
<div class="listingImage">
<div style="background-image:url('listings/listing1/1/image8Main.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image2.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image3.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image4.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image5.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image6.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image7.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image9.jpeg')"></div>
</div>
With css:
.listingImage>div: {
position:absolute;
z-index:98;
bottom:0;
right:0;
left:0;
top:0;
background:50% 50%/cover;
}
.listingImage>div.active {
z-index:99;
}
I have a jquery script to cycle through these divs and change the z-index to put one on top of all the rest.
<script>
var timer
$(".listingImage").on("mouseenter", function() {
var element = $(this)
timer = window.setTimeout(function() {
if (element.children(".active").length) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function() {
$(".active", this).removeClass("active")
clearTimeout(timer)
})
</script>
This script will go to next div and stop working. I believe I have two problems. It might have something to do with var element=$(this). Also, my mouseleave is being triggered by changes in z-index. How can I achieve cycling through divs and then returning to normal onmouseleave? Any help is appreciated, thank you.
Task, on mouseenter, start cycle through boxes. On mouseleave, end cycle and restart
https://jsfiddle.net/sy5br7d0/
If you want to cycle through all the div's then u should use timer = window.setInterval rather than using window.setTimeout.
moidified script:
<script>
var timer
$(".listingImage").on("mouseenter", function() {
var element = $(this)
timer = window.setInterval(function() {
if (element.children(".active").length) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function() {
$(".active", this).removeClass("active")
clearTimeout(timer)
})
</script>
User setInterval() instead of setTimeout()
var timer
$(".listingImage").on("mouseenter", function () {
var element = $(this)
timer = window.setInterval(function () {
if (element.children(".active").length>0) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function () {
$(".active", this).removeClass("active")
clearInterval(timer)
})
Fiddle
I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".
Code:
$(".inner_pic").mouseenter(function () {
setTimeout(function () {
alert('testing');
}, 3000);
}).mouseleave(function () {
alert('finish');
});
You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:
$(".inner_pic").mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
alert('testing');
}, 3000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>
You can achieve this by delay option:
Working demo
$('#elem').popover({
trigger: "hover",
delay: {show : 3000, hide : 0} });
Checkout the below code
var myVar;
$( "div#container" )
.mouseover(function() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
})
.mouseout(function() {
clearTimeout(myVar);
});
div {
background: red;
margin: 20px;
height: 100px;
width: 100px;
display:block;
cursor: pointer;
}
div:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
var st;
$(".inner_pic").mouseenter(function(e) {
var that = this;
st = setTimeout(function() {
alert('testing');
}, 3000);
}).mouseleave(function() {
clearTimeout( st );
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
<h3>Picture Here - Hover me</h3>
</div>
Assuming you have a div with id of myelement, you can do this:
var divMouseOver;
$('#myelement').mouseover(function() {
divMouseOver = setTimeout(function() {
alert("3 seconds!"); //change this to your action
}, 3000);
});
$('#myelement').mouseout(function() {
if (divMouseOver) {
clearTimeout(divMouseOver);
}
});
BTW, tere's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.
I'm using Jquery Collision to detect two objects overlapping each other. Here is a JSFiddle of the problem.
(apologies for including jquery collision script in HTML, couldn't find other way)
Click anywhere in the gray container to move the green div over the white div.
HTML Structure:
<div class="container">
<div class="test"></div>
<div class="menu"></div>
</div>
JS:
$(document).ready(function () {
var hit_list;
$(".container").click(function () {
$(".menu").stop().animate({
left: "+=100px"
}, 300, function () {
$(".menu").animate({
left: "0"
}, 800);
});
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
alert("welcome Earthling!");
}
});
});
The problem with my method is that, it doesn't detect collision every time. Even though it passes over the white division fine, the alert isn't displayed everytime.
Am I going wrong anywhere in checking for collision? Is there a better/more efficient method to detect collisions during animation ?
jQuery animate has a step callback (https://api.jquery.com/animate/), it gets executed after each step of the animation.
Use it like this:
$(document).ready(function () {
var hit_list;
$(".container").click(function () {
$(".menu").stop().animate({
left: "+=100px"
}, {
duration: 300,
complete: function () {
$(".menu").animate({
left: "0"
}, 800);
},
step: function(){
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
alert("welcome Earthling!");
}
}
});
});
});
Try this http://jsfiddle.net/aamir/y7PEp/6/
$(document).ready(function () {
var hit_list;
var hits=0;
$(".container").click(function () {
var $this = $(this);
function checkCollision() {
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
hits++;
$(".menu").html(hits+ ' hits');
}
}
$(".menu").stop().animate({
left: "100px"
}, 300, function () {
checkCollision();
$(".menu").animate({
left: "0"
}, 800);
});
});
});
Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?
A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}
just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});
Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO