A bit of JQuery taken from http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/ which should give a nice old-twitter style notification.
How do I edit the code below to stop the div hiding on a mouseover?
UPDATE: I still want the div to slideup after the mouseover has finished.
$(function () {
var $alert = $('#alert');
if($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 5000);
$alert.animate({height: $alert.css('line-height') || '50px'}, 200).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({height: '0'}, 200);
});
}
});
If I'm understanding correctly (which I'm probably not), you want something like this:
var alerttimer, alertBox = $('#alert');
function resetTimeout() {
if (alerttimer) {
clearTimeout(alerttimer);
}
alerttimer = setTimeout(function() {
alertBox.trigger('click');
}, 5000);
}
$(function () {
if(alertBox.length) {
resetTimeout();
alertBox.animate({ height: alertBox.css('line-height') || '50px' }, 200).click(function () {
window.clearTimeout(alerttimer);
alertBox.animate({ height: '0px' }, 200);
}).mouseover(function () {
clearTimeout(alerttimer);
}).mouseout(function () {
resetTimeout();
});
}
});
It's important to note that the above is very much untested.
Related
I am trying to add a delay to the toggleclass 'slidein' however it doesn't seem to be adding to it.
here is my fiddle
and here is my code;
$(function () {
$(".expand").on("click", function () {
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
$(this).next().children('#slidinghold').delay(5000).toggleClass('slidein');
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
Try this:
$(this).next().children('#slidinghold').delay(5000).queue(function(){
$(this).toggleClass("slidein").dequeue();
});
Fiddle
use setTimeout instead of delay. Sample :
$(".expand").on("click", function () {
$(".expand").next().children('#slidinghold').removeClass('active-expand');
$(this).next().children('#slidinghold').addClass('active-expand');
setTimeout(function () {
$('.active-expand').next().children('#slidinghold').toggleClass('slidein');
}, 500);
});
demo https://jsfiddle.net/anthonypagaycarbon/v1geqa8e/
as said by jQuery's doc
.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases
So you can use window.setTimeout to achieve this:
$(function() {
function toggleClassDelay(element,class,delay) {
window.setTimeout(function() {
element.toggleClass(class)
},delay);
}
$(".expand").on("click", function() {
var el;
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
el = $(this).next().children('#slidinghold');
toggleClassDelay(el,"slidein",5000)
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
JSFiddle link: http://jsfiddle.net/lustre/awpnd6L1/1/
Was wondering if there was a way I could create a function in JavaScript, so that I'm not having to copy the mouseenter code each time I need a "More Info" tooltip. Is this even possible?
Below is the JavaScript I'm looking to condense into a function so that I don't have to copy it several times.
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
jQuery('.bspaMoreInfoText').show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
Hope this makes sense x3
You can create custom jQuery plugin for this job. This is the very natural approach in term of handling repetitive code.
$.fn.moreInfo = function() {
return this.each(function() {
var $text = $(this).next();
$(this).mouseenter(function () {
clearTimeout($text.data('timeoutId'));
$text.show(200);
})
.mouseleave(function () {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
$text.mouseenter(function () {
clearTimeout($text.data('timeoutId'));
}).mouseleave(function() {
$text.data('timeoutId', setTimeout(function () {
$text.hide(200);
}, 650));
});
});
};
jQuery(document).ready(function () {
$(".bspaMoreInfo").moreInfo();
});
Demo: http://jsfiddle.net/awpnd6L1/3/
DEMO
jQuery(document).ready(function(){
jQuery(".bspaMoreInfo").mouseenter(function(){
clearTimeout($(this).next().data('timeoutId'));
$('.bspaMoreInfoText').hide(200);
$(this).next().show(200);
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
$(this).next().hide(200);
}, 650);
$(this).next().data('timeoutId', timeoutId);
});
jQuery(".bspaMoreInfoText").mouseenter(function(){
clearTimeout(jQuery('.bspaMoreInfoText').data('timeoutId'));
}).mouseleave(function(){
var timeoutId = setTimeout(function(){
jQuery('.bspaMoreInfoText').hide(200);
}, 650);
jQuery('.bspaMoreInfoText').data('timeoutId', timeoutId);
});
});
Something like this ?
function MouseEnter(ctrl) {
clearTimeout($(ctrl).data('timeoutId'));
$(ctrl).show(200);
}
function MouseLeave(ctrl) {
var timeoutId = setTimeout(function(){
$(ctrl).hide(200);
}, 650);
$(ctrl).data('timeoutId', timeoutId);
}
$(".bspaMoreInfo").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave(this);
}));
$(".bspaMoreInfoText").mouseenter(function () {
MouseEnter($(".bspaMoreInfoText"));
}).mouseleave(function() {
MouseLeave($(".bspaMoreInfoText"));
}));
I'm trying set a timeout on a fading element so it has a little cushion before it fades in/out again. For some reason, my setTimeout function doesn't appear to be working. I've had this trouble before and i'd really like to know why.
This is what i'm using currently:
var button_timer;
if (fade_in_but_hover != "none" && fade_out_but_hover != "none") {
$(".first-level-items > .li").hover(function() {
clearTimeout(button_timer);
$(this).find("a").first().animate({ color: font_color_hover }, fade_in_but_hover);
}).mouseleave(function() {
button_timer = setTimeout(function() {
$(this).find("a").first().animate({ color: font_color }, fade_out_but_hover);
}, 1000);
});
}
You need to scope this
}).mouseleave(function () {
var $this = $(this);//here
setTimeout(function () {
//use $this here
$this.find("a").first().animate({
color: font_color
}, fade_out_but_hover);
}, 1000);
});
I'm new to jQuery and I need a bit of help. I'm using this jQuery script as a testimonial rotator and it works like a charm but I just need to make one small tweak. I need it to be able to pause on hover and then restart when the mouse leaves the div. How can I do this?
This is the script I'm using:
function fadeMyContent() {
$(".testimonial:first").fadeIn(1000).delay(3000).fadeOut(1000,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Here is a JSFiddle.
There is a plugin that will provide all the functionality you need and be more reliable called jQuery Cycle 2.
It provides a 'pause-on-hover' option when initialising it.
change the definition of fadeMyContent (also called as destroying function) on hovering on ul#testimonial-rotator and on hover-out change it to old definition again. I have used setTimeout in place of delay because delay is not cancellable.
$(document).ready(function () {
var fadeMyContent;
var t
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
var fadeMyContentDummy = function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent()
});
}
fadeMyContent();
$('#testimonial-rotator').hover(function (e)
{
window.clearTimeout(t)
$('.rotate:first').clearQueue()
fadeMyContent = function () {
return false;
}
},
function (e)
{
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
fadeMyContentDummy()
})
});
DEMO
I am trying to have an animation run only when the mouse is over an object. I can get one iteration of the animation and then have it set back to normal on mouse out. But I'd like the animation to loop on mouseover. How would I do it, using setInterval? I'm a little stuck.
It could be done like this:
$.fn.loopingAnimation = function(props, dur, eas)
{
if (this.data('loop') == true)
{
this.animate( props, dur, eas, function() {
if( $(this).data('loop') == true ) $(this).loopingAnimation(props, dur, eas);
});
}
return this; // Don't break the chain
}
Now, you can do this:
$("div.animate").hover(function(){
$(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300);
}, function(){
$(this).data('loop', false);
// Now our animation will stop after fully completing its last cycle
});
If you wanted the animation immediately stop, you could change the hoverOut line to read:
$(this).data('loop', false).stop();
setInterval returns an id that can be passed to clearInterval to disable the timer.
You can write the following:
var timerId;
$(something).hover(
function() {
timerId = setInterval(function() { ... }, 100);
},
function() { clearInterval(timerId); }
);
I needed this to work for more then one object on the page so I modified a little Cletus's code :
var over = false;
$(function() {
$("#hovered-item").hover(function() {
$(this).css("position", "relative");
over = true;
swinger = this;
grow_anim();
}, function() {
over = false;
});
});
function grow_anim() {
if (over) {
$(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim);
}
}
function shrink_anim() {
$(swinger).animate({left: "0"}, 200, 'linear', grow_anim);
}
Consider:
<div id="anim">This is a test</div>
with:
#anim { padding: 15px; background: yellow; }
and:
var over = false;
$(function() {
$("#anim").hover(function() {
over = true;
grow_anim();
}, function() {
over = false;
});
});
function grow_anim() {
if (over) {
$("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim);
}
}
function shrink_anim() {
$("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim);
}
You can achieve this using timers too.