Playing a landing page slide show only once during a website visit

Hello

I am working on a slideshow which appears on the home page of a site I am developing.

I want it to play only one time during the period of a website visit.  In other words if a person returns to the home page I don't want it to play again.  Only if they leave the site and return would the slideshow play again.

The slideshow is in a div called div.  _SlideshowPlayOnce .  So I am hoping that using either jquery or something else (perhaps using cookies -- or not using cookies???) will be able to do the play once -- using the div as a hook.

The next time a visitor visits the site they would see the slideshow again.

Here's a link to the slideshow, which is in the very early stage of development.  Early stage of slideshow (BTW the slideshow uses jquery, if that's important for you to know.

Thanks
LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
Hi Rowby,

yes, in most cases a cookie will do the job.

couple of questions:

1. do you want the slideshow to play only once for a given user no matter what browser or device they are using?
In this case, a cookie is not sufficient, and the user would require a login. I suspect this is not your case.

2. Do you want the slideshow to play only once in the given browser, ever? OR,
3. Do you want the slideshow to play once per session - in other words, if the user closes the browser window, or quits their browser, and then returns to the home page a week later, do you want he slide show to play once more?

these two questions have to do with cookie expiration, which can be set arbitrarily, but most times is either set to some very distant future date (to never expire for all intents and purposes), or per session.
0
Rowby GorenAuthor Commented:
Hi Kyle,

Thanks for helping here.

I don't want a login.  

Yes, I want the slideshow to play once per session.   If the user closes their browser or quits and returns to the home page an hour later, a week later  --or a year later the slideshow will indeed play again.

Rowby
0
Rowby GorenAuthor Commented:
One more thing.  And it may require a modification by the slideshow developer.

I would like there to be an "X Exit" on the upper right corner of the slideshow -- so the visitor could exit out of the slideshow instead of having to view it.

I might have to put the slideshow inside of a modal to do that.  And I can do that too.  I have various joomla modal plugins I could use.

So if it can't be easily handled within this question I think I can still do the "eXit" out of the slideshow -- but thought I should add this comment FYI.

Rowby
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Kyle HamiltonData ScientistCommented:
You could use session storage. Set the session item when the page is unloaded. then test for session item, and if it exists, delete the slideshow element. In theory, this should work. give it a try. I added it to your existing script.

<script type="text/javascript">
(window.lsjq||jQuery)(document).ready(function($) {

$( window ).unload(function() {
  // Save data to the current session's store
  sessionStorage.setItem("slider", "shown");

});

if(sessionStorage.getItem("slider") == "shown"){
 $(".ls-wp-fullwidth-container").remove();
}

if(typeof $.fn.layerSlider == "undefined") { lsShowNotice('layerslider_13','jquery'); }
else {
$("#layerslider_13").layerSlider({pauseOnHover: false, forceLoopNum: false, skin: 'borderlessdark3d', globalBGColor: 'transparent', globalBGSize: 1100, hoverBottomNav: true, thumbnailNavigation: 'disabled', yourLogoStyle: 'left: 10px; top: 10px;', cbInit: function(element) { }, cbStart: function(data) { }, cbStop: function(data) { }, cbPause: function(data) { }, cbAnimStart: function(data) { }, cbAnimStop: function(data) { }, cbPrev: function(data) { }, cbNext: function(data) { }, skinsPath: 'http://rowbytesting.com/components/com_layer_slider/base//static/skins/'})
}
});
</script>
0
Rowby GorenAuthor Commented:
Hi

I added your script to the head, and, well because the other code was generated by the joomla component, it messed with your code.

So I think I need to go into whatever generated the original script -- from the component and modify with your code -- rather than put your code into the header.

Right?  

I've removed your script from the head and now I'm looking into the php for the original php from the developer that I will modify with yours.

Stay tuned.
...Rowby
0
Kyle HamiltonData ScientistCommented:
how did it mess with my code? what did it do?

You should be able to put my script in the HEAD if you want. make sure it goes below jQuery, like this:

<script>
jQuery(function($) {

$( window ).unload(function() {
  // Save data to the current session's store
  sessionStorage.setItem("slider", "shown");

});

if(sessionStorage.getItem("slider") == "shown"){
 $("body").find("._SlideshowPlayOnce").remove(); // << you can delete the whole container if you want
}

})(jQuery);
</script>
0
Rowby GorenAuthor Commented:
Great.  Working perfectly.  If I go to another page and return to the home page it does not show again.

And if I close browsers or switch to another browser the slideshow shows again.

You might want to test it. Otherwise it looks like points time! :)

working fine!!

Rowby
0
Rowby GorenAuthor Commented:
One thing would be good.  While I test the site I need to disable the jquery so I can review the slideshow over and over again.

Is there a switch you can put in the header code so I can just go into it change it from YES to NO to turn the script on and off?  Rather than having to delete it and paste it back in whenever I need to go in and out of test mode.

Rowby
0
Rowby GorenAuthor Commented:
For now I have temporarily removed your working script so that I can test the slideshow over and over :)

But I will put it back in when hopefully you add an on-off "switch" to the header code.

Rowby
0
Kyle HamiltonData ScientistCommented:
you can just comment out this line:

sessionStorage.setItem("slider", "shown");

like this:

// sessionStorage.setItem("slider", "shown");

then uncomment it again when you are ready for prime time.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
0
Rowby GorenAuthor Commented:
Thanks Kyle  I'll comment it out.  

And thanks Ray for the underlining concept of cookies.

Rowby
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.