Refresh needed to actualize css/js

[leednl]

Hi Armin,
I encounter a problem when I navigate on the website I'm working on. It seems like some of the custom css/js only work after a refresh. When I navigate from a page to an other one (by clicking on menu links customized in html), some of the effects only supposed to be on the previous page remain on the new one. I have to refresh the new page i'm visiting to kind of "cancel" the effects from the previous page.

Do you know where this problem comes from? Is there a way to automatically refresh a page when you visit it?

I hope I have been clear enough :)
Lee xx

[arminunruh]

Post a link of your website where you experience the issue.
:)

[leednl]

http://leberg.de/ :)

• when you scroll down the homepage and then go to an other page (the color of the links becomes black again after a refresh)
• when you go from a page to the work page: the hover preview (on the thumbnail) only work after a refresh.

[arminunruh]

hey leednl, so for

"when you scroll down the homepage and then go to an other page (the color of the links becomes black again after a refresh)
"

which links?

"when you go from a page to the work page: the hover preview (on the thumbnail) only work after a refresh.
"

I only see an image with text underneath, I don't see a hover preview.

Maybe I understand it better if you can show me screenshots?

[leednl]

Yes sure!

So here is the homepage

when you scroll down the links become blue

and when you click on one of the link to go to an other page (here: about), the links remain blue.

I have to refresh the page to have them black again

I recorded a quick video so that you can see everything: https://we.tl/l4eWrUE5XT

Thanks :)

[arminunruh]

Ah now i understand. I think that's some custom code that you are using right?

Can you post your javascript code that you used here?

Edit:

Ah ok I found the code myself:

/// scroll

Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
                var scroll_pos = 0;
                var animation_begin_pos = 900; //where you want the animation to begin
                var animation_end_pos = 1200; //where you want the animation to stop
                jQuery(document).scroll(function() { 
                    scroll_pos = jQuery(this).scrollTop();
                    if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) {
                        jQuery("body.slug-home a").css('color', 'blue');
                    } else {
                        jQuery("body.slug-home a").css('color', 'black');
                    }
                });

});

///scroll end

var colors = ['#f6e9de', '#f0f0f1']
Frontend.GlobalEvents.on("newpageshown", function(){
	var ix = getRandomInt(0, colors.length);
	var color = colors[ix];
	jQuery('body').css('background-color', color);
});

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)

function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min)) + min;
}

/// thumbnail video hover

window.laytheme.on("newpageshown", function(){
    jQuery('body.slug-work video').each(function(){
        this.pause(); 
        });
        jQuery('body.slug-work video').on('mouseenter', function(){
           this.play(); 
        });
        jQuery('body.slug-work video').on('mouseleave', function(){
           this.pause(); 
    });
});

Did you code that by yourself? Maybe you can ask the person who coded this to fix the issues you're having. Because those issues are not directly lay theme related but related to your custom javascript.

I think you should try and improve the scrolling code a bit. On smaller screens the text never becomes blue. The "animation_begin_pos" number should be lower or should depend on window.innerHeight instead of a number.

Then when you go to any page, those blue links should be reset to be black. So on "nepageshown" just remove the css of these links.

[leednl]

@arminunruh Actually I asked you in an other topic how to animate videos on hover. Thanks for your help! I'm gonna try to fix the issues with js. :)

[arminunruh]

Haha ok!

Well for the videos, if you want all videos to autoplay on hover this would be easier:

jQuery(document).on('mouseenter', "video", function(){
      this.play(); 
});
jQuery(document).on('mouseleave', "video", function(){
       this.pause(); 
});

Use this code without the wrapping "window.laytheme.on("newpageshown", function(){"

[leednl]

@arminunruh thank you! it works now! (and sorry for my very late reply)