Lag when calling a function on resize inside itself - javascript

Is there a better/more straightforward way of doing this?
function moveNav(){
var navOffset = $(".nav-marker").offset().top;
$(window).scroll(function() {
var scrollOffset = $(document).scrollTop();
if( scrollOffset >= navOffset ){
$(".nav-bar").addClass("scroll-fixed");
} else{
$(".nav-bar").removeClass("scroll-fixed");
}
});
}
moveNav();
// call again on resize to recompute navOffset
$(window).resize(function() {
moveNav();
});
I want to use the moveNav() function again when the browser is resized but the way I'm currently doing it feels off. I feel like there's a way of moving the resize() function inside the moveNav() function but when I put it inside it, there's some lag happening when when I resize. You can see it happening here: https://jsfiddle.net/grj89t9b/2/
Is there a better way of doing this?

I would declare the variables first, and make a simpler function but then declare it both on $(window).resize() and $(document).scroll().
var navOffset, scrollOffset;
function moveNav(){
navOffset = $(".nav-marker").offset().top;
scrollOffset = $(document).scrollTop();
if( scrollOffset >= navOffset ){
$(".nav-bar").addClass("scroll-fixed");
} else {
$(".nav-bar").removeClass("scroll-fixed");
}
}
moveNav();
$(document).scroll(function() { moveNav(); });
$(window).resize(function() { moveNav(); });
and it works on your JSFiddle.

Related

$(window).width() if statement running when it shouldn't

Hey guys I am having an issue with $(window).width if statements in jQuery. For some reason my function is running even when the window width is smaller than 991 pixels however my if statement states that it should run if the window width is greater than 991.
function ctaFixTop() {
var mn = $("#new-car-offer-cta");
var offerHead = $('#new-car-offer-head');
mns = "new-car-offer-cta-active";
var hdr = 0;
var ctaHeight = $("#new-car-offer-cta").height();
$('.header-wrapper, #top-bar, #new-car-back, #new-car-offer-head').each(function() {
hdr += $(this).outerHeight();
});
if ($(window).width() > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
});
}
}
$(window).resize(ctaFixTop);
ctaFixTop();
As you can see the ctaFixTop function is being called twice, once on initial load and whenever the window is resized. When I initially load the page with a window width below 991px the function works how it should however if I then increase the windows size past 911px and size it back down under 911px the $(window).scroll function will be called even when it's wrapped in the if statement that states that it should only run if the window width is greater than 991.
Any idea why this might be happening as I have tried trouble shooting this and simply can't understand why the function is being called even with the if statement around it.
Thanks
That is because the scroll event is already attached to the window and you are not removing it. What you need to do is put the
if ($(window).width() > 991) {
inside the .scroll() method like this.
$(window).scroll(function() {
if ($(window).width() > 991) {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
}});

Fire multiple functions on resize events

I am trying to fire multiple functions when the window resizes. But only one function works at the time. Please correct this code.
function resize() {
var $containerWidth = $(window).width();
if ($containerWidth > 1140) {
//code...
}
else {
//code...
}
}
resize();
function resizepos() {
var topPosition = $('.redcus').offset().top;
$('.blackcus').css('top',(topPosition+40)+'px');
}
resizepos();
$(window).resize(function(){
resize();
resizepos();
});
Why don't you try the code like this :
function resize() {
var $containerWidth = $(window).width();
if ($containerWidth > 1140) {
//code...
}
else {
//code...
}
resizepos();
}
And try to change your function name when you calling it in jquery, ex "Allresize" and in the contents of Allresize function there is "resizepos" function. Don't use "resize" double, please check it again.
Sorry for the bad format, i can't handle it from my android.
I don't really use jQuery but edit this if I'm wrong:
$(window).on('resize', resize);
$(window).on('resize', resizepos);

How to check if browser window is fully resized or not?

I want to execute one function, after my window is fully resized.
window.resizeTo('792','115');
myFunction();
My question :
1.Does the myFunction() method will be called only after the window is fully resized ?
2.If yes mean no problem for me, else I want the below scenario ?
My need :
I need a pure Javascript solution.
if(windowIsFullyResized){
myFunction();
}else{
// wait for window resize and again call myFunction();
}
How can I achieve this?
Like it says here, you can do this :
I prefer to create an event:
$(window).bind('resizeEnd', function() {
//do something, window hasn't changed size in 500ms
});
Here is how you create it:
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
You could have this in a global javascript file somewhere.
You can do like this maybe:
$( window ).resize(function() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if(windowWidth == 792 && windowHeight == 115) myFUnction();
});

If window is less than 768px wide, don't fire function

If the window width on page load AND resize is less than 768px, I don't want to fire the showCover() function. With the below code, even when the window is less than 768px, it's still being fired.
function ipsThemeViewer() {
jQuery(window).resize(function() {
if ( jQuery(window).width() < 768 ) return false;
showCover();
}).resize();
}
function showCover() {
jQuery('#ipsThemeViewerScreen').hover(function () {
var t = jQuery(this);
jQuery('.cover').stop().fadeIn('fast');
}, function () {
var t = jQuery(this);
jQuery('.cover').stop().fadeOut('fast');
});
}
I would go the other way around:
jQuery(function($) { // DOM READY AND SECURE $ ALIAS
var winIsSmall;
function testWinSize(){
winIsSmall= $(window).width() < 768; // BOOLEAN
}
$(window).on("load resize", testWinSize);
$('#ipsThemeViewerScreen').hover(function () {
if(winIsSmall){
// need something here?
}else{
$('.cover').stop().fadeToggle('fast');
}
});
});

Javascript/Jquery rotating image that re-sizes when window is resized

i can not get this to work, Please help! . it's a mess. What i am trying to do is, make this image blur out and blur a new one in ever few seconds, and if the window size is greater than a defined size, it will use a larger image. Also it needs to check if the window has been re-sized so i can change the image on the go. so i will need something like this:
$(window).resize(function(){
change size
});
this is the main bit of code that i'm having troubles with:
$(document).ready(function() {
var index = 1;
function rotateImage()
{
$('.dp1').fadeOut('slow', function()
{
if($(window).width() > 1312 ) {
$('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '.jpg)'});
}
else {
$('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '_big.jpg)'});
}
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 4000);
});
});
First, you only need one .ready() method. :)
To address your question, you can take advantage of .resize() to calculate the window width. Just start with a variable that contains the width, and then recalculate on resize. For example:
$(document).ready(function () {
var index = 1,
width = $(window).width(); // SET THE WIDTH ON DOCUMENT READY
function rotateImage () {
//...
if(width > 1312){ // USE THE "width" variable here in this comparison
//...
}
//SET THE "width" variable on window resize
$(window).resize(function(){
width = $(this).width();
//... RESIZE OR CHANGE OUT IMAGES HERE...
});
});

Categories