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.
Related
$(".fsb").on("click", function () {
if ($('.fsb').hasClass('fsbc')) {
$('#sfo p').fadeIn(500);
setTimeout(function () {
$('#sfo p').fadeOut(500);
}, 500);
} else {
$('#sfof p').fadeIn(500);
setTimeout(function () {
$('#sfof p').fadeOut(500);
}, 500);
}
});
After clicking many times on the button(fast), it will repeat hiding and unhiding that much times. I want to disable that but have no ideas.(sorry, I'm new to this).
jQuery allows to use .fadeIn() and .fadeOut() in chain without setTimeout().
To remove all queued animation place .stop(true) before them.
Inside the event handler, you can use $(this) to work on the clicked element.
$(document).ready(function() {
$(".fsb").on("click", function() {
if ($(this).hasClass('fsbc')) {
$('#sfo p').stop(true).fadeIn(500).fadeOut(500);
} else {
$('#sfof p').stop(true).fadeIn(500).fadeOut(500);
}
});
});
.hide-p p {
display: none;
}
<button class="fsb fsbc">Click SFO</button>
<button class="fsb">Click SFOF</button>
<div id="sfo" class="hide-p">
<p>SFO</p>
</div>
<div id="sfof" class="hide-p">
<p>SFOF</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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>
I have some code that shows a div with a message in it when button is clicked. I want the div to disappear after a few seconds.
I have tried to achieve this adding $(this).delay().hide(500); in the .notify function but it doesn't work.
$.fn.notify = function(settings_overwrite) {
settings = {
placement: "top",
default_class: ".message",
delay: 0
};
$.extend(settings, settings_overwrite);
$(settings.default_class).each(function() { $(this).hide(); });
$(this).show().css(settings.placement, -$(this).outerHeight());
obj = $(this);
if (settings.placement == "bottom") {
setTimeout(function() { obj.animate({ bottom: "0" }, 500) }, settings.delay);
}
else {
setTimeout(function() { obj.animate({ top: "0" }, 500) }, settings.delay);
}
}
/** begin notification alerts
-------------------------------------**/
$(document).ready(function($) {
$('.message').on('click', (function() {
$(this).fadeTo('slow', 0, function() {
$(this).slideUp("slow", function() {
$(this).remove();
});
});
}));
});
$(document).ready(function() {
if (document.location.href.indexOf('#notify_success') > -1) {
$("#notify_autopop").notify({
delay: 500
});
}
});
You can use setTimeout function
You have to store the divobj in a variable and then use it inside the setTimeout function
$('div').click(function(){
//show the message
var divObj = $(this);
setTimeout(function(){
divObj.hide();
},3000);
});
check the fiddle link
https://jsfiddle.net/uujf8hmq/
You can write your code to hide the div in the 2nd argument of show() methos which is a complete callback. You need to hide() the element in this callback. You can put necessary timeout before hide().
You can use CSS3 animation/transition instead of jquery's animation. and you can use setTimeout to fade message after sometime.
See the below code
JS
$.fn.notify = function(message, settings_overwrite){
var settings = {
placement:"top-left",
delay: 2000
};
$.extend(settings, settings_overwrite);
var $this = $(this);
$this.removeClass('bottom-left top-left');
$this.text(message);
$this.addClass(settings.placement + ' display');
$this.on('click', function(){
$this.removeClass('display');
});
setTimeout(function(){
$this.removeClass('display');
}, settings.delay);
}
$(document).ready(function ($) {
$('body').on('click', '.create-message', function(){
$('.message').notify($('#msg').val(), {
placement: $('#pos').val()
});
});
});
HTML
Position :
<select id="pos">
<option value="top-left" selected>Top Left</option>
<option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>
<div class="message"></div>
CSS
.message{
position: fixed;
width: 100px;
height: 50px;
background: green;
color: white;
padding: 3px;
border-radius: 3px;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.message.display {
opacity: 1;
}
.message.top-left {
top: 10px;
right: 10px;
}
.message.bottom-left {
bottom: 10px;
right: 10px;
}
jsfiddle link - http://jsfiddle.net/jigardafda/ac5wyfo9/3/
Usually we do not use $(document).ready(function() {....}(); twice on a single page.
Try writing code to hide the div inside the same $(document).ready(function() {.....}() after the .show() function.
You can use either .hide() or setTimeout() functions to hide the div.
i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).
$(document).ready(function() {
/*$(".bulletProj").mouseenter(function () {
console.log("You're Over!");
$(".caption").animate(
{top: "0px"},
300, function() {
console.log("i slided");
});
});
$(".bulletProj").mouseleave(function() {
$(".caption").animate(
{top: "-200px"},
300, function() {
console.log("i left");
});
});*/
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").toggle();
});
});
Part of the code is commented since I tried more ways.
What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering.
Anyone has an idea?
Thanks very much.
try this:
$(document).ready(function() {
$(".bulletProj,.caption").mouseenter(function() {
$(".caption").toggle();
}).mouseleave(function () {
$(".caption").hide();
});
});
working fiddle here: http://jsfiddle.net/r2y8J/4/
I hope it helps.
You can easily use
.caption{pointer-events:none}
http://jsfiddle.net/r2y8J/5/
Try this.
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
stopImmediatePropagation();
$(".caption").toggle();
});
I have faced a similar problem, in my case i have used css: opacity like below to stop flickering
css:
.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}
JQuery:
$(".caption").mouseenter(function(){
$(this).css('opacity','1');
})
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").css('opacity','1');
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").css('opacity','0');
});
Working Fiddle
var caption = $(".caption");
$(".bulletWrapper").hover(function(){
console.log("mous is over");
caption.toggle();
}, function(){
console.log("mous leaves");
caption.toggle();
});
or
$(".bulletWrapper").bind("mouseenter mouseleave", function(){
$(".caption").toggle();
});
Hope you could check my code. Just want to animate. Toggle the top position of div tag with 'accordionHeader' class.
<script type="text/javascript">
$(document).ready(function() {
$(".accordionHeader").toggle(function() {
$(".accordionHeader").animate({"top": "0 144px"}, 500);
function(){
$(".accordionHeader").animate({"top": "144px 0"}, 500);
);
});
</script>
Thank you so much.
you mean:
$(document).ready(function(){
$(".accordionHeader").toggle(
function(){
$(".accordionHeader").animate({"top": "144px"}, 500);
},
function() {
$(".accordionHeader").animate({"top": "-144px"}, 500);
});
});
As an alternative, since jQuery.toggle() is deprecated, you could also do:
$(".accordionHeader").on("click", function() {
var clicked = $(this).data('clicked');
if (clicked) {
$(".accordionHeader").animate({"top": "144px"}, 500);
}
else {
$(".accordionHeader").animate({"top": "-144px"}, 500);
}
$(this).data("clicked", !clicked);
});
you can try this on click event
$('.accordionHeader').animate({ position: 'relative', top: '144px' }, 500);