Develop Reference

how can i redirect on another page on scroll down

$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//infinite scrolling is the idea
}
});
<div id="scrollwork" class="scroll-padder">
</div>
This is my div tag. I want to make scroll on homepage and when i scroll down i want to redirect on page work.html with the use of java script

document.getElementById("scrollwork").onscroll=function(){window.location=redirecturl}

Move div with window scroll not consistent

I need my sidebar to scroll up and down with the window but stop when the div is at its top or bottom. The code below works when the page is first loaded and scrolled down or when the page is scrolled up slowly, but when the page is scrolled to the very bottom of the sidebar div, the page has to reach the top (and then some) in order to trigger that margin change.
Is there some other trigger I should be looking for besides just on scroll? How can I adjust this code to properly adjust the div?
$(window).on("load scroll", function() {
var scrollYpos = $(document).scrollTop();
var sidebarinfo = $("#sidebar").offset().top + $("#sidebar").height();
var windowinfo = $(window).height() + $(window).scrollTop();
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('margin-top', -scrollYpos);
}
});
The sidebar div is fixed position. If I use absolute position, the div scrolls fine, but it doesn't stop when the bottom of the div has been reached - it just continues to scroll with the window.
I've fixed the main part of the problem with this code.
$(window).on("load scroll", function() {
var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").height();
var windowinfo = $(window).innerHeight() + $(window).scrollTop();
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('top', -($(window).scrollTop()));
}
});
The only problem is on page load, the sidebar gets stuck in the wrong position until it is scrolled all the way up (and more).

I actually figured out that I needed to adjust a few things and add an else clause:
$(window).on("scroll", function() {
var scrollmargin = $(window).scrollTop() - $("#sidebar").outerHeight();
var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").outerHeight();
var windowinfo = $(window).innerHeight() + $(window).scrollTop();
console.log($(window).scrollTop());
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('top', (sidebarinfo + scrollmargin)*-1);
}
else {
var margintop = $(window).innerHeight() - $("#sidebar").outerHeight();
$('#sidebar').css('top', margintop);
}
});

Appending data for every occurance for the same event

I am appending some php files using ajax every time the user scrolls to the bottom of the window.
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100){
$(window).unbind('scroll');
// Function to append php files using ajax
}
})
I want to recognize the next time user scrolls to bottom of the page and append some other php files, but how do I find out the next(1 or many) events that scroll to bottom of the page?
Example: First scroll to bottom: Append 1.php 2.php
second scroll to bottom: append 3.php 4.php
third scroll to bottom: append 5.php 6.php
4th scroll to bottom: show footer
I dont need infinite scroll plugin. Because there is no concept of footer there.

You need to maintain a counter variable which counts how many requests you've made. You can then pass that to the server which will then return the required information. Something like this:
var requestCount = 0;
$(window).scroll(function(){
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
// Function to append php files using ajax
requestCount++;
if (requestCount < 4) {
$.ajax({
url: 'foo.php',
data: { page: requestCount },
success: function() {
// append your items
}
}
}
else {
// show footer
}
}
})
In your PHP you would need to take the page variable and return the relevant items.

var count = 1;
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100){
$(window).unbind('scroll');
if(count<4)
// Function to append php files using ajax
call_your_ajax_with_url(count+'.php');
call_your_ajax_with_url(count+1 +'.php');
count+=1;
else showFooter();
}
});
would do the work.

How to show a DIV when users reach X pixels from the bottom of the page

I'm using the code below to show a banner once users reach the bottom of the screen. Issue is that I noticed that most users don't scroll down till the end. What should I modify to show my div .banner3 at, let's say, 150px from the bottom?
Many thanks
$(document).ready(function() {
$(window).scroll(function() {
if($("body").height() <= ($(window).height() + $(window).scrollTop())) {
$(".banner3").fadeIn()
} else {
$(".banner3").css("display","none");
}
});
});

$(window).height() + $(window).scrollTop() - 150
Easy stuff :)
You could also perhaps rewrite the code a bit nicer. The scroll event is fired many times, so you could do some caching of the selector.
$(function() {
var banner = $(".banner3");
var bodyHeight = $("body").height();
$(window).scroll(function() {
if (bodyHeight <= $(window).height() + $(window).scrollTop() - 150) {
banner.fadeIn();
} else {
banner.hide();
}
});
});

edit: forgot to hide the banner again...
http://jsfiddle.net/kasperfish/RBndE/1/
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() > $(window).height()-150){
$('.banner').fadeIn();
}else{
$('.banner').fadeOut();
}
});
});

Auto load content on scroll down

I am creating a blog on django/webfaction. My hompage currently displays 4 posts by default (posts are limited to 4 on queryset in urls.py). Now I would like to load four more posts once user reaches the bottom of the page and keep on continuing that until last post is reached. How to achieve this?

If you want to load your content on reaching extreme bottom of document use following code:
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
// load your content
}
});
If you want to load content before reaching 100 pixel of bottom use
var loading= false;
$(window).scroll(function() {
if (!loading && ($(window).scrollTop() > $(document).height() - $(window).height() - 100)) {
loading= true;
// your content loading call goes here.
loading = false; // reset value of loading once content loaded
}
});

You can try something like this..
var processScroll = true;
$(window).scroll(function() {
if (processScroll && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
processScroll = false;
// your functionality here
processScroll = true;
}
});

You can make Ajax call to fetch more posts on 'onscroll' event of element (possibly on body in your case).
You can make the same call using jquery's '.scroll()' documented here: http://api.jquery.com/scroll/
You can probably maintain a previous-top statement to determine direction of current scroll.