We Keep Coding

jQuery doesn't execute when window size change

I just write a script to auto positioning an element on my page.
$(document).ready(function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll < 180) {
$(".header-bottom").removeClass("scroll-menu");
if ($(window).width() > 991) {
$(".header_user_top").css("position", "absolute");
$(".header_user_top").css("top", "initial");
$(".header_user_top").css("right", "60px");
$(".header_user_top").css("z-index", "1");
}
} else {
$(".header-bottom").addClass("scroll-menu");
if ($(window).width() > 991) {
var rightContainer = ($(window).width() - ($('#header div.header-bottom div.container').offset().left + $('#header div.header-bottom div.container').outerWidth()));
$(".header_user_top").css("position", "fixed");
$(".header_user_top").css("top", "-22px");
$(".header_user_top").css("right", rightContainer+60+"px");
$(".header_user_top").css("z-index", "99");
}
}
});
});
It's working but if I resize browser window the script doesn't reload.
If I refresh the page it's working.
I have add window.onresize = function(){ location.reload(); }to my script to fix this problem but I'm looking for a better solution.
Any idea?

Use on function to call multiple event:
$(window).on("load resize scroll",function(e){
// do something
}

Call function which is handling size on windows.resize also
function handleSize(){
// You code to handle size
}
window.resize=handleSize();

Detect if page is scrolled on document load

I'm using the scrollTop to detect if the users scrolls then fadeIn an element:
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
});
It works well if the user loads the page and then scroll, but if the user is already below the 700px and reload or goes back to the same page the element doesn't fadeIn automatically on document load. It seems that it is not detecting the page is already scrolled.
Any idea what could be the problem with my code?

Just do the test when document is ready
It's better to create a function
function checkScroll(){
if ($(window).scrollTop() >= 700) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}
$(document).ready(function() {
checkScroll();
$(window).scroll(checkScroll);
});

Call this way to your function
Put this line end of your document ready.
$(window).scroll();

Simply trigger scroll after the delegation.
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}).scroll();
//^^^^^^ trigger scroll.
});

How to stop a javascript snippet in a PHP page from loading on devices with smaller screen resolutions

I have a javascript snippet loading on a WordPress page, so the language is PHP.
It looks like this:
(function($) {
$(document).ready(function() {
var primaryNav = $('body.home').find('nav.nav-primary');
primaryNav.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
primaryNav.fadeIn();
} else {
primaryNav.fadeOut();
}
});
});
})(jQuery);
The problem is that everything works great, responsively, on larger resolutions all the way down to 688px in width.
When I go down to 687 pixels in width, the menu doesn't show when scrolling down, and that's a problem.
Is there any way to basically say:
"do not load this javascript snippet at a device resolution of 687 pixels width or less"?
Any guidance in helping me with this on the NCDP site would be greatly appreciated!
Update:
When I incorporate Ianaya's snippet on the NCDP:
<script type="text/javascript">
if (window.screen.availWidth > 687) {
(function($) {
$(document).ready(function() {
var primaryNav = $('body.home').find('nav.nav-primary');
primaryNav.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
primaryNav.fadeIn();
}
else {
primaryNav.fadeOut();
}
});
});
})(jQuery);
}
The menu doesn't load when scrolling down 150 pixels, when that's when the menu should show -- or, if I can hide this javascript on devices less than 688 pixels, just show the menu always.

You can access window.screen object to detect the device resolution:
if (window.screen.availWidth > 687) {
(function($) {
$(document).ready(function() {
var primaryNav = $('body.home').find('nav.nav-primary');
primaryNav.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
primaryNav.fadeIn();
}
else {
primaryNav.fadeOut();
}
});
});
})(jQuery);
}

Show A Sticky Bar Until User Scrolls Down to a <div>

I want to add a sticky bar at bottom of my page and I want it to fade out once user reaches to a div by scrolling and again fade in once user scrolls up and that div is not on screen anymore.
And it shouldn't show if user screen is big enough to show that div normally.
Please guys help me...
I am currently using this code:-
<script type="text/javascript">
//<![CDATA[
$(window).bind("scroll", function() {
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").fadeIn();
checkOffset();
} else {
$("#bottbar").stop().fadeOut();
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'absolute');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'fixed'); // restore when you scroll up
}
}
//]]>
</script>
but it is not working as expected on my site bookaire.com
I am not sure whats the problem is with this code, it doesn't show the bar when site loads, it show only when user scrolls a little and when it reaches the stopdiv instead of hiding the bar it get stuck at center of screen.

Whew! that took me a while since I'm still a beginner with javascript but I think I got it.
Note: the bar is getting stuck in the middle on certain screen size because you are only changing the position from fixed to absolute in your javascript. instead, change the display from block to hidden.Also note that the css for #bottbar should already be display:block
I believe your requirements are:
1. it shouldn't show if user screen is big enough to show that div normally
2. to fade out once user reaches to a div by scrolling
See: JSFIDDLE
$(document).ready(function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
else {
$("#bottbar").css('display', 'block');
}
});
$(window).bind("scroll", function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").css('display', 'block');
checkOffset();
}
else {
$("#bottbar").css('display', 'none');
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'none');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'block'); // restore when you scroll up
}
}

Unload jquery function if window resize

I try to unload function if browser window less than 944px. I start to write this
$(window).resize(function() {
if ($(window).width() >= '944') {
$(window).load(function() {
$('#slider').nivoSlider();
});
} else {
alert($(window).width());
if ($(window).width() <= '944') {
$(window).unload(function() {
$('#slider').nivoSlider();
});
}
}
});
but i stuck. I want if the user enters, verify resolution and if more than 944px to load jquery function, however if browser is resize or less resolution than 944px, function will be unload.

i have a different solution for your problem; you can prepare a new slider mask (just like slider but without nivoSlider functions) for <944px window width, when browser width <944px niveSlider will be hide and your mask will be seen.
check it out:
$(window).resize(function() {
windowWidth = $(this).width();//you need to use this for changable values
if ( windowWidth > 943) {
$('#sliderMask').hide();
$('#slider').show();
$(window).load(function() {
$('#slider').nivoSlider();
});
} else if ( windowWidth < 944) {
$('#slider').hide();// hide your nivoSlider
$('#sliderMask').show();// show your basic slider mask
}
});
please note that: you need to use $(this) to get current value.
here is jsfiddle example for you; check the console log from your browser's developer panel