We Keep Coding

How to stop scroll when dynamic div ends

I want to stop scroll after a dynamic div reaches its end. This div will be holding dynamic content so the size never stays the same. I know how to lock in position when scroll hits a pre-defined height, but not sure how to do it when the hight is constantly changing. here's what i'm using for my standard locking scroll when it hits specific point:
var profile_rc = $("#profile-rc");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 285) {
profile_rc.addClass("p-right-column");
} else {
profile_rc.removeClass("p-right-column");
}
});

Looks like you are using jQuery, the following 2 examples might help.
Detecting dynamic height of screen
<script>
$(function(){
var windowHeight = $(window).height();
$(window).resize(function() {
windowHeight = $(window).height();
console.log(windowHeight);
});
});
<script>
Detecting dynamic height of a div
<script>
$(function(){
var divHeight = $('#your-div-id').css("height");
$( window ).on("resize", function() {
divHeight = $('#your-div-id').css("height");
console.log(divHeight);
});
});
</script>

I got it to work doing this:
$(window).scroll(function() {
var divHeight = $('#farleft-cont').outerheight(true);
var ycbc = $('#target-div');
var scroll = $(window).scrollTop();
if (scroll >= divHeight) {
ycbc.addClass("target-div-fixed");
} else {
ycbc.removeClass("target-div-fixed");
}
});

How to adjust page to scroll to center on clicking on carousel?

I'm trying to get it so that when you click on the carousel, the page will adjust to have the carousel in the center. This website (http://studionewwork.com/) shows this when you click on their carousel. I'm still learning about Jquery so I'm not yet adept at commands yet.
http://jsfiddle.net/8bJUc/614/
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
});
$('.owl-demo').on('click', function(e) {
var el = $( e.target.getAttribute('href') );
var elOffset = el.offset().top;
var elHeight = el.height();
var windowHeight = $(window).height();
var offset;
if (elHeight < windowHeight) {
offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
}
else {
offset = elOffset;
}
var speed = 700;
$('html, body').animate({scrollTop:offset}, speed);
});

Hey I updated your fiddle to make it work: http://jsfiddle.net/8bJUc/649/
Basically you are using $(".owl-demo") as if it's a class, but it's an ID. Then the onClick function tries to get the clicked element but fails doing so.
var el = $( e.target.getAttribute('href') );
This line basically says:
Get the href-attribute from the clicked element and use jQuery to locate any elements matching the href attribute. I removed this since you don't specify the href attribute anywhere.
$('.owl-carousel').on('click', function(e) {
var el = $(".lazyOwl", this);
var elOffset = el.offset().top;
var elHeight = el.height();
var windowHeight = $(window).height();
var offset;
if (elHeight < windowHeight) {
offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
}
else {
offset = elOffset;
}
var speed = 700;
$('html, body').animate({scrollTop:offset}, speed);
});
Please note that the example carousel you posted doesn't work as expected on my Macbook Air 11''. The carousel jumps around whenever I click on it.

Animation continues after once trigged by scroll

I made a bar chart only with CSS and a animation from low to up that works well, however I want to run only when trigged by scroll.
Somehow the animation after trigged by the scroll does not stop, it keeps running.
look in the inspect element the latest bar.
jquery
// Bar Chart Animation
function barChart(){
$("#demographicsBars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000, function() {
$('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
});
});
};
// Scroll Call Animation
$(window).scroll(function () {
$('.viewerDemographics').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
barChart();
} else {
}
});
});
jsfiddle

It's because you're asking it to.
http://jsfiddle.net/g6r1vngh/1/
Tell JS it hasn't been drawn
// Bar Chart Animation
var barChartDrawn = false;
Set it to true when it runs
function barChart(){
barChartDrawn = true;
Don't do any of those calculations, or run the function, if it's true
$(window).scroll(function () {
if (barChartDrawn) return;

making a function works on specific widths

I am trying to make this function works only when the screen size is above 1024px.
//Parallax background image
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};$(window).bind('scroll', update); update();
Here is what I have tried to do:
//Parallax background image
var velocity = 0.5;
$(window).on("ready resize", function() {
if ($(window).width() < 770) {
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};});$(window).bind('scroll', update); update();
I really don't know what I am doing wrong...

You haven't stated what the problem you're coming across is. If it's "my code doesn't work", then perhaps you should check your syntax first. Your braces are messed up.
//Initialize velocity and empty update function
var velocity = 0.5;
var update = function () {};
//When window is ready (content loaded) OR resized, execute the following function
$(window).on("ready resize", function () {
if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger
update = function () { //Set update to run this function when executed.
var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/
//For each element with 'parallax' class, execute the following function
$('.parallax').each(function () {
var $element = $(this); //Get the current parallax-classed element
var height = $element.height(); //Save the current height of this element
//Set the CSS of this parallax-classed element set the background position
$(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px');
});
};
} else { //Execute if screen width is < 1024px
update = function () {}; //Set update to do nothing
}
});
//When window is scrolled through, run the update function
$(window).bind('scroll', update);
//update();
Last line is unnecessary, as resize will handle function value, and scroll will handle the execution.
You were missing a + or - within the background-position setting.
So for example, if the result of your Math.round() was "30", then Javascript would interpret that line as $(this).css('background-position', '40%30px'); which obviously would cause issues. I'm sure you wanted it to say something like $(this).css('background-position', '40% + 30px');.

Firing an animation when aligned

I am creating a splitscrolling website and it's working great. But i have one problem, when the user stops scrolling it fires a function called alignWhenIdle and what this does is align the columns so they become "one".
Now that is working nicely but i can't seem to target a specific part of the column that aligns. let's say when the number 2 column aligns ( see image ) i want to be able to fire an animation. I tried using a callback but that fires a function every time the columns are aligned.
This is my JS:
(function ($) {
var top = 0;
var contentHeight, contents, totalHeight;
var locked = false;
var timeout;
var align = function () {
var pos = (top + $(window).scrollTop());
var snapUp = 0 - (pos % contentHeight) < (contentHeight / 2);
var multiplier = snapUp
? Math.ceil(pos / contentHeight)
: Math.floor(pos / contentHeight);
var newTop = contentHeight * multiplier;
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200);
locked = false;
};
var reset = function () {
contentHeight = $('.right').height();
contents = $('.right > .content').length;
totalHeight = contentHeight * (contents - 1);
top = (0 - totalHeight);
};
var scrollRight = function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
};
var alignWhenIdle = function (delay) {
clearTimeout(timeout);
timeout = setTimeout(align, delay);
};
$(document).on('ready', function () {
reset();
scrollRight();
});
$(window).on('scroll', function () {
locked = true;
scrollRight();
});
$(window).on('mouseup', function (e) {
if (locked) {
align();
}
});
$(window).resize(function () {
locked = true;
reset();
scrollRight();
alignWhenIdle(300);
});
$(window).on('mousewheel', function (e) {
alignWhenIdle(300);
});
$(window).on("keyup", function (e) {
alignWhenIdle(300);
});
})(jQuery);
http://jsfiddle.net/ev3B8/
Any help is much appreciated,
Cheers

See http://jsfiddle.net/5T9Y8/
Scroll till the column 2 and see result...
In the method align I've added a callback:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
$(".animate").animate({ marginLeft: "200px" },300);
});
Works well, did you need exactly that?
EDIT
You should just check for some condition.
E.g. based on this solution Check if element is visible after scrolling you can build this:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
if (isScrolledIntoView(".animate")) $(".animate").animate({ marginLeft: "200px" },300);
});
See updated solution here http://jsfiddle.net/5T9Y8/1/
This is only one way, I'm really sure there is a way to do it even better. E.g. you can calculate the current elements which are shown and then just find the things only inside of them.

I tried using a callback but that fires a function every time the columns are aligned.
Use one method for functioning only once instead of on.