0

I have a home template with a header, footer and a left sidebar.

<?php get_header(); ?>
<div class="content">
    <?php get_sidebar('left'); ?>
    <div class="middlebar">
        this is the main content
    </div>
</div>
<?php get_footer(); ?>

After a click on one of the multiple options of the menu, the page template is loaded which has an additional right sidebar.

<?php get_header(); ?>
<div class="content">
    <?php get_sidebar('left'); ?>

    <div class="middlebar">
        pagecontent
    </div>
    <?php get_sidebar('right'); ?>
</div>

<?php get_footer(); ?>

I animated this sidebar, that it slides in after the page is loaded.

jQuery(window).ready(function($){
    $("#sidebarRight").animate({right: '0px'});
});

My problem now is that the animation is played on every click on one of the menu points. So after a click on a link, the sidebar disappears only to reappear again. I want that the animation is just played once when the user leaves the home template and enters the page template (by clicking one of the menu points) and not during switching between the different pages.

My first idea was to change the middlebar div with every click. So that not the whole page template is reloaded but just the new content is loaded and inserted in the div. A positive side effect would be that fewer data has to be loaded, but I was not able to prevent the multiple loading of the sidebar.

I also tried to set cookies, but that worked neither.

How can I load the sidebar only at the first click, so that the animation is also played just once.

2

you can write the script with a conditions

<?php is_front_page(){ ?>
<script>
jQuery(window).ready(function($){
    $("#sidebarRight").animate({right: '0px'});
});
</script>
<?php } ?>

alternatively you can set the cookie or localstorage that the animation has been completed

<script>
    if(!localStorage.getItem("animated")){ // check if the animated is set if not set do the animation
       jQuery(window).ready(function($){
        jQuery("#sidebarRight").animate({right: '0px'});
        localStorage.setItem("animated", "yes"); // after comleting the animation set the animated so that animation does not happen again
    });
}
    </script>
| improve this answer | |
  • Thank you, I got it working with a combination of both. First I check for the page and if yes I set the cookie. The only "not so cool" thing is that I have to write the js directly in my php templates and I'm not able to make these functions in my js files. – theoretisch Oct 11 '17 at 19:50
  • 1
    its not necessary to write the js directly in your php you can simply enqueue a js file in you functions.php with the condition and write the JavaScript in separate file – Taj Khan Oct 12 '17 at 7:28
  • Yes I know, but is it recommendable to make a separate js file just for such a small amount of code? If I have multiple different js functions depending on php I have to make a js file for each of them. – theoretisch Oct 12 '17 at 9:28
  • in that case instead of hardcoding the scripts directly into the php files i will suggest you to use the filter wp_footer and add the script based on the condition.. so you dont have to repeat and you can even pass the php variable into the javascript functions in that case. – Taj Khan Oct 12 '17 at 10:05
1

If you want a site that have a "state", you will need to develop the theme to produce a sort of "One Page Application" in which the browser basically never reload pages, but is doing all updates via AJAX.

Anything else means a full reload of the page and in that case the page will "blink" in any case so not sure of the value of eliminating the animation, but you can use a session cookie to keep a value indicating that the animation was done and check it before doing it again.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.