SOLVED Why is "animate" working the first time, but not on reload?


#1

I wonder why my div animation is working when I load from start and if I navigate to a subpage from my start page.
But if I go back to my start page and reload it, then my animation is not working?

This is what I have now.

    $$(document).on("click",".sorteraknapp", function(){
    	console.log("animate toolbar click sorteraknapp")
       
        //this is not working-------
    	$$(document).find('.toolbar')
        .animate(
            {
                'height': 90,
            }
        );
    	
        //this is working
    	setTimeout(function() { 
    	$$(document).find('.sorteraknapp').addClass('sorteraknapp-close');
    	$$(document).find('.sorteraknapp').removeClass('sorteraknapp');
    	
    	},500);
    });

    $$(document).on("click",".sorteraknapp-close", function(){
    	console.log("animate toolbar click sorteraknapp-close")
    
    //not working---
    $$(document).find('.toolbar')
        .animate(
            {
                'height': 44,
            }
        
        );

   //working----
    setTimeout(function() { 
    $$(document).find('.sorteraknapp-close').addClass('sorteraknapp');
    $$(document).find('.sorteraknapp').removeClass('sorteraknapp-close');

    },500);
    });

I have tested to have this code both insida and outside of page:init function.

ON A MOBIL LESS THEN 414px WIDE SCREEN(its a different menu on larger screens) - if you look at https://www.manmade.se/dumpen/ and click on “Sortera” in the top menu, you will see that the menu drops down and up again when you click.
And if you click on any of the products on the start page so it navigates to a new page and then click on “Sortera” again, it will work.

But if you load the page, then click on the left icon in the top menu - the “bar” icon, then it loads a new page the same way as if you click on a product, but if you then try to click on “Sortera” it will not animate the menu??

The same if you click on the “ÅTERVINN MERA” headline, then it is reloading the start page and the “Sortera” will not animate??

So why isnt it working all the time? It is adding-removing the.sorteraknapp and.sorteraknapp-close classes as it should, but clicking on them is not working!?

Any input really appreciated, thanks.


This is another-better version I guess, but it is still working the same?

$$(document).on("click",".sorteraknapp", function(){
	
	if ($$(document).find('.toolbar').height() < 50) {
	       $$(document).find('.toolbar').animate({'height': 90});
	}else{
	       $$(document).find('.toolbar').animate({'height': 44});
	}
	
});

So anyyyyy input really appreciated, because I can´t figure out why it is working from the beginning when I load the hole webpage, but it is not working when I reload a page!??

This is working, just had some code interfering with it :slight_smile: