I would like pause on hover when the mouse hovers over the fadelinks div for this script:
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo
('.fadelinks');}, 5000);
});
The html is along the lines of:
<div class="fadelinks">
<div>...</div>
<div>...</div>
</div>
I've tried a few things relating to interval to try and cram pause on hover functionality in there, but with my extremely limited jquery knowledge, everything I've tried breaks the script, leaving it stuck on the last slide or the first slide. Would just like this simple script to pause on mouse-hover and start up again on mouse-exit.
Here's a JSFiddle of the script in its natural state.
Try using .hover() , declaring variable to reference setInterval , using a function to call setInterval
$(function(){
// define `_interval` variable
var _interval;
// cache `.fadelinks` element
var elem = $(".fadelinks");
elem.find("> :gt(0)").hide();
elem.hover(function() {
// "pause" at `hover` of `.fadelinks`
clearInterval(_interval)
}, function() {
// "reset"
interval()
});
var interval = function() {
_interval = setInterval(function(){
elem.find("> :first-child")
.fadeOut().next().fadeIn().end()
.appendTo(elem);
}, 2000)
};
interval()
});
jsfiddle https://jsfiddle.net/ccmgdfog/4/
In your case, there wasn't the need for jQuery. Only with stopInterval you can control it. Altrough there is the jQuery $.stop() function, we wouldn't get the desired result.
I've changed a bit your code:
$(function(){
$('.fadelinks > :gt(0)').hide();
var interval = setInterval(intervalFunc, 2000);
$('.fadelinks').on('mouseenter',function(){
clearInterval(interval);
});
$('.fadelinks').on('mouseout',function(){
interval = setInterval(intervalFunc, 2000);
});
function intervalFunc(){
$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');
}
});
Related
I have trouble adding a long drop to an item on the page
I have a div and I need to set a long click with time outside auto as a human
I want is like element.click() but with a long timeout... Can you help me with example code?
<div>my div</div>
$('div').mousedown(function(){}
Suppose you want to abort the operation if mousedown event lasts less then, for example, 500 milliseconds? Here it is:
let timerId;
$('div').mousedown(function(){
timerId = setTimeout( function() {alert("hi!"); }, 500);
});
$('div').mouseup( function () {
clearTimeout(timerId);
});
set duration for 1 second 1000ms
var pressTimer;
$("div").mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
}).mouseup(function(){
// clear timeout
clearTimeout(pressTimer);
});
I'm trying to create a script that when I "hover" a specific html element with a specific ID id="HighlightCustomerName", that only after holding that "hover" for 2 or more second, a function will temporally apply a class class="highlighted" to HTML elements with another class class="2Bhighlighted".
See Below, It doesn't work, but I think it illustrates what Im trying to do:
HTML:
<span id="HighlightCustomerName">John Doe</span>
<span class="2Bhighlighted">John Doe</span>
Jquery:
$(document).ajaxSuccess(function () {
$(".#HighlightCustomerName").hover(function () {
$(".2Bhighlighted").delay(2000).addclass("highlighting")
});)
if ( $(".2Bhighlighted").hasClass("highlighting"))
{
$(".2Bhighlighted").addClass("highlighted")
}
else{
$(".highlighted").removeclass("highlighted")
}
});
CSS:
highlighted {bakcground-color: yellow!important;}
Is this a good way to approach this?
Does anyone have a better way of doing this?
Im just about to
You could use css3 transitions and avoid jquery altogether:-
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Answer</title>
<script>
function changeStyle(className, colorName) {
var element = document.getElementsByClassName(className);
element[0].style.transition = "background 1.0s linear 2.0s";
element[0].style.background = colorName;
}
</script>
</head>
<body>
<span id="HighlightCustomerName"
onmouseover="changeStyle('2Bhighlighted','yellow');"
onmouseout="changeStyle('2Bhighlighted','white');">John Doe</span>
<span class="2Bhighlighted">John Doe</span>
</body>
</html>
var highlightTimeout;
$("#HighlightCustomerName").hover(function () {
highlightTimeout=setTimeout(function(){
$(".2Bhighlighted").addclass("highlighting");
}, 2000);
}, function(){
$(".highlighted").removeclass("highlighted"); // no point checking, just remove it
clearTimeout(highlightTimeout); // this prevents it from happening
});
Also note your selector .#HighlightCustomerName was wrong
var element = $('#hoverMe');
hoverChange(element, function() {
element.addClass('red');
});
function hoverChange(element, fn) {
var timer = null;
element.mouseenter(function() {
timer = setTimeout(function() {
fn();
}, 2000)
});
element.mouseout(function() {
clearTimeout(timer);
});
}
Try it here:
http://jsfiddle.net/GwADf/
You need to set and clear a timer to make this work:
When you start hover, set a timer for 2 seconds.
When you stop hovering, clear any timer that is currently running.
If 2 seconds passes without stop hovering, the timer will fire
You can then add the temporary class.
If you want to remove the temporary class after some period of time, do another setTimeout() for removing the temporary class
Here's the code with some explanatory comments:
var timer;
$("#HighlightCustomerName").hover(function () {
// if a timer was already running, clear it so we never have multiple ones
clearTimeout(timer);
// set a timer for 2 seconds
timer = setTimeout(function() {
// we've been hovering for 2 seconds
// add your class here
$(".2Bhighlighted").addClass("highlighting");
// then remove the class 5 seconds later
setTimeout(function() {
$(".2Bhighlighted").removeClass("highlighting");
}, 5000);
}, 2000);
}, function() {
// if we stop hovering, clear the timer
clearTimeout(timer);
});
Your code also had a number of other errors:
You had a selector ".#HighlightCustomerName" which does not look right. You are either querying for a class with a . or an ID with #, but not both.
Your capitalization of addClass() and removeClass() is not correct.
I'm struggling to get an animated gif to run in IE. Works in all other browsers, but in IE it just freezes. I've researched this and looks like a delay using setTimeout might work. Not too sure how I add this to the following function:
<script type="text/javascript">
$(function(){
$('#photo_form').on("submit", function () {
$('#loading').show();
});
});
</script>
The gif is inside a div called 'loading' which is hidden. Would I add the timeout to onClick of the button or within the function itself?
Why does IE make things so difficult!?
Any help with solving this problem would be very helpful.
You mean something like this?
$(function() {
$('#photo_form').on("submit", function () {
setTimeout(function () {
$('#loading').show();
}, 100);
});
});
Try this curde, untested psedo-code:
var startTime;
var thread;
$(function(){
$('#photo_form').on("submit", function () {
$('#loading').show();
startTime = time();
thread = setInterval("showLoadingGif", 1);
});
function showLoadingGif() {
var timeToWait = 5; //change interval as needed
if(timeToWait + startTime <= currentTime) {
//show the gif
clearInterval(thread);
}
}
It's been a long time since I've worked with javascript, so this almost certainly needs adjustment; but the principle is the same: keep calling that function, and let that function decide when to stop being called.
setTimeout() will cause your page to freeze while you wait. setInterval will run your code asyncronously.
what i need is:
click in a button and make the blink event stop.
this is how i'm trying to do:
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blink);
});
and dos not work, what i'm missing ?
Working example
Thanks!
All you need to do is:
blink_flag = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blink_flag);
});
I'd recommend adding:
$('#blinker').show();
After the clearInterval.
You're trying to use clearInterval on the function. That won't work because clearInterval takes the interval's unique ID as a parameter. This parameter would be returned by the setInterval function. If you store the unique ID in a variable and pass that to clearInterval, it'll work fine. Try this:
var blink = function(){
$('#blinker').toggle();
};
var blinkID = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blinkID);
});
MDN
Demo
I think you are using clearInterval() in a wrong way. The parameter for the clearInterval() is an ID created by setInterval() and you are putting the function used by setInterval().
var blink = function(){
$('#blinker').toggle();
};
var glbTimer = setInterval(blink, 800); //declare an ID created by `setInterval()`
$("#stopBlink").click(function(){
clearInterval(glbTimer); //clear the interval of the ID.
});
Check this link for more info.
Maybe you can try with this demo.
You are trying to stop the blink toggle function, while you actually should save the interval in a variable and call clearInterval on that variable, as clearInterval expects an instance of the setInterval object as parameter: https://developer.mozilla.org/en/DOM/window.clearTimeout
http://jsfiddle.net/HTRZk/22/:
var blink = setInterval(function(){
$('#blinker').toggle()}
, 800);
$("#stopBlink").click(function(){
clearInterval(blink);
});
Also, you will need to make sure that when the blinking event is being stopped while the text is hidden you show the item again. Within the .click event add:
$('#blinker').show();
var blink = function(){
$('#blinker').toggle();
};
var bl = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(bl);
});
I am trying to use SetInterval and clearInterval in YUI
The code is written so it will create element every second and on mouse hover of div it should stop creating element.
http://jsbin.com/awadek/5
Please let me know what is wrong with my code?
You should pass an anonymous function as a handler to "mouseover". Otherwise, Javascript will attempt to evaluate and call the return from clearInterval (in this case, an integer!). The following code will work:
YUI().use("console", "console-filters", "substitute", "node-event-simulate",
function(Y) {
console.log("YUI is ready");
var doSomething = function(e) {
Y.one("#seconds").append("<p>I am number four</p>");
};
IntervalId = setInterval(doSomething, 1000);
//Notice the anonymous function below:
Y.one("#clearInt").on('mouseover', function() { clearInterval( IntervalId ) });
});
Here is your JSBin, ftfy. Enjoy!