Develop Reference

Text effect not working properly if i add more div on page scroll

I have taken a reference of the below site and i want to add text effects ie opacity gets fade on page scroll. The above code is working properly if i use the below reference as it is but if i add many div then it gets faded early not reaching the required div
http://jsfiddle.net/HsRpT/134/
Here is what i have done and the text fade effects goes early without reaching the actual div. Is there any other way of solving this problem?
<div>
fsdfdfsdfffffffffff<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>><br><br><br>
</div>
<div class="block">
<h2>Fade this in / out as scroll down</h2>
</div>
<div class="content">
<div class="headerbar">
</div>
</div>

Try
$(window).scroll(function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 200) {
$('.block').stop(true, true).fadeOut();
}
else {
$('.block').stop(true, true).fadeIn('fast');
}
});
Fiddle

current_div="div1";
$(window).scroll(function() {
current_div = scroll_content();
console.log(current_div);
if(current_div=="last"){
don't fade out
}
});
function scroll_content(){
var winTop = $(this).scrollTop();
var $divs = $('section');
var top = $.grep($divs, function(item) {
return $(item).position().top <= winTop;
});
var cur=top[top.length - 1];
return $(cur).attr('id');
}
You can get the the id of the div which is going out of screen while scrolling. So you can do what ever you want to do with the divs after getting the id .
It worked for me.
Let me know if you any other query.

Load content after scrolling?

I have a page with some content. When it opens, I want to display only the first div, and load all the others after scrolling 500 px from top. How to do that?
The goal is to delay loading the content, not just hide it
Code exampe:
<div id="first_loaded"></div>
<div id="loaded_after_scrolling"></div>

Here's a a fiddle with your example.
$( document ).ready(function() {
$("#loaded_after_scrolling").hide();
$(window).scroll(function() {
if($(window).scrollTop()>500) {
$("#loaded_after_scrolling").fadeIn();
}
});
});

use:
$(window).scroll(function(){
if ($(window).scrollTop() > 500)
{
// load div content here
}
}
EDIT
try this
http://jsfiddle.net/gWD66/2489/

Responsive Javascript Image Slider, managing state change

I have a responsive site that has an image slider that the user can look through.
Here is the link to that slider:
http://firehousecoffeeco.com
I was able to get the slideshow to return to the first slide when they click the "right" button on the last slide, without the right edge of the last slide ever coming too far into the window. This is done by checking the viewport width against the container div's width (see the left button's click handler below).
My question is: How do I make it so that the same thing that is happening with the last slide happens with the first slide. (no matter what, I never want the container's left edge to go above 0px). I tried to do the same with the first slide as with the last, but it didnt' work, please see below:
Here is the markup of the slider:
<section id="photoGallery">
<div id="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<!--left and right buttons-->
<div id="left" data-dir="left"></div>
<div id="right" data-dir="right"></div>
</section>
The container div is "slides" and it is what is being moved.
Here is my script's click handlers and transition function:
//click handlers
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (slidesContainerLeftEdge == 0) { //if on first image (this is not working, help!)
slides.animate({marginLeft: ""+-(slideShowLimiter * 320)+"px"}, 200);
console.log("working");
} else {
transition("+=");
}
});
rightButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerEdge = $('#slides').get(0).getBoundingClientRect().right;
var slidesContainer = $('#slides').width();
if (slidesContainerEdge < viewport + 320) { //if last slide
slides.animate({marginLeft:"0px"}, 200);
} else {
transition("-=");
}
});
function transition(direction) {
slides.animate({marginLeft: ""+direction+""+movement+"px"}, 200);
}
Hopefully you guys can help me out of a jam. Thanks in advance!

if(0 >=slidesContainerLeftEdge > -320){ // if first slide
slides.animate({marginLeft: ($(window).width()-$('#slides').width())+"px"}, 200);
}else{
//...
}
Just to follow the logic here you used for the rightClick, so when it's the first slide on the left, you'll move the slides to the left (by setting the margin-left) so its right matches the right of the window.
See Full Code:
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (0 >=slidesContainerLeftEdge > -320) {
slides.animate({marginLeft: (viewport-slidesContainer)+"px"}, 200);
} else {
transition("+=");
}
});

Detect scrolling - scroll to div

I'm trying to make a site whereby when the user starts to scroll it automatically scrolls them (not jump) to a set position, so that content can be seen. The content is already there on the page I just dont want them to scroll to it so as soon as they start to move down the page it will help them by scrolling to a set point.
This is what I had so far but I got lost:
<script type="text/javascript">
$(body).scroll(function() {
if ( $this).scrollTop() > 1 ) {
}
});
</script>

Here's a fiddle
var scrollFunction = function() {
$('html, body').not(':animated').animate({
scrollTop: $("#layer-2").offset().top //gets the position of the next layer
}, 1000, function() {
$(document).off('scroll', scrollFunction)
});
}
$(document).on('scroll', scrollFunction);

You can bind your element with scrollstart (also there is a scrollstop) event:
jQuery('#yourElementId').bind("scrollstart",scrollFunc);
var scrollFunc = function(){
//if(jQuery('#yourElementId').scrollTop()>1) //unnecessary
jQuery('#yourElementId').scrollTop(300); // change 300 to any number you want
}

jquery onclick from div to div

I had this problem here javascript - Need onclick to go full distance before click works again that I couldn't seem to figure out how to make it work. So I am going on to plan B which is to try to go from div to div within a scroll. Currently, my HTML looks something like this:
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
</div>
</div>
<div class="buttons">
<div id="left">
<div id="right">
</div>
Javscript
$(function () { // DOM READY shorthand
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000);
});
});
So currently I was trying to get it to move the full 251px first before another click event could fire. The problem is when a user clicks on the arrow multiple times, it resets the event and starts over from within the scroll so instead of going from frame to frame, it could start in the middle of the frame and end in the middle of the frame. Since I haven't been able to figure out how to make the javascript complete its action first so it goes the full 261 px before the event can happen again, I was wondering is there a way to transition from div to div so the user can click as many times as they like and it will transition smoothly from div to div and not end up in the middle once its done?

That's what on() and off() are for :
$(function () {
var buttons = $("#right, #left");
buttons.on('click', ani);
function ani()
buttons.off('click');
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").animate({ scrollLeft: dir + '251' }, 1000, function() {
buttons.on('click', ani);
});
}
});
Another option would be to not rely on the currently scrolled position, but a variable you keep track of yourself.
$(function () {
$("#right, #left").on('click', function() {
var wrap = $(".outerwrapper"),
dir = this.id == "right" ? 251 : -251,
Left = (wrap.data('scroller') || 0) + (dir);
$(".outerwrapper").animate({ scrollLeft: Left }, 1000);
wrap.data('scroller', Left);
});
});