Allow function, in a function, to be called once only

[pr0c3ss]

I’m in bit of a pickle here…its probably so simple, but I’ve played around with it for so long now.

I have a nav menu that gets added classes at below 600px. This changes the menu to a slide in on toggle menu. it will add and remove the classes below and above 600px respectively. Also some changes had to be made to accommodate a sticky header function.

The problem is if the browser is loaded above 600px, and shrank to below 600px, the jpushmenu() function doesnt fire (I assume)… if browser is loaded below 600px, made bigger, smaller, bigger and so on the toggle functions fine… its just starting above 600px and going down is where the problem lies

<script>
jQuery(document).ready(function($) {
$('.toggle-menu').jPushMenu();
});
</script>

the .toggle menu class is added in a checkWidth function

$(document).ready(function() {

function checkWidth() {
    var windowSize = $(window).width();
	var main_nav = $('#nav');
	var slide_in_menu = $('.cbp-spmenu-vertical');
	var stiky_header = $('#hdr-sticky');

document.location.href = "#top"; 
	
	
    if (windowSize < 581 && !$('#nav').hasClass("cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left")){
        $('#nav').addClass("cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left");
		$('#logo-c').addClass("toggle-menu menu-left");
		main_nav.css({"margin-top": "98px"});
		console.log('classes added');
		console.log(windowSize);
		console.log('push in 1st event');
	    }

	  		
    else if (windowSize >= 581 && $('#nav').hasClass("cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left")){
		$('#nav').removeClass("cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left");
		$('#logo-c').removeClass("toggle-menu menu-left");
		main_nav.css({"margin-top": "0px"});
		scroll = $(window).scrollTop();
		console.log('removed 1st event');
		console.log(windowSize);
        }

}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

});

at this point, I know when the browser is shrank, the classes are getting added, but there’s no functionality of the toggle. Like the event has loaded before the $(‘.toggle-menu’).jPushMenu(); function has…

If I put $(‘.toggle-menu’).jPushMenu(); in the first if statement, itll fire once (the first time) and after it wont.
I’ve tried firing from the if statement with a loop counting how many times in the function (couldnt get loop to count times in function oh) If I can somehow make it fire once in loop, itll be fine then (I think).

Or if anyone has a better solution, i’m all ears… kinda new in JS, so it’;s probably something simple =/

Help mucho appreciated

[pr0c3ss]

and if I include ^ script after declaring the function like so…

<script>
jQuery(document).ready(function($) {
$('.toggle-menu').jPushMenu();
});
</script>

<script src="js/main.js"></script>

starting from above 600px and going to below 600px functions fine (ONCE!).

But the opposite also goes wrong. below 600px starts fine, if I go above and then back below it doesnt fire again =(

[pr0c3ss]

This is done now. I can’t edit previous posts to say, so sorry if youve read this far

Turns out I was calling the function 1st time without the needed classes aded, so changed the call to

<script>
jQuery(document).ready(function($) {
$('#logo-c').addClass("toggle-menu menu-left");
$('.toggle-menu').jPushMenu();
});
</script>

[PaulOB]

It looks a little like you are using JS when css media queries could have done the job (or most of the job).

In most cases you don’t need to add classes to make a menu change you just change the existing styles via media queries and avoid slowing the page down checking for window resize all the time.

You usually just need js to toggle the menu on and off but not to detect width and change styles.

[pr0c3ss]

Yeah good spot. I can put the margin changes into media queries…only these 2 oh?
main_nav.css/#nav …

next step for this is to remove the navigations jq hover function below 600px and apply a onclick/touch then just align the ul/li (hopefully)