We Keep Coding

jQuery toggleClass doesn't fire work resizing browser?

I have an issue with some code. Basically on click of a div the class 'active-sort' should be added/removed (This class changes the position of .sort-by from the top). On page load it works great but for some reason the toggleClass doesn't always work when the browser is resized (sometimes it does, sometimes it doesn't).
I'm not great with this, so was hoping a new set of eyes might be able to instantly see what I'm doing wrong. Any help would be appreciated.
function toggleSortBy() {
var toggle = $('.sort-banner-row'),
sortBy = $('.sort-by');
if ($(window).width() > 1024) {
toggle.click(function(){
sortBy.toggleClass('active-sort');
});
} else {
// other code here for smaller devices
}
};
$(window).on('load resize', function() {
toggleSortBy();
});

it's possible you may not need the resize event since you're checking the window size already in the click handler
var toggle = $('.sort-banner-row'),
sortBy = $('.sort-by');
toggle.click(function(){
if ($(window).width() > 1024) {
sortBy.toggleClass('active-sort');
} else {
// other code here for smaller devices
}
});
but if you do you should debounce the resize event
//css-tricks.com/snippets/jquery/done-resizing-event
then you could do something like:
var toggle = $('.sort-banner-row'),
sortBy = $('.sort-by'),
isMobile = false;
toggle.click(function(){
if (isMobile) {
sortBy.toggleClass('active-sort');
} else {
// other code here for smaller devices
}
});
$(window).on('load resize', function() {
// don't forget to debounce you'll see why later on in your development.
isMobile = ($(window).width() > 1024) ? false : true;
});

Lag when calling a function on resize inside itself

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.

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

function triggers on window width but will not turn off if bigger than set width

Here is what I have now it will work but if window width is under 1024 it will still trigger even though it is only set to trigger if over 1024
$(function () {
$('#hamburger').click(function () {
$('div.burger_nav').slideToggle();
});
$(window).resize(function () {
if ($(window).width() < 1024) {
$('.nav_shown').hide();
$('div.footerdiv_2').hide();
$('div.hidden_nav').hide();
$('div.burger_btn').show();
$('#ft').removeClass('footerdiv_3').addClass('footer_img_clear');
} //end of if
else {
$(".nav_shown").show();
$('.footerdiv_2').show();
$('div.burger_btn').hide();
$('#ft').removeClass('footer_img_clear').addClass('footerdiv_3');
$(document).scroll(function () {
var headerShow = $(this).scrollTop();
if (headerShow > 200) {
$('div.hidden_nav').fadeIn();
$(".nav_shown").hide();
} else {
$('div.hidden_nav').fadeOut();
$(".nav_shown").show();
}
});
} //end of else
});
});

It looks like you want to modify the document when the window reaches a certain breakpoint, in this case 1024 pixels. This is known as responsive web design.
Instead of updating the screen every time on resize, it's useful to set a flag for triggering a breakpoint.
$(function() {
$('#hamburger').click(function(){
$('div.burger_nav').slideToggle();
});
var currentlySmall = false;
function update() {
if ($(window).width() < 1024 && !currentlySmall) {
currentlySmall = true;
console.log('Less than 1024');
$('.nav_shown').hide();
$('div.footerdiv_2').hide();
$('div.hidden_nav').hide();
$('div.burger_btn').show();
$('#ft').removeClass('footerdiv_3').addClass('footer_img_clear');
}
else if ($(window).width() >= 1024 && currentlySmall) {
currentlySmall = false;
console.log('More than 1024');
$(".nav_shown").show();
$('.footerdiv_2').show();
$('div.burger_btn').hide();
$('#ft').removeClass('footer_img_clear').addClass('footerdiv_3');
}
}
//Calling this in the else part above will bind a new scroll event each time
//Instead, if this should only happen when the screen is large, use the
//flag you created
$(document).scroll(function () {
if (!currentlySmall) {
var headerShow = $(this).scrollTop();
if (headerShow > 200) {
$('div.hidden_nav').fadeIn();
$(".nav_shown").hide();
} else {
$('div.hidden_nav').fadeOut();
$(".nav_shown").show();
}
}
});
$(window).resize(update);
update(); //Force initial calculation since resize won't be called when page loads
});
Now the changes you make in the above update() function will only occur when the screen sizes changes past that 1024 breakpoint instead of every time the screen is resized.
Fiddle: http://jsfiddle.net/25nfqxzk/1/
Edit
Expanding off blgt's comment, I don't believe you need to bind the scroll event in the if-else. It can be assigned outside and also use the same trigger flags.

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