Animation Run Once On Login - jQuery

Question

I'm trying to create an interface were if user goes to dashboard they are prompted with a log in screen, once logged in they are taken to there profile page. I have an animation that triggers a welcome box to pop down in the top right hand corner using jquery.

my theory is they can only be taken to the profile if logged in, and in php i have it so unless session is running the welcome box won't be displayed so once logged in and session is running and there redirected to profile.php and documents ready make welcome box bounce in down using animate.css then an if statement to say hey if has class inview dont run the animation. but if i use

    .removeClass("animated bounceInDown")

so the animation can't be ran again on refresh or page load or if they go to another page like blog etc it'll remove it before the animation can happen and then no point delaying it cause the animation will run. i can't seem to figure out a way to write this and i don't know indepth jquery or ajax.

    $(document).ready( function () {
        $(".user").addClass("inview animated bounceInDown");
        callmeman();
    });

    function callmeman(){
        if ($('.user').hasClass('inview')) {
            // dont run animation again
        }else {
            // do nothing
        }
     }

i'm sorry if i haven't explained this well as it's my first post on here. THANKS IN ADVANCE!

score 1 · Accepted Answer · edited May 23 '17 at 11:44

I'm sure you have to use Cookies. So if you're php session is on, you set cookie on server side. On front, you check the cookie in javascript and remove class if needed.

You could also not Display/echo the box if session...

EDIT : complete answer According to Wikipédia : "A cookie is a small piece of data sent from a website and stored in a user's web browser while the user is browsing that website. Every time the user loads the website, the browser sends the cookie back to the server to notify the website of the user's previous activity." So the steps are

User log in your website : set cookie (I will called this cookie "JustLogged")
User redirect after login : play welcome anymation once and unset JustLogged

Code sample for managing cookie in js (function take from here) :

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

Code sample for managing cookies in php (doc)

// create a cookie that will be deleted on browser closed
setcookie("JustLogged", 1);

So if we take the previous list :

Create cookie on log in :

setcookie("JustLogged", 1);
Read cookie in js on home page for example, and delete it when animation is complete

// JS

var justLoggedCookie = readCookie('JustLogged');
if(justLoggedCookie) {
    // play welcome animation
    $( "#welcomeBox" ).animate({
        opacity: 1,
        left: "+=50"
    }, 1000, function() {
        // Animation complete: delete cookie
        eraseCookie("JustLogged");
    });
}

That's it, animation will be run once, then cookie will me erased and so justLoggedCookie will be null, so animation will not be runing again.

Animation Run Once On Login - jQuery

1 Answers1