I would like to give an element a .class when user scrolls a page. And then take it away (.class) when user stops scrolling.
Simply speaking, I want to give font awesome icon class fa-spin only when page is being scrolled, and when scrolling stops, icon stops spinning.
Would be nice to know how to just generally apply css animation when scrolling.
Thanks
You can use https://github.com/ssorallen/jquery-scrollstop
var $el = $('.element');
$(window).on("scrollstart", function() {
$el.addClass('scrolling')
})
$(window).on("scrollstop", function() {
$el.removeClass('scrolling')
})
You can use addClass and removeClass on scroll event as follow.
This will add class when scrolling and remove it after delay of 100 milliseconds.
$(window).scroll(function() {
$('div').addClass('myClass');
setTimeout(function() {
$('div').removeClass('myClass');
}, 100);
});
DEMO
You can use like this:
$(window).scroll(function() {
$('div').addClass('blue');//add class on scroll
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('div').removeClass('blue');//remove class on scrolling stops
}, 250));
});
demo
To add e.g. fadeIn animation on scroll you can do as following:
$(window).scroll(function () {
$('#second').delay(1000).fadeIn('slow');
(delay is optional)
Check example: jsfiddle.net
Related
I have a mega menu that uses the hoverintent to delay the drop down, I have also set up a lightbox effect for the menu, however the code uses mouseenter and mouseleave, the problem is that whilst the drop down has a delay the lightbox effect doent, so as soon as the mouse passes over the lightbox is triggered. Is there any way that the code below can be changed to use hoverintent instead of mouseenter/mouseleave?
<script>
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
$("#mm-nav-overlay").toggle();
}).mouseleave(function () {
$("#mm-nav-overlay").hide();
});
}
});
</script>
Many Thanks
So I opted in the end to replace the code above with:
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
timer = setTimeout(function(){
$("#mm-nav-overlay").toggle();
},200/* <--- the delay */)
}).mouseleave(function () {
clearTimeout(timer);
$("#mm-nav-overlay").hide();
});
}
});
I am trying to add a class to the header if the user scrolls past the div #home - and remove the class when you scroll back to the top.
The issue is, when you scroll past the div it adds the class but when you keep scrolling and then scroll back up, the class does not get removed. The event is only firing once...
I created this jsFiddle here - https://jsfiddle.net/breezy/9evksr7y/
It works in my jsFiddle file but not on my actual web page, I've also tried this...
$(window).on( 'scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() > 400) {
// alert("made it!");
header.addClass('fixed');
clearInterval(interval);
} else {
header.removeClass('fixed');
}
}, 250);
});
But it still does not work. Any idea what I am doing wrong?
Thanks
Edit: The issue was that one of my other functions in the same document was conflicting w/ this scroll function.
So I made some minor tweaks to the code. Not sure what the issue was but this seemed to work for me on my webpage.
$(window).on('scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
if ($(window).scrollTop() > target) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});
I was wondering if I can detect native scrollbar's left/right or up/down buttons click event. I want to know because I want to give a custom behaviour of the scrollbar, like scroll only in some fixed steps etc. I have used scroll function, but it doesn't exactly give me the smoothness I wanted:
var step = 200;
var nextPos=-1;
var pos;
var scrolltarget;
$(' .scrollable ul').scroll(function(e){
clearTimeout($.data(this, 'scrollTimer'));
scrolltarget=$(this);
$.data(this, 'scrollTimer', setTimeout(function() {
pos=scrolltarget.scrollLeft();
if(pos%step!=0){
if(pos>nextPos){
scrolltarget.animate({
scrollLeft: pos-pos%step+step
},250);
}
else if(pos<nextPos){
scrolltarget.animate({
scrollLeft: pos-pos%step
},250);
}
}
nextPos=scrolltarget.scrollLeft();
}, 250));
});
you can use
$( window ).scroll(function() {
// your java script code
});
i recommend you to see this scroll jquery event.
I'm having some issues with the jQuery delay() function.
I'm currently using it to try and force a toggleClass action to wait until the slideUp animation has completed on one of my divs however it doesn't appear to be working.
My style aims at having a bar with rounded corners that when clicked expands to reveal further content with the round corners of the bar at bottom becoming squared so as to look as though the bar has actually expanded to reveal the content. This is fine and it works however, when I collapse the expansion, the bar needs to go back to having rounded corners at the bottom after the collapse animation has completed. At the moment it seems to fire before this animation has completed.
I read somewhere online that the jQuery 'slow' speed of transition is 600 milliseconds to I set the delay to 800 to make sure it is out of the way but again this hasn't actually done anything.
Any suggestions? Code and fiddle below:
$(function() {
$('span.history_record_toggle').click(function () {
if($(this).hasClass('collapsed')){
$(this).text('Show +');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideUp('slow',function() {
});
$(this)
.parent()
.toggleClass('squared_bottom');
}else{
$(this).text('Hide -');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideDown('slow',function() {
});
$(this)
.parent()
.delay(800)
.toggleClass('squared_bottom');
};
});
});
http://jsfiddle.net/jezzipin/KFeHd/6/
jQuery animations and effects have callback functions for what you want to happen after it finishes.
E.g.
var thisParent = $(this).parent();
$(this).closest('.history_record_container').find('.history_record_body').slideDown('slow',function() {
$(thisParent).toggleClass('squared_bottom');
});
Try this: Fiddle here
$(function() {
$('span.history_record_toggle').click(function () {
$zis = $(this);
if($zis.hasClass('collapsed')){
$zis.text('Show +')
.removeClass('collapsed')
.closest('.history_record_container')
.find('.history_record_body')
.slideUp('slow',function() {
$zis.parent().removeClass('squared_bottom');
});
$zis.parent().addClass('squared_bottom');
}else{
$zis.text('Hide -')
.addClass('collapsed')
.closest('.history_record_container')
.find('.history_record_body')
.slideDown('slow',function() {
});
$zis.parent().addClass('squared_bottom');
};
});
});
I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!
http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});
Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});
Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.
$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});
Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.