1

I referred to this thread to get a transparent div to display on top of the web site content and make it disappear when clicking on it...

however, when someone visits a page within the site and they click on the home button they are displayed the transparent div again... is there a way to have the div appear only one time and do not appear again after they close it?

Community
  • 1
  • 1
Cherubrock74
  • 35
  • 1
  • 7
  • 5
    [Cookies](https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) or [localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) – Hatchet Jan 28 '16 at 19:04

2 Answers2

0

The best way to do is by setting a cookie. On this way, you can hide it forever, or hide it for a specified time.

document.cookie = "transparentdivShow = false";

And now you can check if this cookie exists, and if so, don't show the div:

if(document.cookie.indexOf("transparentDivShow") >= 0) {
    return true; // Don't show it
} else {
    return false; // Show the div
}
  • I never set a cookie before...my div id is #overlay...how would I implement the example code you provided? document.cookie = "#overlayShow = false"; if(document.cookie.indexOf("#overlayShow") >= 0) { return true; // Don't show it } else { return false; // Show the div } – Cherubrock74 Jan 28 '16 at 21:39
0

As the above poster mentioned, you could use a cookie. Alternatively, you could use HTML5 Local Storage! Local Storage allows data to be stored locally within a user's browser.

In this instance, you could have something like a clickcounter that counts to see if the clickcounter is greater than 1. If it is greater than 1, give the div a hidden attribute or just get rid of it. 

if (sessionStorage.clickcounter) {
 <div hidden> You can't see me. I'm invisible. </div>
} else {
 sessionStorage.clickcounter = 1;
 <div visible> Hi! I'm not transparent. </div>
}

I hope that this helps. Here's a page with more information on it as well! http://www.w3schools.com/html/html5_webstorage.asp

crepuscularCoder
  • 71
  • 2
  • thank you so much for your replies! do you think I could use both cookies and html5? in case someone has cookies disabled html5 would still get the job done... – Cherubrock74 Jan 28 '16 at 21:16
  • You probably mean if you can use local storage as a fallback if cookies aren't enabled. In that case yes, you can. The reason I prefer cookies above local storage for this is the fact that cookies can have an expiry date, so you can make the message re-appear after a defined time. –  Jan 28 '16 at 22:01
  • That's true. The cookie expiration time can be very useful, Jasper is right about that. JavaScript makes setting and reading cookies very easy, so it should be trouble. http://www.w3schools.com/js/js_cookies.asp And yes, you can use both html5 and cookies with html5 as a fallback. That would work just fine. – crepuscularCoder Jan 29 '16 at 16:31