Solved

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

Posted on 2014-11-15
12
175 Views
Last Modified: 2014-11-15
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
0
Comment
Question by:Rowby Goren
  • 7
  • 4
12 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40444576
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40444591
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40444605
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40444653
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40444688
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40444730
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 9

Author Comment

by:Rowby Goren
ID: 40444759
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40444764
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40444812
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 40444874
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40444893
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40444909
Thanks Kyle  I'll comment it out.  

And thanks Ray for the underlining concept of cookies.

Rowby
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now