Forcing a scroll trigger after certain points - javascript

So what I want to do is have a page that is split into 4 divs (let's say 1, 2, 3, and 4). So whenever I try to scroll down after div 1, the page would automatically scroll to div 2; if I try to scroll my mouse down below div 2, it would scroll automatically to div 3; and the same way for div 3 to div 2, etc. I'm sure you have seen something similar to this in some online pages (can't think of any right now but if I find something I will link it).
Basically what it would do is, when you scroll up from a div it would animate the transition to the top of the previous div on its own.
I tried using jQuery and doing scrollTop, but couldn't get it to work.

See this:
$('html, body').animate({scrollTop: $('#div1').offset().top},'slow');
The whole code took me a long time to make
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var n=1;
var classes=$('.class').length;
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
n--;
n=n<1?1:n;
} else {
n++;
n=n>classes?classes:n;
}
//to prevent duplicate event
setTimeout(function () {
$('html,body').animate({scrollTop: $('.class[data-number='+n+']').offset().top},'fast');
},10);
});
});
</script>
<style>
html, body {
margin: 0;
height: 100%;
}
.class{
height: 100%;
}
.class:nth-child(2n){
background: red;
}
.class:nth-child(2n+1){
background: blue;
}
</style>
</head>
<body>
<div class="class" data-number="1" ></div>
<div class="class" data-number="2" ></div>
<div class="class" data-number="3" ></div>
<div class="class" data-number="4" ></div>
</body>
</html>

Related

How do I trigger jQuery when an anchor reaches the top of the viewport?

I need to trigger a jQuery function on a div when an anchor reaches the top of the viewport.
There are a lot of posts on StackOverflow based on an element entering the viewport (i.e the bottom of the viewport) see here for example.
Is it possible to trigger jQuery for the .nav-down element when the anchor #trigger hits the top of the view port?
HTML:
<div class="spacer"></div>
ANCHOR
<div class="nav-down"></div>
<div class="spacer"></div>
jS:
function scroll_style() {
var window_top = $(window).scrollTop();
var div_top = $('#trigger').offset().top;
if (window_top > div_top){
$('.nav-down').css("background","green");
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
This jS/jSFiddle doesn't work as intended, but it'll give an idea of the thought process I have:
https://jsfiddle.net/vanstone/s643m85b/14/
Can anyone assist me with getting this to work?
You can try using the getBoundingClientRect() to get the position of <a> with respect to the viewport and then implement your logic.
In the below example, I am checking for top < 10 to factor in the height of <a>
function scroll_style() {
if ($('#trigger')[0].getBoundingClientRect().top < 10) {
$('.nav-down').css("background", "green");
} else {
$('.nav-down').css("background", "yellow");
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
.spacer {
height: 700px;
background: red;
}
.nav-down {
height: 250px;
width: 100%;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="spacer"></div>
ANCHOR
<div class="nav-down"></div>
<div class="spacer"></div>

ScrollTop Jquery not working properly

I have been using the ScrollTop JQuery so that when buttons are clicked in the right hand column, they scroll to the specific id in the left. It goes to the specific id when I first load the page, but after that it doesn't go to the other three, but glitches out going up or down slightly when buttons are clicked. I found that when I scroll to the top of the page and click the link it goes to the correct place, so it seems it it trying to find the top position of the left column and trying to go from there. No ideas as to how to fix this so would appreciate any thoughts.
CSS:
html,
body {
height: 100%;
margin: 0px auto;
}
#main,
#col_l,
#col_r
{
height: 100%;
}
div[id*="col"]{
float: left;
width: 50%;
overflow: auto;
}
#col_r{
overflow:hidden;
position:relative;
}
JS:
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#stsp").click(function() {
$('#col_l').animate({
scrollTop: $("#lgg").offset().top}, 2000);
});
$("#fg").click(function() {
$('#col_l').animate({
scrollTop: $("#funny").offset().top}, 2000);
});
$("#covers").click(function() {
$('#col_l').animate({
scrollTop: $("#coverso").offset().top}, 2000);
});
$("#demo").click(function() {
$('#col_l').animate({
scrollTop: $("#mp3").offset().top}, 2000);
});
});
HTML:
<div id="col_r">
<div id="hb"><button id="demo">One × Fifteen (64mb) </button></div>
<div id="lg"><button id="stsp">Same Time Same Place</button></div>
<div id="fg"><button id="funny">Funny Games Funny Games</button></div>
<div id="c"><button id="covers">Covers Over Covers</button></div>
</div>
This was fixed this using the ScrollTo Jquery:http://flesler.com/jquery/scrollTo/
I'm not sure why I was having problems with the ScrollTop Jquery.

Load div one by one with a delay using jquery

This is my whole code..what I am trying to do is to have-. when DOM is ready first div shows on page and second one after a delay and then third one and so on up to 150.
Problem with the current code is that, whole 150 div loads at once after a small delay.
My code -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test for dashed div</title>
<style type="text/css">
.dashdiv
{
width: 150px;
height: 50px;
background: #ae2d3e;
float:left;
box-shadow: 10px 10px 6px #d4a7b0;
margin: 5px;
}
</style>
</head>
<body>
<?php
for($i =0; $i < 150; $i++)
{
?>
<div class="dashdiv">
This is a div text
</div>
<?php
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.dashdiv').each(function()
{
$(this).hide().delay(1000).fadeIn(1850);
});
});
</script>
</body>
</html>
The problem you're facing, which no one has mentioned, is that jQuery delay() is only chainable on an fx queue. So, using it after hide() will not work. A quick fix to get it working would be to use an effect in place of hide(), ie:
$('div.dashdiv').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});
Try using the index argument that is automatically assigned for every iteration of each to extend the delay in a linear manner:
$('div.dashdiv').each(function(i) {
$(this).delay(1000*i).fadeIn(1850);
});
Also, following your comment, the style of the div elements should be changed to make them hidden:
.dashdiv {
display:none;
...
}
You can use :
Html:
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
jQuery:
$('#parent .child')
.hide()
.each(function(index){
var _this = this;
setTimeout( function(){ $(_this).fadeIn(); }, 5000*index );
});
demo at http://jsfiddle.net/gaby/eGWx9/1/
Here's a way to delay and fadeIn a div only once the previous div has finished.
It uses the fadeIn callback to move to the next div in the array:
// hide all
$('.dashdiv').hide();
// fade in each div one by one
divs = document.getElementsByClassName('dashdiv');
(function fade(i){
if(i < divs.length){
$(divs[i]).delay(1000).fadeIn(1850, function(){
fade(++i);
});
}
})(0);
Or without getElementsByClassName.
// hide all
$('.dashdiv').hide();
// fade in each div one by one
(function fade(i){
if(i < $('.dashdiv').length){
$($('.dashdiv')[i]).delay(1000).fadeIn(1850, function(){
fade(++i);
});
}
})(0);
Demo: http://jsfiddle.net/louisbros/RdxS6/

onscroll event and scrollbar buttons

Here's the simplified html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function handle() { console.log("fired"); };
</script>
</head>
<body>
<div style="width:200px; height:100px; overflow-y: scroll; border: 1px solid gray;" onscroll="handle()">
<div style="width:150px; height:400px;"> </div>
</div>
</body>
</html>
The problem is, when div is not scrolled at all (initial position) the small button with triangle symbol on top of scrollbar does not fire an event. Maybe it's logical, but I search a way to work around this behaviour, because it's the only way for now to work around dojo framework tree widget with enabled drag-n-drop. Yep, I know, workaround for workaround.
Well, it's not pretty, but this should do the trick:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function handle() { console.log("fired"); };
</script>
</head>
<body>
<div id="div" style="width:200px; height:100px; overflow-y: scroll; border: 1px solid gray;">
<div style="width:150px; height:400px;"> </div>
</div>
<script>
//Get the element
var div = document.getElementById("div");
var ignore = true;
//Set the scroll to 1 (this will allow it to scroll up)
div.scrollTop = 1;
div.addEventListener("scroll", function(){
//Ignore generating output if the code set the scroll position
if(ignore) {
ignore = !ignore;
return;
}
//CODE GOES HERE
handle();
//If the scroll is at the top, go down one so that the user
//is still allowed to scroll.
if(div.scrollTop <= 1) {
ignore = true;
div.scrollTop = 1;
}
//If the scroll is at the bottom, go up one so the user can
//still scroll down
else if(div.scrollTop >= div.scrollHeight-div.clientHeight - 1) {
ignore = true;
div.scrollTop = div.scrollHeight-div.clientHeight - 1;
}
}, true);
</script>
</body>
</html>
I removed the inline function call and replaced it with an eventListener. Basically, it makes sure the user never scrolls completely to the top or bottom, ensuring that there will always be a scroll event.

jQuery getting the margin-top needed to put element on the top of the screen

I've got a problem in internet explorer 6 and FF with something I'm trying to implement in jQuery. Basically there is an object at the top of the page using floated content that seems to be interfering with the $(window).scrollTop() property.
It was my understanding (and if I'm wrong, please help me by telling me the right way!) that $(window).scrollTop() would return the whitespace hidden by scrolling. I did some tests without the floated content and they seem to support this.
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT!
}
else { //otherwise hide it, since the header is visible
$("#scrollingDiv").hide();
}
});
});
This is the html document that shows the error (you just comment out the "evilFloatomoton" div below to see it working properly)
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) {
var $myDiv = $("#scrollingDiv");
if ($myDiv.is(":hidden")) {
$myDiv.show();
}
$myDiv.stop();
$myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ });
}
else {
$("#scrollingDiv").hide();
}
});
});
</script>
<style type="text/css">
<!-- Enter any CSS to make objects viewable here -->
#scrollingDiv
{
width: 100%;
position: absolute;
margin-top: 0px;
}
</style>
</HEAD>
<BODY>
<!-- Enter in test elements here -->
<div style="overflow: auto;">
<div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;">
CONTENT<br /><br />
</div>
</div>
<div id="scrollingDiv" style="background-color: #000; color: #FFF;">
Scrolling floating div of doom
</div>
<div style="height: 180px; border: solid 1px #000;">
*Highlight the 180 px scroll area*
</div>
<div style="height: 10000px;">
</div>
</BODY>
</HTML>
So instead of being against the top edge like I thought, it's halfway down the page in my tests. Can anyone help me?
For your scrollingDiv container, set the style to Position:absolute and top: 0px. That should keep your floating div in one spot.

Categories