Streaming live at 10am (PST)

Show Splash Once Per Session... Jquery + Simple Script Help


#1

Hi There,

I'm trying to implement this seemingly simple script to show a 2 second splash screen upon load only once per session.

Here is the original article

I can't figure out what I'm doing wrong. Is there something I'm missing in terms of how jQuery is integrated in Webflow that won't allow this script to run as is? Syntax error? Am I removing important bits of the script below?

I have a div with an id of splash setup in WF... So, I feel like I have this right but I just can't seem to get it to work.

<script>
jQuery(document).ready(function($){
 
if (sessionStorage.getItem('splash') !== 'true') {
$('body').append('<div id="splash"></div>')
sessionStorage.setItem('splash','true');
}
 
});
</script>

And for comparison... Here is the original script on codepen from the article above... It has a couple of extra bits of code I have removed as they were there simply for "proof of concept" to show the once-per-session functionality, with buttons you could toggle to show that the script actually works.

jQuery(document).ready(function($){
 
if (sessionStorage.getItem('advertOnce') !== 'true') {
$('body').append('<div id="advert-once"><a href="http://www.html5andbeyond.com/session-storage-display-popup-advert/" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/h5ab-logo.png" border="0" alt="banner" /></a><div class="advert-button"></div></div>')
sessionStorage.setItem('advertOnce','true');
}
 
$('#advert-once .advert-button').on('click',function(){
$('#advert-once').hide();
});
  
$('#reset-session').on('click',function(){
sessionStorage.setItem('advertOnce','');
});
 
});

Appreciate any help in advance!!! Thanks for your time.


#2

Okay, so after messing with it a bit today I have it working with a combination of setting my splash container to display none & running the script below.

Published Site: http://dev-highlands.webflow.io/
Read Only Link: https://preview.webflow.com/preview/dev-highlands?preview=28be09c8fa0ea0c380492379905c89bc

Problem: The only issue now is I see a quick flash of the homepage before the splash screen shows. Anybody have a better way to approach the code?

<script>
jQuery(document).ready(function($){
    
if (sessionStorage.getItem('splash') !== 'true') {
$('.splash_section').show()
sessionStorage.setItem('splash','true');
}

});
</script>

#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.