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");
}
});

jQuery animate on window scroll

I want to slid a div on window scroll to bottom. When document reach 800 (bottom) Div should scroll right 0 and less then 800 it should slid and hide.
Problem is when scrolling to bottom div is sliding and showing but again when scrolling to top it doesn't slid and hide.
This is my code
$(document).scroll(function () { // remove "$"
var s = $("#slidebox");
var y = $(this).scrollTop();
if (y > 800) {
s.animate({"right":"-450px"}, "slow");
} else if (y < 800) {
s.animate({"right":"0px"}, "slow");
}
});
Basically i want is to hide and show (with a slid effect) div on document scroll to bottom.
Check scrolling below jsfiddle.
jsfiddle

On one hand, user390....'s response is correct in that the height is calculated incorrectly.
On the other hand, the way animations work is that they queue up one after another, so sometimes the div doesn't slide in/away until everything else before it is done. Using .stop() fixes the issue.
var s = $("#slidebox");
$(document).scroll(function () { // remove "$"
var y = $(this).scrollTop() + $(window).height();
console.log(y);
if (y > 800) {
s.stop().animate({"right":"-450px"}, "slow");
} else {
s.stop().animate({"right":"0px"}, "slow");
}
});

Your problem is that the value you are using for your "Did I reach the bottom" if statement is wrong.
Here is the calculated value you should be using:
$(document).scroll(function () { // remove "$"
var s = $("#slidebox");
var y = $(this).scrollTop();
var bottom = jQuery(document).height() - jQuery(window).height();
if (y >= bottom) {
s.animate({"right":"-450px"}, "slow");
} else {
s.animate({"right":"0px"}, "slow");
}
});
Plus, I'd also recommand you to use a .stop(true, true) on your animated element before triggering the "animate" function if you don't want people to mess around with it.

dynamic margin based on jQuery window.width()

I have a little problem with a jQuery function. I need to add a margin to some element when the window.width is < 580px and i need to remove it when the window.width is larger. Here is the problem, the first part of the function work well, not the second.
var Wwidth= $(window).width();
if ( Wwidth < 582) {
$( window ).resize(function() {
var nWwidth=$( document ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
});
}
else {
$( window ).resize(function() {
$('.hub-item').css('margin-left','0px');
});
}
I have no mystakes in the console but the margin are not to 0.
Thanks u all!
EDIT :
Correct code :
$(window).resize(function() {
var Wwidth= $(this).width();
if (Wwidth < 582) {
var nWwidth=$( window ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
}
else {
$('.hub-item').css('margin-left','0px');
}
});
Thanks all!

You need to put your if statement within the $(window).resize() function, and recalculate Wwidth every time:
$(window).resize(function() {
var Wwidth = $(this).width();
if (Wwidth < 582) {
...
}
else {
...
}
});

how to change sticky menu when width is smaller than 644

Hello I have this sticky menu and I want to change it to default menu when window size is smaller than 644. how can I check all the time if the browser window is resized?
var menu = $('#header');
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut(100, function(){
$(this).removeClass('default').addClass('fixed').fadeIn(100);
$('#site-description').css({'display': 'none'});
$('#logo').css({'margin-top': '5px'});
});
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.removeClass('fixed').addClass('default');
$('#site-description').css({'display': 'block'});
$('#logo').removeAttr('style');
}
});

You can use:
$(window).resize(function(){
});

jquery responsive on resize not working

i want to check (on resize) the window width and then load a special part of a script. when the browser window is < 500px width i want to scroll to the top of the div (when clicking on a menu link) and when the browser window is > 500px i want to scroll to the vertical middle of the div when i click on a menu link. it somehow works but it's slow and buggy.
first i create the "resize" function
then i check the browser width
(function($){
// on load
$(window).resize(function(){
var current_width = $(window).width(); //check width
$('.go').click(function (e) {
if(current_width > 700){ // when min-width 700px than go to center of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2 // scroll to verticall middle of div
}, 200);
}
else if(current_width < 700){ // when max-width 700px than go to top of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top + 0 // scroll to top of div
}, 200);
}
});
});
})(jQuery);
when id do it with "document ready" everything works fine ... but "document resize" makes problems.
fiddle here
update - got it working this way:
$(".go").click(function(){
if ($(window).width() < 800) { // if window smaller than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - 0
}, 200);
}
if ($(window).width() > 800) { // if window bigger than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2
}, 200);
}
});

It would be better to attach the event handlers like this:
var resizeTimeout; //the timeout prevents triggering the resize event more than once
$(function () {
$(window).resize(function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resize, 500);
});
$('.go').click(function (e) {
});
});
function resize() {
if ($(window).width() > 700) {
} else {
}
}

Maybe a bad idea but you can try something like this in css:
#media screen and (min-width: 480px){
$("body").css({"position":"absolute", "top":"12px", "left":"12px"}); //Set your x and y
}
#media screen and (min-width: 768px){
$("body").css({"position":"absolute", "top":"22px", "left":"22px"}); //Set other stuff
}
No javascript needed :)
PS: NOT tested!