Javascript function needs page to refresh before it works

Question

I have this code:

<script>
  function scaleDown() {
 
    $('.work > figure').removeClass('current').addClass('not-current');
    $('nav > ul > li').removeClass('current-li');
 
}
 
function show(category) {
 
    scaleDown();
 
    $('#' + category).addClass('current-li');
    $('.' + category).removeClass('not-current');
    $('.' + category).addClass('current');
 
    if (category == "all") {
        $('nav > ul > li').removeClass('current-li');
        $('#all').addClass('current-li');
        $('.work > figure').removeClass('current, not-current');
    }
 
}
 
$(document).ready(function(){
 
    $('#all').addClass('current-li');
 
    $("nav > ul > li").click(function(){
        show(this.id);
    });
 
});
</script>

I have inserted it on this page "artissidou" and it's purpose is to filter the displayed images with animation. If I try to navigate to this page via the "contact us" page for example, the code doesn't work unless I refresh the page.

Is there a way to have the code work normally regardless of where I'm navigating from? I am a complete noob with js so please break down the steps for me.

Have you tried this link [https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load](https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — Rob, Apr 06 '17 at 19:12
Is it possible that you have an active, interfering plugin such as noscript? — Psi, Apr 06 '17 at 19:15
@Psi I doubt it. On that page the only other plugin I have is a back-to-top plugin. — Robin Olisa, Apr 07 '17 at 20:00
@Rob I tried `document.onload` and the code didn't execute at all then I tried `window.onload` which gave me the exact same problem I'm dealing with. I'm convinced my problem is due to interaction between internal pages. Perhaps there is a code I must insert on all pages? — Robin Olisa, Apr 07 '17 at 20:38
@Psi I've tried multiple browsers already. It's the same thing. — Robin Olisa, Apr 07 '17 at 21:00

score 0 · Answer 1 · answered Apr 06 '17 at 19:35

0

Because the

$(document).ready

callback-function in index-file is only invoked when you are loading the 'works-page'. Please try to move the content of the callback-function to a non anonymous-function and call it after loading the content of the 'works-page'

answered Apr 06 '17 at 19:35

ratfury

203
2
9

Would moving it to the footer of the page help? – Robin Olisa Apr 07 '17 at 20:06

score 0 · Answer 2 · answered Apr 06 '17 at 19:56

I would say this issue stems from the images and other Document Objects loading fully after the JQuery has already fired the .ready().

You could try:

$(window).load(function(){
  //code here
});

As the .load fires after the Document Objects have been loaded vs. the pre-mature firing of .ready(), or rather after the DOM is "ready", not all the image resources.

You could also attempt to put a timer inside of the .ready() function like so to attempt to pause the necessary JS until all your dependent images and such load:

setTimeout(function(){ 
    alert("Hello World!"); 
}, 3000);// 3 Seconds

I tried the first one and the filter wasn't working at all. The second didn't change anything except create dialog boxes. On refreshing the page it worked fine but after navigating back from the "contact us" page the code couldn't execute. — Robin Olisa, Apr 07 '17 at 19:57

Javascript function needs page to refresh before it works

2 Answers2