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

Chrome fires scroll event

There is simple code
window.onload = function () {
window.addEventListener('scroll', function () {
alert('asd');
});
};
when you refresh scrolled page, in firefox - you wont see alert, but in chrome SOMETIMES, it fires alert, sometimes its not. Same page, same scroll, just multiple refreshes.
Question is how to avoid triggering scroll event on load in chrome after refresh?
Problem is, DOMContentLoaded can solve this, but i have block animation with coordinates on scroll (scroll-then-fixed), and with DOMContentLoaded coordinates are wrong.
p.s. No $##$ jQuery allowed.
p.s.2.
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
is not fix, but workaround too.

use this:
var tFn = function (){
alert();
}
document.onreadystatechange = function (){
if ( document.readyState == ("complete") ) {
setTimeout(function(){
window.onscroll = tFn;
},100);
}
}

You could track the initial scroll with a flag and detect whether the page did not actually scroll:
window.onload = function () {
var isFirstTime = true;
window.addEventListener('scroll', function () {
if (isFirstTime) {
isFirstTime = false;
if (window.scrollY === 0) return;
}
alert('asd');
});
};

Try below code
<script>
window.onscroll = function() {
console.log('Scrolling');
};
</script>

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.

JS set style for size function

My JS function "set style for size" will not call the bodysmall CSS style sheet no mater how small I make the screen width (screen.width <=480).
However the function will call the bodysmall CSS style sheet if I reverse the function.
(screen.width >=480)
Which proves to me the JS function is working. I suspect there is something wrong with my event handler.
I am not familiar with JavaScript yet so any help would be greatly appreciated.
this is my code below.
<script type="text/javascript">
function setStyleForSize() {
if (screen.width <= 481) {
document.body.className = "bodySmall";
}
else {
document.body.className = "bodyNormal";
}
}
function addEventHandler(oNode, evt, oFunc) {
if (typeof(window.event) != "undefined")
oNode.attachEvent("on"+evt, oFunc);
else
oNode.addEventListener(evt, oFunc, true);
}
addEventHandler(window, "load", function() { setStyleForSize(); } );
addEventHandler(window, "resize", function() { setStyleForSize(); } );
</script>

Try this one instead of yours:
function addEventHandler(oNode, evt, oFunc) {
if ( document.addEventListener ) {
oNode.addEventListener(evt, oFunc, false);
return oFunc;
} else if ( document.attachEvent ) {
var bound = function() {
return fn.apply(oNode, arguments);
};
oNode.attachEvent("on" + evt, bound);
return bound;
}
}
NOTE: You can't specify which event handler has to be used with typeof(window.event), so your if statement is incorrect
See the DEMO

screen.width is never changes, use window.innerWidth instead:
function setStyleForSize() {
if (window.innerWidth <= 481) {
document.body.className = "bodySmall";
}
else {
document.body.className = "bodyNormal";
}
}