CODEWITHSUNDEEP
jqueryanimation
AlesSvetina
AlesSvetina

Reputation: 463

jQuery animation only on page loading

I have a site where I animate the background when I load the page. Each of my page has this structure:

<?php require 'Top.php'; ?>
<!--Page content-->
<?php require 'Bottom.php'; ?>

The Top.php looks like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script src="js/animate.js"></script>

<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content">
    <div id="net">
        <div id="net-image"></div>
        <div id="lines"></div>
        <div id="logo"><h1>AVBELJ</h1><h2>PEČARSTVO</h2></div>
        <div class="square" id="st1"></div>
        <div class="square" id="st2"></div>
        <div class="square" id="st3"></div>
        <div class="square" id="st4"></div>
        <div class="square" id="st5"></div>
        <div class="square" id="st6"></div>
        <div class="square" id="st7"></div>
        <div class="square" id="st8"></div>
        <div class="square" id="st9"></div>
        <div class="square" id="st10"></div>
        <div class="square" id="st11"></div>
        <div class="square" id="st12"></div>
        <div class="square" id="st13"></div>


        <!--<img draggable="true" id="snowman" src="images/temenKvadrat.png" alt="snowman" style="position: absolute; left: 50px; top: 120px; z-index: 200;">-->


        <nav id="menu">
            <ul id="mainlevel">
                <li><a href="about.php"><img src="images/about.png" border="0" alt="O NAS"></a></li>
                <li><a href="items.php"><img src="images/items.png" border="0" alt="IZDELKI"></a></li>
                <li><a href="gallery.php"><img src="images/gallery.png" border="0" alt="GALERIJA"></a></li>
                <li><a href="references.php"><img src="images/references.png" border="0" alt="REFERENCE"></a></li>
                <li><a href="contact.php"><img src="images/contact.png" border="0" alt="KONTAKT"></a></li>
            </ul>
        </nav>

and animate.js starts with window.load:

$(window).load(function() {
    $("#lines").slideDown(2500);
    $('#net-image').delay(2000).fadeIn(1000);
    $("#logo").delay(3000).animate({left: "0px"}, 2000);
    $(".square").delay(3000).show("scale",{}, 1000);
})

My question is, how can I make the animation happen only when I first load the page. Now it animates every time a new menu item is clicked. How can I change it so when a menu item is clicked, the animation doesn't happen.

Thank you very much for your help!

Upvotes: 0

Views: 2269

Answers (3)

Tim
Tim

Reputation: 5681

Use:

<?php
if (!isset($_COOKIE['first_time']))
{
    setcookie("first_time", "no");
?>
<script>// Your JavaScript here </script>
<?php
}
?>

The first line checks if the '"first_time"' field is set in the associative array named '$_COOKIE' (which represents ofcourse the cookie). If it isn't set it will be the first time the user requests your page. So by setting the cookie you will prevent them from running the script again.

Upvotes: 1

nietonfir
nietonfir

Reputation: 4881

You'll need to set a cookie or only include the animation script on your start page.

[edit] As for the cookie, you simply set it when you visit the page, eg. in your Top.php file:

<?php
if (!isset($_COOKIE["a_meaningful_name_for_the_animation"]):
    setcookie("a_meaningful_name_for_the_animation", true);
?>
    <script src="js/animate.js"></script>
<?php endif; ?>

If you already use a session, it would be the same logic storing the value in $_SESSION.

Upvotes: 1

jfriend00
jfriend00

Reputation: 707436

If you only want the animation to happen on your top level page and on no other pages on your site, then you have these options:

  1. Only include the code for the animation on the top level page.
  2. Have the code check to see if it's on the top level page (it can check window.location.pathname) and only initiate the animation if the current URL is the top level of your domain (e.g. the homepage and not a page that your menu points to).

If you only want the animation to occur when the user first arrives on your site (on any page), then you can either set a cookie or set a value in LocalStorage once you've done the animation once and then check that value in subsequent pages so you won't show the animation again. You can control the expiration of the cookie or set a last visited value in the LocalStorage to determine when you animate again.

Upvotes: 2

Related Questions