Remove class from nav after first loading

Question

I have a website based on top of a single page that changes its content dynamically. The container of the content is a div with a few javascript and css animation (I gave my nav a class "animated") and I want to remove this class (so it won't be animated anymore) after the first time.

Is there any way to remove (after the first page load) or add (during the first page load) this class? I have already tried with the standard query code but when I click on a link that changes the content of my div container, the animations are all restarted. Here is my html:

<nav class="main animated fadeInRight"><?php include('template/nav/main.php'); ?></nav>

I would like to remove the animated class with something like that but for every new page load.

<script type="text/javascript">
    $(document).ready(function() {
        $('nav').removeClass("animated");
    });
</script>

This doesn't work because when I click a link to change my content, it also reloads the page and start all the animations again.

Thanks a lot!

Answer 1

It's tough to say without looking at all of your code, but I would probably put a URL parameter on the end of your nav links. You mentioned that clicking a link to change your content will also reload your page, right?

Well, on all of the links in your nav, put a parameter like this:

<a href="pageName.php?firstLoad=N">Page Name</a>

Then at the top of all your pages where you include the nav:

<?php 
    if($_GET["firstLoad"] == "N") {  
        echo '<nav class="main fadeInRight">';
        include('template/nav/main.php');
        echo '</nav>';
    } 
    else {
        echo '<nav class="main animated fadeInRight">';
        include('template/nav/main.php');
        echo '</nav>';
    }
?>

Answer 2

You are missing couple of ''

<script type="text/javascript">
    $(document).ready(function() {
        $('nav').removeClass("animated");
    });
</script>

or even precise

<script type="text/javascript">
    $(document).ready(function() {
        $('nav[class="main"]').removeClass("animated");
    });
</script>

Answer 3

You should put the nav in quotes, like

$("nav")

Otherwise it points to a non-existent variable

Answer 4

Each page reload starts your app completely anew.

If you'd like to prevent things from being animated during after a page refresh,

you could add a parameter to your string - ie /?animation=true

and look for it within your PHP file

<nav class="main <?php if($_GET['animation'] == true) {echo animated." ";} ?> fadeInRight"><?php include('template/nav/main.php'); ?></nav>

Then just remove it for all other links.

Unless i didn't get you right, so in that case- just fix your typos in the provided script:

$().ready(function() {
    $("nav").removeClass("animated");
});

Answer 5

You can use web storage.

When the page first load you will remove the class from nav and later do some checking whether you already removed the class or not.

When the page loads you can do something like this:

<script>
    if(localStorage.getItem("ClassRemoved") !== "true") {
         // remove the class
         localStorage.setItem("ClassRemoved", "true");
    }
</script>

Answer 6

There are many solutions as this is open to possibilities. But this link will probably help you in creating a cookie and based on its life time, you may wish to animate or not.