Cancel setTimeout if mouse is over div - javascript

I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)
This is the jquery code I wrote:
$(document).ready(function() {
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}
The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?

First, put B inside of A:
<div class="a">
AAA
<div class="b">
BBB
</div>
</div>
Then, abandon your javascript and make life easier with plain old css:
.b
{
display: none;
}
.a:hover .b
{
display: block;
}
Edit - Here's a live example using the CSS technique: http://jsfiddle.net/gilly3/sBwTa/1/
Edit - If you must use the JavaScript, just add clearTimeout(time) to show(). But, let's also simplify your code:
$(function()
{
var time = 0;
function show()
{
clearTimeout(time);
$("BBB").show(); // Existing jQuery that does $().css("display","block")
}
function hide()
{
time = setTimeout(function()
{
$("BBB").hide();
}, 200);
}
$("AAA,BBB").mouseenter(show).mouseleave(hide);
});

There are a few small problems with your code. The one which is biting your right now is that you aren't clearing BBB's timeout when you enter AAA. You can fix this by adding a clearTimeout to AAA's mouseover handler.
Secondly, it's safest to clear this kind of timeout before you set it each time, so that you don't have your timeout tracking overwritten if something unexpected happens. (It's always safe to clear a timeout, even if it's invalid or has already occurred.)
Lastly, though this is most likely only a problem in your example code, you're leaking time into the global object. ;-)
Try this instead:
$(document).ready(function() {
var time;
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
clearTimeout(time);
show();
});
$(this).mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}

Here's a script that works with meaningful function names that should make it easy to see what's going on. You have to cancel the hiding from mouseenter on both divs.
$(document).ready(function() {
var timerId, delay = 300;
var a = $("#A"),
b = $("#B");
function stopHide() {
clearTimeout(timerId);
}
function showTip() {
b.show();
}
function startHide() {
timerId = setTimeout(function() {
b.hide();
}, delay);
}
a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
b.mouseenter(stopHide).mouseleave(startHide);
});
div {
border: 2px dashed firebrick;
float: left;
font-size: 50pt;
font-weight: bold;
padding: 5px;
margin: 5px;
}
#B {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>
Previously at http://jsfiddle.net/92jbK/1/

You code is wrong :)
Try this:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#AAA, #BBB {
width:100px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="BBB">
BBB
</div>
<div id="AAA">
AAA
</div>
<script src="http://www.google.com/jsapi"></script>
<script>
//VISIBLE
function hide() {
$("#BBB").css({'display':'none'});
}
function show() {
$("#BBB").css({'display':'block'});
}
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
// NOT VISIBLE
// function hide() {
// $("#BBB").css({'display':'none'});
// }
// function show() {
// $("#BBB").css({'display':'block'});
// }
$(document).ready(function() {
var time;
$("#AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("#BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("#BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
});
</script>
</body>
</html>

one alternative is to use jquery's tooltip http://flowplayer.org/tools/tooltip/index.html
then you can just do for example:
$('#A').live(function() {
$(this).tooltip({
relative: true,
position: 'top center',
delay: 200,
effect: !$.browser.msie ? 'fade' : 'toggle',
fadeInSpeed: 100,
fadeOutSpeed: 50,
predelay: 500
});
});
and you just make div b of class tooltip

Is time declared outside all of this?
It is not in the same scope in the two functions you have it in above, so is not the same variable so the clearTimeout() call has no effect.
Declare it outside both with var time;, so that they refer to the same variable.

Related

Text animation: each and setTimeOut

I'm trying to animate some text. Different divs are displayed and hid one after another, so that it looks like a word is reduced to just a letter, and then completed again.
I need some sort of delay between the .each() cycles. I tried to use the setTimeOut() function, but I still see all the divs appearing and then disappearing together, instead of one by one.
function fadeInOut(element) {
$(element).fadeIn("slow", function() {
$(this).fadeOut("slow");
})
}
function displayStepWords() {
$('.stepWord').each(function(i) {
setTimeout(fadeInOut(this), 5000 * i);
})
}
displayStepWords();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stepWord">BYE</div>
<div class="stepWord">BY</div>
<div class="stepWord">B</div>
<div class="stepWord">BY</div>
<div class="stepWord">BYE</div>
Unclear exactly what you are aiming at, but something like:
function fadeInOut(element) {
$(element).fadeIn("slow", function() {
$(this).fadeOut("slow");
})
}
function displayStepWords() {
$('.stepWord').each(function(i) {
var me = $(this);
setTimeout( function(){fadeInOut(me);}, 1000 * i );
})
}
displayStepWords();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stepWord">BYE</div>
<div class="stepWord">BY</div>
<div class="stepWord">B</div>
<div class="stepWord">BY</div>
<div class="stepWord">BYE</div>
The window.setTimeout expects a function for the first parameter not a function call.
setTimeout(function, milliseconds, param1, param2, ...)
If you want to show the divs one after each other in one place - you have to add some css.
<style>
.step-word {
position: absolute;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="step-word">BYE</div>
<div class="step-word">BY</div>
<div class="step-word">B</div>
<div class="step-word">BY</div>
<div class="step-word">BYE</div>
</div>
<script>
var delay = 500,
$stepWords = $('.wrapper .step-word');
function fadeInOut($element) {
$element.fadeIn("slow", function () {
$element.fadeOut("slow");
});
}
$stepWords.each(function(i, elem) {
setTimeout(function () {
fadeInOut($stepWords.eq(i));
}, delay * i);
});
</script>
Try this one:
function displayStepWords() {
$('.stepWord').each(function(i) {
var $el = $(this);
setTimeout(function(){fadeInOut($el)}, 300 * i);
})
}

disable <a> tag for a period of time

To simplify my problem, I made a jsfiddle
When I click on "Click me" it displays a box, but when i click on it twice
at the same time, it displays two boxes at the same time, and for my case it should not be possible. The second box should be able to be displayed only if the first box is completly displayed and the user click again on 'Click me'.
How can I achieve that ?
$('#clickme').click(function() {
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000);
});
#clickme {
cursor: pointer
}
.newDiv {
height: 40px;
width: 40px;
background-color: red;
margin: 5px;
display: none;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<a id="clickme">Click me</a>
<div id="container"></div>
A simple solution is to use a flag, to check the state whether action can be performed.
Here complete callback of .show() is used to reset the flag once effect is complete.
var disable = false;
$('#clickme').click(function() {
var elem = $(this);
if (disable == false) {
disable = !disable;
elem.toggleClass('none', disable);
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000, function() {
disable = !disable;
elem.toggleClass('none', disable);
});
}
});
#clickme {
cursor: pointer
}
#clickme.none {
cursor: none
}
.newDiv {
height: 40px;
width: 40px;
background-color: red;
margin: 5px;
display: none;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<a id="clickme">Click me</a>
<div id="container"></div>
I think the cleanest solution is to bind and unbind your click handler. No need to use a flag or a timeout.
function clickHandler() {
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
// Unbind click handler until animation is completed
$("#clickme").off("click", clickHandler);
// Begin animation
$div.show('clip', 3000, function() {
// Animation completed. Bind click handler.
$("#clickme").on("click", clickHandler);
});
}
// Initial bind of click handler
$("#clickme").on("click", clickHandler);
Here's a working fiddle.
You can disable the button for the time when the box is being drawn. Like this:
$('#clickme').click(function() {
disabling the button for 3000 sec as the box takes 3000 sec to get rendered.
setTimeout(function(){
$(this).attr('disabled','disable');
},3000);
$(this).removeAttr('disabled');
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000);
});
So you need to stop execution if the box is still being animated.
I am using the complete argument of jQuery.show method.
var inAnimation = false;
$('#clickme').click(function() {
if(inAnimation)
return;
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
inAnimation = true;
$div.show('clip', 3000, function() {inAnimation = false;});
});
i always use callback after end of animation:
let open = true;
$('#clickme').click(function(){
if ( open ) {
open = false;
$div = $('<div>',{"class" : "newDiv"});
$('#container').append($div);
$div.show('clip',3000, function(){
open = true;
});
}
});
fiddle
If you want a simple solution for your problem you can place an if statement before the assignment of the $div variable:
$('#clickme').click(function() {
if($('.newDiv').length == 0){
$div = $('<div>', {
"class": "newDiv"
});
$('#container').append($div);
$div.show('clip', 3000);
}
});
$('.newDiv').click(function() {
$('.newDiv').destroy();
}

How to handle class (made by jQuery) with jQuery?

I'm new in jQuery. This time I tried to make a double-stage effect using jQuery.
For example, when you click the word, its color changed to red at first. And when you clicked it again, its color changed to blue.
So I used following code, but it doesn't work well.
$(document).ready(function () {
$("p#origin").click(function () {
$(this).css("color", "red");
$(this).addClass("clicked");
});
$("p.clicked").click(function () {
$(this).css("color", "blue");
});
});
You can see the result at here
I also tried this.
var toggle = 0;
console.log("toggle", toggle);
$(document).ready(function () {
if (toggle == 0) {
$("p#origin").click(function () {
$(this).css("color", "red");
toggle = 1;
console.log("toggle:", toggle);
});
} else {
$("p#origin").click(function () {
$(this).css("color", "blue");
toggle = 0;
console.log("toggle", toggle);
});
}
});
Above code result can be seen here. The variable toggle is set to 1, but it doesn't work.
Is my question delivered well...? I'm new here, so I don't know how the javascript code loaded. (I also need help to study about this...)
I hope any solution to make a double stage effect. (Could anyone fix my above 2 codes to work well?)
The problem is you are dealing with dynamic selectors, ie you want the events handled to change based on dynamic evaluation of the selector, in that case you need to use event delegation.
But in this case you don't need that, assuming at first the p#origin does not have blue color you can do something like
$(document).ready(function() {
$("p#origin").click(function() {
$(this).toggleClass("clicked").toggleClass('unclicked', !$(this).hasClass('clicked'));
});
});
#origin.unclicked {
color: blue;
}
#origin.clicked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="origin">origin</p>
But if p#origin has blue color before the first click, then you can simplify it to
$(document).ready(function() {
$("p#origin").click(function() {
$(this).toggleClass("clicked");
});
});
#origin {
color: blue;
}
#origin.clicked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="origin">origin</p>
Just an idea instead of using .class:
Loop an array of styles (you can use as many styles/steps you want)
var c = ["#000", "#f00", "blue"];
$("#origin").click(function(){
c.push(c.shift()); // Put first array color to last place
$(this).css({color: c[0] }); // Always use the 0 key
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="origin">Click to Toggle Color</p>
If you want to change more than just a color:
var c = [
{color:"#000", background:"#ffe", fontSize:16},
{color:"fuchsia", background:"yellow", fontSize:24},
{color:"#1CEA6E", background:"#C0FFEE", fontSize:36}
];
$("#origin").click(function(){
c.push(c.shift());
$(this).css(c[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="origin">Click to loop styles</p>
I just modified some JavaScript code from you, simply.
var $origin;
$origin = $('#origin');
return $origin.on('click', function() {
if ($origin.hasClass('red')) {
$origin.css('color', 'yellow');
$origin.addClass('yellow');
return $origin.removeClass('red');
} else {
$origin.css('color', 'red');
$origin.addClass('red');
return $origin.removeClass('yellow');
}
});

what is the best way to return the orginal style when mouseleave jquery?

I use mouseenter to input a new html. I face a challenge that I need to return the original style when mouse leave? When mouseleave, I need to remove the new html and use the original html What is the best way to do that?
var eye_disease1 = $('#eye_disease1');
eye_disease1.mouseenter(function () {
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
// what should I put here to return the original
});
Get the original HTML of eye_disease1 before changing and after mouse leave update HTML.
var eye_disease1 = $('#eye_disease1'),
diseaseHtml = '';
eye_disease1.mouseenter(function () {
if (!diseaseHtml) {
diseaseHtml = eye_disease1.html();
}
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
diseaseHtml = '';
eye_disease1.html(diseaseHtml);
});
You can all use the addClass
`$("selector").mouseenter(function(){
$(this).addClass("active");
})
$("selector").mouseleave(function(){
$(this).removeClass("active");
})`
var eye_disease1=$('#eye_disease1');
var eye_disease1_html;
eye_disease1.hover(
function() {
eye_disease_1_html = eye_disease1.html();
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>')
.fadeOut(0)
.css('border','none')
.fadeIn(400);
}, function() {
eye_disease1.find('span.show_li, span.show_li_2')
.fadeOut(400)
.delay(400)
.html(eye_disease1_html)
.fadeIn(0);
}
);
But yeah I would prefer to have all the content inside (original, and the hovered content) there the whole time.
HTML:
<div id="eye_disease1">
<div class="original-content">
Original Content
</div>
<div class="hovered-content">
<span class="show_li">symptoms</span>
<span class="show_li_2">diseases</span>
</div>
</div>
CSS:
.hovered-content {
display: none;
}
.hovered {
border: none;
}
JS:
$('#eye_disease1').hover(
function() {
$(this).addClass("hovered");
$(this).find(".original-content").fadeOut();
$(this).find(".hovered-content").fadeIn();
}, function() {
$(this).removeClass("hovered");
$(this).find(".hovered-content").fadeOut();
$(this).find(".original-content").fadeIn();
}
);
You can see it here: https://jsfiddle.net/waga7Lu1/3/
The transition effect is a bit clumsy but I'm not really sure what you're after.

Jquery, changing color on hover

This has been driving me crazy for a while, I cannot figure out what I am doing wrong. I am trying to make a 4x4 grid and change the color of each square when I hover my mouse over (the color stays after the mouse leaves) but the changing color part is not working.
Here is what I have so far:
Changing color on hover:
This is the part where I am stuck
$('.square').hover(function () {
$(this).addClass('hover');
});
You can remove your jquery code for adding class hover and just make this css change in the file
.square:hover {
background-color: red;
}
simply fixes your problem in pure Css.
Adding JsFiddle for this
http://jsfiddle.net/jjeswin/nb3dB/1/
You need to first call makeGrid(4); and then bind the event.
also to remove class you need to modify hover function to use mouseenter and mouseleave function:
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
},function() {
$(this).removeClass('hover');
});
Working Demo
Update: for keeping the color even after mouseleave:
makeGrid(4);
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
});
Demo with only mouseenter
I have updated the fiddle code http://jsfiddle.net/ZfKM8/5/
In your javascript, i've removed the hover function.
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
});
in your css, instead of .hover change it to .square:hover
.square:hover {
background-color: red;
}
$('#container').on("mouseenter", '.square', function() {
$(this).addClass('hover');
});
$('#container').on("mouseleave", '.square', function() {
$(this).removeClass('hover');
});
Use event delegation for dynamically created elements.
Demo:
http://jsfiddle.net/m6Bnz/1/
Use event delegation for added dom elements dynamically . it is the best way to do
$('#container').on('mouseenter' , ".square" , function() {
$(this).addClass('hover');
});
/* $('#container').on('mouseleave' , ".square" , function() {
$(this).removeClass('hover');
}); */
DEMO
here you go: http://jsfiddle.net/ZfKM8/3/
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
$(document).on('mouseenter','.square',function() {
$(this).addClass('hover');
});
$(document).on('mouseleave','.square',function() {
$(this).removeClass('hover');
});
});
Is there a specific reason why you're not using CSS for this?
.square:hover { color: #superAwesome }
If you want the color to animate (and delay when mousing out) you can use CSS3 transition:
.square { transition: color 1s; }
Try this
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
.hover
{
background:red;
}
</style>
</head>
<body>
<div class="square" style="width:100px;height:100px;border:1px solid"> </div>
<script type="text/javascript">
$('.square').hover(function()
{
$(this).addClass('hover');
});
$('.square').mouseout(function()
{
$(this).removeClass('hover');
});
</script>
</body>
</html>
Since your boxes created dynamically to the DOM, the hover event will not be available for these boxes. In this case, event delegation will help you to attach that event
Try this
OP said the color stays after the mouse leaves
$('#container').on('mouseenter','.square',function() {
$(this).addClass('hover');
});
Make use of .toggleClass():
makeGrid(4);
$('.square').hover(function() {
$(this).toggleClass('hover');
});

Categories

Resources