Develop Reference

Is there a way for changing different images at different scrolling point?

I'm trying to change one image at a time when I'm scrolling through the page.
This code actually changes all images classes when we get to that point of the scroll.
Is there any other way we can change images individually when scrolling?
Thank you.
jQuery(function($) {
var show = $(".show");
var hide = $(".hide");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if($(window).scrollTop() >= 500){
show.removeClass('show').addClass("hide");
hide.removeClass('hide').addClass("show");
} else {
show.removeClass("hide").addClass('show');
hide.removeClass('show').addClass("hide");
}
});
});

Since you're checking the scroll position of window and hiding/showing, this will hide/show all elements with the specified class name.
To achieve your purpose, add css position: relative to all images (if no position is specified already),
Then, iterate through each image as follows...
jQuery(function($) {
//var show = $(".show");
//var hide = $(".hide");
$(window).scroll(function() {
/*var scroll = $(window).scrollTop();
if($(window).scrollTop() >= 500){
show.removeClass('show').addClass("hide");
hide.removeClass('hide').addClass("show");
} else {
show.removeClass("hide").addClass('show');
hide.removeClass('show').addClass("hide");
}*/
var images = $('img');//or any other selector
$.each(images, function () {
if($(this).offset().top <= -500) {
$(this).hide();
}
else {
$(this).show();
}
});
});
});

Fade in on scroll and fade out on scroll

I'm new to this stuff.
I'm using this to make a div appear on scroll and to make it disappear when I scroll further.
It's working pretty good. It fade's out when I pass 1750. But on page load the div is already there. It should appear when I scroll past 1500.
What I need is the div be visible between 1500 and 1750. Hope you can help!
<script type="text/javascript">
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500) {
$('#form_1_container').fadeIn(150);
} if (x > 1750) {
$('#form_1_container').fadeOut(150);
}
});
</script>
This is the site = http://www.stilld.nl/brrreuk/
You can see if you scroll, that the div appears and disappears. But then it start to pulse...
I'm using display=none on my div.

You can try this
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500 && x < 1750) {
$('#form_1_container').stop().fadeIn(150);
}
else{
$('#form_1_container').stop().fadeOut(150);
}
});

Why does the position of scroll change when I append data?

I am appending the data not in same div. But when I append data, my focus or scroll position goes in between the append content. Actually I am appending the data when user scroll to bottom.
But when I save google images, it loads some images then when user goes to last lines it loads more images without changing the scroll position.
Can we do in my example
http://jsfiddle.net/cQ75J/10/
var pages = [page_1, page_2, page_3, page_4, page_5];
var backupPages=new Array();
var totalPage = "page_" + pages.length;
$("#current").html(pages.pop());
$("#fullContainer").scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight && pages.length) {
// alert("--")
$("#next").html('')
$("#pre").html('')
$("#pre").html($("#current").html());
$("#current").html('');
$(this).scrollTop(
$("#current").html(pages.pop())
.appendTo($("#fullContainer"))
.height()
);
}
});
I have one example in which my need is same scrolling position after appending. But it create new div in current div. I need new data come in current(id) div and current data goes to previous(id) div
http://jsfiddle.net/hBvrA/

check updated fiddle: http://jsfiddle.net/hBvrA/1/
I have created function to update html structure
function updateContents() {
$("#pre").html($("#pre").html() + $("#current").html());
$("#current").html("<div>" + pages.pop() + "</div>");
$("#fullContainer").scrollTop($("#pre").height());
}
and called in scroll event with wait timer mechanism:
var timerWait = 1000;
var timerFlag = false;
$("#fullContainer").scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight && pages.length) {
// Clear timer
clearTimeout(timerFlag);
timerFlag = setTimeout(function() {
updateContents();
}, timerWait);
}
});

jQuery - stop autoscrolling div when hovered

This is a follow-up post to a previous question: jQuery - scroll down every x seconds, then scroll to the top
I have refined the scrip a little further, but am having a little trouble with the last step.
I have a div that automatically 50px at a time until it reaches the bottom, at which point it scrolls to the top and starts again. I have this working perfectly thanks to the above question and with a little add work.
I need to make all scrolling stop when the div is hovered. I have done part of this already (there is no incremental scrolling down on hover) but I cannot get the full picture. The div will still scroll to the top even when hovered.
Here is my jQuery and a fiddle to go along with it: http://jsfiddle.net/wR5FY/1/
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0 && dontScroll == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
$('#scroller').bind('scroll', function () {
if (dontScroll == 0) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
}
}
});
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});
​
In the fiddle, try hovering the scroller div when the yellow square is visible. You will see that it scrolls to the top.
A couple of notes:
You will notice I have used mouseenter and mouseleave rather than hover and mouseout. This was the best way I could find to ensure all child elements within the div didn't have an adverse affect.
A potential problem area is the fact that I have binded to the scroll event for my function that scrolls to the top. I think this might cause some additional problems when a user is manually scrolling through the items, with my jQuery trying to scroll against the user.
I did a little experimenting with killing setInterval, but I didn't find this to be very helpful as the function that triggers isn't the problem area.
My overall goal here is to lock down all automatic scrolling when a user is hovering or manually scrolling through the list. This is 90% there. If they happen to scroll to the bottom, NOTHING should happen until they move the mouse elsewhere - this is the problem.

Keep it easier ;)
The problem was that you first evaluate wheter dontScroll is zero, then start the timer.
When the timer has ended, it doesnt evaluate anymore, whether dontScroll STILL is zero.
Just pulled that into your scrollIt function:
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 2000);
function scrollit() {
if(dontScroll == 0){
if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
} else if(scrollingUp == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
}
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});

reduce number of calls for .resize and .scroll methods

I'm using the following code to find out which part of the page the viewer is visiting (something like google books, to find out the page that's being viewed) :
$("#main-content").scroll(function () {
Nx.curPage = (Math.round($(this).scrollTop()/620)+1);
window.location.hash = "#"+Nx.curPage;
Nx.select(undefined);
});
also in another part I use $(window).resize( ... ) to fit my content in current window size, which is called for every single resize . as you can imagine this slows down the page alot, specially on older hardwares. Is there any way to realise when scrolling or resizing is stopped and then start doing the stuff, so number of processes is reduced ? something like $("#main-content").scrollStop ???

You can do two things.
1.) Set up a timeout so that resize/scroll only happens after some idle state:
var timeout;
$("#main-content").scroll(function () {
clearTimeout(timeout);
timeout = setTimeout(function(){
Nx.curPage = (Math.round($(this).scrollTop()/620)+1);
window.location.hash = "#"+Nx.curPage;
Nx.select(); // note: undefined is passed by default
}, 200);
});
2.) Limit the number of calls / sec:
var lastScroll = 0;
$("#main-content").scroll(function () {
var now = +new Date;
if (now - lastScroll > 100) { // only execute if (elapsed > 100ms)
Nx.curPage = (Math.round($(this).scrollTop()/620)+1);
window.location.hash = "#"+Nx.curPage;
Nx.select();
lastScroll = now;
}
});
​

Try the function below. It checks if the user has scrolled past a certain no. of pixels, but the function only fires at set intervals (5 times a second in the example below) rather than continuously during scrolling.
var scrollCheck;
$(window).on('scroll', function() {
clearInterval(scrollCheck);
scrollCheck = setInterval(function(){
clearInterval(scrollCheck);
scrollPosition = $(this).scrollTop();
scrollAmount = 150 // no. of pixels that have been scrolled from top
if(scrollPosition > scrollAmount){
alert('scrolled past point')
}else{
alert('not scrolled past point')
}
},200);
});