2

I have a welcome animation on my website file that is all contained in one CSS file. How can I have this CSS file load only once per session?

I am using Wordpress, and I have got the animation linked inside a header file which only loads on the homepage. I only want this CSS file to load once, so that when the user clicks back onto the homepage, the CSS file does not load.

I understand I will have to set a cookie but I'm not sure what the best way of doing this is. I hope someone can point me in the right direction, thank you

EDIT: Here is some code I have attempted, using jquery.cookie.js. My code is throwing the error: 

Uncaught TypeError: ("<link/>" , (intermediate value)(intermediate value)(intermediate value)).appendTo is not a function

Code -

jQuery(document).ready(function() {
    if (jQuery.cookie('noShowWelcome')){}
    else {
        jQuery(("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "http://le1dev.co.uk/pureretail/1/wp-content/themes/le1-web-package-a/library/css/header-animation.css"
}).appendTo("head"));
            jQuery.cookie('noShowWelcome', true);    
        };
    });
Sam Brown
  • 21
  • 2
  • @Cagy79 I think he means the css should load once per session and then should not show up again. So when I first visit the webpage the animation loads, but not if I visit it a second time in the same session. Completely unrelated. – Kaamil Jasani Jul 31 '17 at 08:54
  • That I agree with to a certain degree. Sam if you could post some code that you have already tried it would help. It may be slightly broad but I don't believe it is unclear. – Kaamil Jasani Jul 31 '17 at 08:57
  • You'd be better of sending appropriate expiry headers so that the browser only loads it once and you don't have to worry about how / when. Read about ExpiresByType in .htaccess – twicejr Jul 31 '17 at 09:16
  • @twicejr the question does not seem to be about caching, but about getting the effect only when the user visits the page for the first time. – CBroe Jul 31 '17 at 09:48
  • I know this isn't UX.SE, but... "welcome animations" will generally make people leave your site within the first two seconds, if you're lucky. It sucks, I know animations can be really awesome and cool, but... if the visitor can't get through to the content within a fraction of a second, chances are you'll lose them as they'll go find the information elsewhere. This is why full-page Flash "welcome screens" are dead. – Niet the Dark Absol Jul 31 '17 at 09:55

1 Answers1

0

Refer to this question and answer for setting session cookies using js, and this question for loading a CSS file using js.

You can combine these to check for a session cookie. If it doesn't exist, create one and load the CSS. If it does exist, do nothing.

Kaamil Jasani
  • 464
  • 5
  • 11
  • @twicejr I don't see why. Seems to me that this would work on any normal website. Please explain. Also why the downvote? Is it for the same reason? – Kaamil Jasani Jul 31 '17 at 09:17
  • I did not read correctly, and downvote is not mine. I removed my comment because I read over the part 'welcome animation'. Loading the file once was just the sole challenge I thought. – twicejr Jul 31 '17 at 09:17
  • 1
    Makes sense. I guess I shouldn't have assumed that you would be the one who down voted. But still, whoever it was, it would help if you said why you have down voted. – Kaamil Jasani Jul 31 '17 at 09:19