Question

I have a simple animation on my rails site that pop’s a div (with a logo image inside) from behind a div using the ‘animate‘ function in Jquery, which works great!

However, I can’t figure out how to get it to run exactly once on the landing page, and then make the div stay put across every other page and on page reload. Every page load across the whole site runs the animation every time. I put the JQuery div that gets animated inside the application.html.erb file, so it’
s part of the header for the whole-site template (which explains why it’s getting rendered in every view).

I know I could just copy and paste the code into a partials and make separate CSS entries for how the logo would display on each page, but I’m trying to keep my code DRY.

Here’s my javascript:

$(document).ready(function() 
 {
    $('.logo .active-image').animate({
       opacity:1,          //set opacity
       marginTop: "-90px", //move the image 'up' 90px
       }, 5000);           //animate over 5 secs
 });

And the logo image div on the whole site template:

<div class="logo">
     <%= image_tag("../images/logo.png", :class => 'flying-image active-image') %>
</div>

So is there a ‘Rails-y”, DRY, way to do this using just jquery?

Answer 1

I see two possible solutions here. HTTP itself is stateless, but you need some state, e.g. “Is this the first page view of user X?”.

Now you can either store a flag in your user’s session, or store it in a separate cookie. The latter would only involve JavaScript.

Draft of a JavaScript/Cookie solution

if (!$.cookie('visited_before')) {
    $('.logo .active-image').animate({
        opacity:1,          //set opacity
        marginTop: "-90px", //move the image 'up' 90px
        }, 5000
    );
    $.cookie('visited_before', true);
}

That’s just an example, using a pseudo jQuery cookie function. There are probably enough plugins for cookie handling.