Clever Geek Handbook

Trying to remove this code without having to put it on a separate page

My index.html page has a fantastic animation to start with essentially this code below ...

 $(document).ready(function() {
     setTimeout(function() {
       $("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow"); 
       $("#wrapper").unwrap();
    }, 11000);

 });

..... so once this code runs for 11 seconds the whole thing is unpacked, which is great ... The problem is I have a tag to go back to the index page at any time and I don't want people have to wait for the intro animation to run before getting to the home page every time ...

I won't accept any answer that says "Animate on a separate page" - the code must be on the index page itself.

I was hoping there is some jquery that will remove the code until the browser page is refreshed, something like this .. Really appreciate any help here.

EDIT - get some initial feedback that this is unclear ... in a step for ...

  • User navigates to index.html
  • the above code starts and lasts 11 seconds.
  • then it unpacks and disappears.
  • While the user is using the site, he clicks on the "home" logo.
  • this brings people back to index.html page
  • Unfortunately they wait 11 seconds each time and I want this to stop unless they refresh the browser or something.
+3


source to share


4 answers


Set a cookie the first time users wait 11 seconds

Can use https://github.com/carhartl/jquery-cookie or native javascript code.



Also you can use local var or url request

$(document).ready(function() {
     if ($.cookie("index_viewed") == 1) {
       return;
     } else {
       setTimeout(function() {
         $("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow"); 
         $("#wrapper").unwrap();
         $.cookie("index_viewed", 1);
       }, 11000);
     }
 });
+1


source


You can use something like localStorage

or cookies on your server side for this.

Local storage example:

$(document).ready(function() {
  if( !window.localStorage || !window.localStorage.getItem('hpAnim') ) {
    setTimeout(function() {
      $("#loader-wrapper .loader-section, #textbit, #logo, #wrapper").hide("slow"); 
      $("#wrapper").unwrap();
    }, 11000);
    if( window.localStorage ) {
      window.localStorage.setItem('hpAnim', true)
    }
  }
} );

So now (in IE8 +) the second and future pageloads won't trigger animations.



On the other hand, if you have a JavaScript single page app and you only want it to rerun after the page has been refreshed (as per the comments on the question), you can skip the local storage and just set a global variable on windows:

window.hasSeenAnimation = true

And then check this condition before rerunning the animation. After refreshing the page, this variable will disappear.

+4


source


You can set a variable $_GET

and then check that. If it's there, it should be an internal link, so don't load the animation:

<a href="http://yoursite.com/?noAnim">Home</a>
<?php
if (!isset($_GET['noAnim']))
{
    ?>
    <script>
    // your animation script goes here....
    </script>
    <?php
}
?>
0


source


Assuming you want this animation to run on "launch" (if specified directly), you can check the tab history count:

history.length

This will return a value above 1 only if navigation was done on the tab (will be indexed from any other page). This is not a perfect solution:

  • Browser issues (some return 0, others 1)
  • Each navigation on that tab will lead to a story, so if you go to your website after checking any other page, the story will return a value that is higher than the original. (you can also check document.referrer to ease this problem).

If you cannot afford to skip the animation on these terms, then you should persist with the animation already running and you should aim for local storage, like (as mentioned earlier) http://www.w3schools.com/html/html5_webstorage .asp

0


source






More articles:


All Articles