I have Jquery code to fade certain divs when the page loads. how would i edit this code to trigger this when the user scrolls 2000px on my webpage.
JQUERY
$(function () { $(window).load(function() {
$('.welcome-image').addClass('animated fadeInRightBig');
})
var reset = function reset() {
console.log($(this).scrollTop());
// do stuff when window `.scrollTop()` > 75
if ($(this).scrollTop() > 2000) {
// turn off scroll event so `fx` not called
// during ongoing animation
$(this).off("scroll");
// when all animations complete
fx()
}
};
// if `fx` should only be called once ,
// change `.on()` to `.one()` ,
// remove `.then()` callback following `fx()`
// within `reset`
$(window).on("scroll", reset);
});
try this
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
height: 1000px;
}
</style>
<body>
<h2>scroll the body to see the magic</h2>
</body>
<script type="text/javascript">
$(window).on("mousewheel", function() {
var the_position = $(document).scrollTop();
if (the_position > 200)
{
$('body').css({"background-color":"red"});
}
else
{
$('body').css({"background-color":"white"});
}
});
</script>
</html>
chagne the function and other things as your need. this is an example to get you and idea.
$(window).load(function() {
$(window).on('scroll', function () {
if ($(window).scrollTop() > $("#section").scrollTop()) {
$('.welcome-image').addClass('animated fadeInRightBig');
}
});
})
It might help you
Related
I looked at other threads, and their mistakes had to do with typos, I'm not sure where I'm going wrong.
I don't see the scroll button at all. It works when I call the function showScroll() from the body of my html using <body onscroll="showScrol()"> but that doesn't work in IE so I'm trying to use this function but it's not working:
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll());
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
});
$(window).scroll(showScroll()); means you're executing the function instantly and the return value is being passed into the scroll event.
Instead make it $(window).scroll(showScroll); so it's the function that is passed in.
I created an example for you to illustrate. I guessed the html a bit but you get the point. Start scrolling the below example and see the div appear and disappear.
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll); // <-- this was changed
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
const button = document.querySelector('button'); // <-- added this for completeness
button.addEventListener('click', scrollToTop);
});
main {
height: 600px;
}
#top-btn {
position: fixed;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<button id="top-btn">Show me</button>
</main>
How to detect scroll only once per user request. My first attempt looks like this:
$(window).bind('mousewheel', function(event) {
console.log("hello")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>
The problem with the above code is that when the user scrolls the function doesnt fires continuesly rather than just detecting it once and printing the console.log once.
My second attempt:
$(this).one('scroll', function(){
// scroll
console.log("hello")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>
The problem with the second attempt is that the function fires only one time unless the page is refreshed.
How can I make my second attempt better so that it detects more than one time without refreshing the page? If I scroll down I want hello to be displayed only once and when I scroll up again I want hello to be displayed once again
Set the scroll eventListener and then unbind it on scroll:
$(window).on("scroll", function(e){
console.log("only alerting once");
$(window).unbind("scroll");
});
var currentScrollTop = 0,
previousScrollDir = true;
$(this).scroll(function () {
var scrollTop = $(this).scrollTop();
if (scrollTop < currentScrollTop) {
if (!previousScrollDir) {
console.log('scrolled up');
previousScrollDir = true;
}
} else {
if (previousScrollDir) {
console.log('scrolled down');
previousScrollDir = false;
}
}
currentScrollTop = scrollTop;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>
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 a <div> which I am "blinking" every 5 seconds, here is my code:
var blink = function() {
$('.leftArrowMask').toggle();
};
$(document).ready(function() {
setInterval(blink, 5000);
});
I would like to change this so the blink effect happens every 5 seconds, but only blinks for say 1 second. Currently it stays visible for a 5 second duration, and then hides for 5 seconds.
I have tried the code above, but I don't think that's quite right. How can I achieve what I require?
Try this...
var blink1 = function() {
$('.leftArrowMask').hide();
setTimeout(blink2, 5000);
};
var blink2 = function() {
$('.leftArrowMask').show();
setTimeout(blink1, 1000);
};
$(document).ready(function() {
setTimeout(blink1, 1000);
});
It first runs blink1 which hides the div, and then runs blink2 after 1 second to show the div. Blink2 in turn runs blink1 again, 5 seconds later.
var blink = function() {
$('.leftArrowMask').hide();
setTimeout(function(){$('.leftArrowMask').show()},1000);
};
$(document).ready(function() {
setInterval(blink, 5000);
});
Working DEMO
use setTimeOut function in ur set interval function
var blink = function() {
$('div').hide();
setTimeout(function(){$('div').show()},1000);
};
$(document).ready(function() {
setInterval(blink, 5000);
});
div{
width:100px;
height:100px;
background:red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div></div>
</body>
</html>
I am trying to get an alert to show if a user scrolls within 100 pixels of the bottom of the page. I'm getting /friends to load into div class = social, but I am having trouble with the scroll part. Any advice on what I can fix?
<!--Load friends module -->
<script>
$(document).ready(function (){
$('.social').load("/friends");
});
</script>
<!--Load more videos if scroll within 100 pixels of bottom -->
<script type="text/javascript">
counter = 2;
$(document).ready(function (){
function loadMore() {
console.log("More loaded");
alert("test");
$('.more_videos').load("/more_videos/"+counter);
$(window).bind('scroll', bindScroll);
}
function bindScroll(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
loadMore();
}
}
$(window).scroll(bindScroll);
});
counter = counter+1;
</script>
There is an invisible character after this line
$(window).scroll(bindScroll);
You can see it here. It is the little red dot at the end of line 20