hidden element cookie

@gilmannSep 21.2016

I have a hidden element that pops up after a certain amount of time.

However, if someone goes back to the website again, they have to wait the same amount of time as they did before for the hidden element to appear again.

I would like to integrate cookie tracking so that once the person returns to the website, the hidden element will still be there again rather than having to go through the same wait every time they return.

~~[B]~~This is the current script the head:[/B]

[CODE]<!– START PASTE HERE –>

<script type=”text/javascript”> <!–

//////////////////////////////////////////// // CHANGE THE SECONDS DELAY BELOW TO // // THE NUMBER OF SECONDS YOU WANT BEFORE // // THE LINKS APPEAR // ////////////////////////////////////////////

$secondsdelay = 30;

//////////////////////////////////////////// // DO NOT EDIT THIS SECTION // ////////////////////////////////////////////

function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className==’hidden’)?’unhidde n’:’hidden’; } }

$delay = $secondsdelay*1000;

window.setTimeout(“unhide(‘links’)”,$delay);

//–></script>

<STYLE TYPE=”text/css”> .hidden { visibility: hidden; } .unhidden { visibility: visible; } </STYLE>

<!– END PASTE HERE –> [/CODE]

~~[B]~~here is the script in the body:[/B]

[CODE]<div id=”links” class=”hidden”><img class=”wp-image-26 aligncenter” src=”http://hiddenhealthquest.com/wp-content/uploads/2016/09/buybuybuy.png” alt=”buybuybuy” width=”361″ height=”348″ /></div>[/CODE]

how should I modify this for my purposes?

to post a comment

JavaScript

52 Comments(s) _↴

@rootSep 21.2016 — #Don't use cookies, no such thing as a hidden cookie.

If you are looking for something more secure then use the localStorage object if its available otherwise only use cookies as a fallback position.

@gilmannauthorSep 21.2016 — #im not looking for anything more secure nor am I looking to use cookies if not necessary.

Im simply looking to make sure people who have already waited for my hidden element to pop up dont have to wait every time they come back to the site. I simply want for it to be there whenever someone returns to my site after it has popped up already for that particular visitor instead of them having to wait again every time they return.

@rootSep 21.2016 — #Cookies get wiped... so the popup will pop up after each time the users browser policy wipes the pop up cookie.

So your request will pop up the pop up each visit if the user has a browser or firewall that expires cookies.

localStorage object is more permanent and specific to your page / domain and can't be read, therefroe not prone to deletion unless you want it so.

@gilmannauthorSep 21.2016 — #what do I need to change for it to continue showing the element instead of hiding it again each visit?

@rootSep 21.2016 — #For something to be shown and not hidden on each visit, you don't set the inital state, so change [code=html]<div id="links" class="hidden">[/code] to [code=html]<div id="links">[/code] and forget about having the javascript to unhide the links as it won't be required.

@gilmannauthorSep 22.2016 — #thats not what im looking for. I dont want it to be shown on each visit.

I want it to be hidden for 30 seconds for example and then revealed. But once it is revealed and the visitor returns, I want it to remain there when the visitor returns instead of them having to wait until it goes through the revealing process again.

@rootSep 22.2016 — #Really do not understand why you want this to reveal after 30 seconds then seen on each visit.

If thats what you want then you need to have a localStorage object store a token that indicates that the thing has been delayed, if one does not exist then it delays and then sets the flag.

Like I said before, localStorage object is more permanent than cookies. All you need to do is google for the information.

@gilmannauthorSep 22.2016 — #what should I google? I cant figure it out. And how do I integrate it with the current script

@gilmannauthorSep 22.2016 — #i basically want the script to be like this

object hidden>wait 20 minutes>object revealed>object never hidden again for this visitor

@SempervivumSep 22.2016 — #Try this:

[CODE]        <div id="hidden-element">Your hidden element</div>
 <script>
 var lsAvailable;
 var he = document.getElementById("hidden-element");
 try {
 localStorage.setItem("lsAvailable", "true");
 localStorage.removeItem("lsAvailable");
 lsAvailable = true;
 } catch (e) {
 lsAvailable = false;
 }
 if (lsAvailable) {
 var visited = localStorage.getItem("visited")
 if (!visited) {
 he.style.display = "none";
 window.setTim

@rootSep 22.2016 — #Something like this added to the script

<i>
 </i>// try accessing it, if its not seen, set the time out for it
 try{
 var hasSeen = Number( localStorage.getItem("seen") );
 }catch( e ){
 localStorage.setItem("seen",30);
 }
 
 // if hasSeen has been seen, then it will be 0 otherwise it will be 30
 setTimeout("unhide('links')", hasSeen*1000 );
 // now change it.
 localstorage.setItem("seen",0);

and remove this from the script

&lt;!-- START PASTE HERE --&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 
 ////////////////////////////////////////////
 // CHANGE THE SECONDS DELAY BELOW TO //
 // THE NUMBER OF SECONDS YOU WANT BEFORE //
 // THE LINKS APPEAR //
 ////////////////////////////////////////////
 
 
 $secondsdelay = 30;
 
 ////////////////////////////////////////////
 // DO NOT EDIT THIS SECTION //
 /////////////////////////////////////////

and also remove

<i>
 </i>$delay = $secondsdelay*1000;

once run it will set a

@SempervivumSep 22.2016 — #My previous posting was incomplete, here it is again:

[CODE]        <div id="hidden-element">Your hidden element</div>
 <script>
 var lsAvailable;
 var he = document.getElementById("hidden-element");
 try {
 localStorage.setItem("lsAvailable", "true");
 localStorage.removeItem("lsAvailable");
 lsAvailable = true;
 } catch (e) {
 lsAvailable = false;
 }
 if (lsAvailable) {
 visited = localStorage.getItem("visited")
 if (!visited) {
 he.style.display = "none";
 window.setTimeout(function () {
 localStorage.setItem("visited", "true");
 he.style.display = "block";
 }, 5000)
 }
 }
 </script>[/CODE]

@gilmannauthorSep 23.2016 — #sempervivum: I tried pasting your code in and it didnt work. I replaced what I had before with what you gave me the second time, the entire thing broke.

//: im not sure if i did what you said correctly.

Can anyone just tell me exactly what to put in instead of what is there right now? Sorry if i sound stupid, i know this can be done though and i cant figure it out.

@gilmannauthorSep 23.2016 — #// im sure i did exactly what you said

@SempervivumSep 23.2016 — #I tested my code before posting it and it worked fine.

You have to place the javascript [B]below[/B] the definition of your hidden container. It's best to place it just before the closing </body>.

Are you sure that local storage is enabled in your browser? Check this.

If you don't get it working put it online and post the URL. Or post your complete code including the hidden container.

@rootSep 23.2016 — #What I am suggesting is in the following order...

1. Try to access an element of local storage

2. if that element does not exist, set it, if it exists then zero it

3 run the delay timer routine to call the unhide function, if its zero, it will show immediately, if it has a time set, it will show after the time runs out.

if localStorage object isn't available (which it is more likely to be available given all major browsers support HTML5) then if not, default to a back up of cookies.

<i>
 </i>// the unhide function
 function unhide(divID) {
 if ( var item = document.getElementById(divID) ) {
 item.className = (item.className=="hidden")? "unhidden" : "hidden";
 }
 }
 
 // try accessing it, if its not seen, set the time out for it
 try{
 // try to get the item stored, it will be 1200 or 0 if its been set, then cast it to a number
 var hasSeen = Number( localStorage.getItem("seen") );
 }catch( e ){
 /*
 20 minutes = 1200 seconds this runs if the object has not been 
 set because it is the catch part of an error routine
 */
 localStorage.setItem("seen",1200);
 }
 
 // if hasSeen has been seen, then it will be 0 otherwise it will be 1200
 setTimeout("unhide('links')", hasSeen*1000 );
 // now change it to 0 because the item will be seen on next visit
 localstorage.setItem("seen",0);

The person only needs to refresh the page to then have the links element show, if you want a more robust method, you should store a time reference and then calculate if that time has expired.

JavaScript if disabled would result in your links never showing, thats somethign to consider because even today, special types of web browser have no javascript support, slthough they are small in number, they serve a small user group based on their needs, so if your site has links that the user can't see, then that limits your sites usability.

@TrainSep 23.2016 — #JavaScript if disabled would result in your links never showing, thats somethign to consider because even today, special types of web browser have no javascript support, slthough they are small in number, they serve a small user group based on their needs, so if your site has links that the user can't see, then that limits your sites usability. [/QUOTE]
And lot of us disable it.

@SempervivumSep 23.2016 — #Javascript off is no problem when the initial state of the container is visible, as in my code.

@gilmannauthorSep 25.2016 — #My previous posting was incomplete, here it is again:

[CODE]        <div id="hidden-element">Your hidden element</div>
 <script>
 var lsAvailable;
 var he = document.getElementById("hidden-element");
 try {
 localStorage.setItem("lsAvailable", "true");
 localStorage.removeItem("lsAvailable");
 lsAvailable = true;
 } catch (e) {
 lsAvailable = false;
 }
 if (lsAvailable) {
 visited = localStorage.getItem("visited")
 if (!visited) {
 he.style.display = "none";
 window.setTimeout(function () {
 localStorage.setItem("visited", "true");
 he.style.display = "block";
 }, 5000)
 }
 }
 </script>[/CODE]

[/QUOTE]

im sorry i cant seem to figure this out, first of all, if you look at what my head script looks like,, the div id is "hidden" not "hidden-element" so im not sure if what you wrote would work with what my head says. I tried it both ways and when I use "hidden-element' the script doesnt work at all but when i use hidden and add the scriot, it behaves the same way as if it script wasnt there.

here is what it looks like after applying your changes, what am i missing?

[CODE]<div id="links" class="hidden"><img class="wp-image-26 aligncenter" src="http://hiddenhealthquest.com/wp-content/uploads/2016/09/buybuybuy.png" alt="buybuybuy" width="361" height="348" /></div>
 <script>
 var lsAvailable;
 var he = document.getElementById("hidden");
 try {
 localStorage.setItem("lsAvailable", "true");
 localStorage.removeItem("lsAvailable");
 lsAvailable = true;
 } catch (e) {
 lsAvailable = false;
 }
 if (lsAvailable) {
 visited = localStorage.getItem("visited")
 if (!visited) {
 he.style.display = "none";
 window.setTimeout(function () {
 localStorage.setItem("visited", "true");
 he.style.display = "block";
 }, 5000)
 }
 }
 </script>[/CODE]

@SempervivumSep 25.2016 — #

[CODE]<div id="links" class="hidden"><img class="wp-image-26 aligncenter" src="http://hiddenhealthquest.com/wp-content/uploads/2016/09/buybuybuy.png" alt="buybuybuy" width="361" height="348" /></div>
 <script>
 var lsAvailable;
 var he = document.getElementById("hidden");[/CODE]

[/QUOTE]Your div has the [B]class[/B] "hidden" but getElementById() get's the element by it's [B]ID[/B] which is "links".

This would be correct:
[CODE]var he = document.getElementById("links");[/CODE]

@gilmannauthorSep 25.2016 — #so do it put "links" or a specific link?

@gilmannauthorSep 25.2016 — #i put links in that one part just like you said and it still doesn't work.

the site is hiddenhealthquest.com

@gilmannauthorSep 25.2016 — #this is what it looks like now

[CODE]<div id="links" class="hidden"><img class="wp-image-26 aligncenter" src="http://hiddenhealthquest.com/wp-content/uploads/2016/09/buybuybuy.png" alt="buybuybuy" width="361" height="348" /></div>
 <script>
 var lsAvailable;
 var he = document.getElementById("links");
 try {
 localStorage.setItem("lsAvailable", "true");
 localStorage.removeItem("lsAvailable");
 lsAvailable = true;
 } catch (e) {
 lsAvailable = false;
 }
 if (lsAvailable) {
 visited = localStorage.getItem("visited")
 if (!visited) {
 he.style.display = "none";
 window.setTimeout(function () {
 localStorage.setItem("visited", "true");
 he.style.display = "block";
 }, 5000)
 }
 }
 </script>[/CODE]

@SempervivumSep 25.2016 — #Simply the string "links", as I posted.

@SempervivumSep 25.2016 — #See your posting #24 only now, this is correct and should work.

@SempervivumSep 25.2016 — #Loaded your page. Annoying video and annoying popup that can't be canceled!

The script works fine now. The local storage item is set by your browser, therefore it seems to you that it does not. Use the developer tools of your browser to remove the item or try a different browser.

@gilmannauthorSep 25.2016 — #Did you check my website on your browser? Maybe something on my browser is making it not work for me. But since we already know it worked when you did it and checked on your browser can you check hiddenhealthquest.com please just in case?

To be clear, I want it to be hidden for a certain period of time the first time you go to the site but when you return I want it never be hidden.

@gilmannauthorSep 25.2016 — #sorry just saw your reply, The annoying stuff is just for testing, the video is a joke, Weird that you cant cacnel the popup since as soon as I click outside of it the popup goes away for me.

so when you go on the site the first time, the link pops up after some time but when you went back it was there the whole time?

@gilmannauthorSep 25.2016 — #i tried chrome and firefox. everything is default on both

@gilmannauthorSep 25.2016 — #Im pretty sure i found the problem.

When I check my localstorage in my browser, there is nothing stored from my website but i have four things stored from the youtube video. THis leads me to believe that while localstorage is enabled in my browser, it is not getting anything put in there from my web page. WHy would that be?

is there something comeing from my site into localstorage on your browser?

@gilmannauthorSep 25.2016 — #do i need to add some java into my head to make my site place a visited token into the users localstorage?

@SempervivumSep 26.2016 — #is there something comeing from my site into localstorage on your browser?[/QUOTE]Yes, my browser stores the item "visited".

@gilmannauthorSep 26.2016 — #interesting. Any idea why it wouldnt be storing on my computer when the youtube tokens store just fine? Its strange when all of my settings are default for both chrome and firefox.

Could be it be because I am using linux?

@gilmannauthorSep 26.2016 — #so I reset my chrome to default and now it stores the item "visited"

however, when I refresh the page the element is still hidden and I have to wait for it like always

@gilmannauthorSep 26.2016 — #did the same thing for firefox and it is storing "visited; true" now as well. However, just like with chrome when I refresh the page, the icon is hidden once again.

are you sure when you refresh the page the icon is not hidden?

@rootSep 26.2016 — #I went to the site, you autoplay a video which is a no-no, you have to consider the end user may be doing other things or in my case, you just wasted data allowance that I can't afford to waste, totally inconsiderate.

@gilmannauthorSep 26.2016 — #Im sorry that you spent data allowance by visiting my page. Unfortunately, with a sales landing page, it is standard practice to autoplay, anyone going to this site will be going specifically to watch a video, im sorry i didnt think of giving a warning, didnt think it would be a problem.

Did you test out the button pop?

@rootSep 26.2016 — #

1. it is not standard practice by forcing something on a person you are not giving them the option to play when they want to play, that is a complete myth about standard practice and people following a link does not indicate that they are going there to watch a video, again this is a myth, it is forced advertising, much like sites that check for pop-up and advert blockers and claim that their only revenue is from adverts on their site... BUNK.

2. I didn't see anything indicating a button, just some whining video that was a guy playing a video game, nothing about advertising so I was gone.

As you are a business selling, I don't see why you can't go to the paid help section of this site and pay for help.

@SempervivumSep 26.2016 — #

1. The script conflicts with this which does the same but doesn't use local storage:

[CODE]<script type="text/javascript">
 <!--
 
 ////////////////////////////////////////////
 // CHANGE THE SECONDS DELAY BELOW TO //
 // THE NUMBER OF SECONDS YOU WANT BEFORE //
 // THE LINKS APPEAR //
 ////////////////////////////////////////////
 
 
 $secondsdelay = 30;
 
 ////////////////////////////////////////////
 // DO NOT EDIT THIS SECTION //
 ////////////////////////////////////////////
 
 
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidde n':'hidden';
 }
 }
 
 
 $delay = $secondsdelay*1000;
 
 window.setTimeout("unhide('links')",$delay);
 
 //--></script>
 
 <STYLE TYPE="text/css">
 .hidden { visibility: hidden; }
 .unhidden { visibility: visible; } 
 </STYLE>
 
 [/CODE]

2. You don't use HTML5 doctype. Use <script type="text/javascript">

@gilmannauthorSep 26.2016 — #

1. the script you quoted doesn't have anything in it that makes the element not be hidden if the person had already previously visited the site so i dont think it does what I am looking for. Maybe I am missing something that you are trying to say.

2. You are telling me to use <script type="text/javascript"> but that is what is already there so I am confused as to what you are saying I should replace.

not sure where the conflict is. are you saying that what I am trying to do actually isnt working on your computer?

@SempervivumSep 26.2016 — #

1. No, your page is not working on my computer. The div is hidden and shown after 30 secs but the script doesn't use local storage and therefore the behavious is always the same as you stated earlier.

2. Search for <script>. This is missing type="text/javascript".

@rootSep 26.2016 — #You do have a typo in your function.

@gilmannauthorSep 26.2016 — #So you are saying that it is missing type="text/javascript". but it is the very first line of what you pasted!

I feel like im either really missing something stupid or being messed with at this point.

What is the typo?

@rootSep 27.2016 — #typo = typographical error, meaning you mistyped something, missed something out or additional letters / characters or wrong spellings.

as pointed out, you do not need [b]type="text/javascript"[/b]

As for being messed with, it is very doubtful.

@gilmannauthorSep 27.2016 — #typo = typographical error, meaning you mistyped something, missed something out or additional letters / characters or wrong spellings.

as pointed out, you do not need [b]type="text/javascript"[/b]

As for being messed with, it is very doubtful.[/QUOTE]

ok, from what semper said it seemed like he was saying i needed type="text/javascript" but you are saying i need to remove it. Do i need to replace it with anything or just remove it?

@SempervivumSep 27.2016 — #as pointed out, you do not need type="text/javascript"[/QUOTE]

https://validator.w3.org/check?uri=http%3A%2F%2Fhiddenhealthquest.com%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0

Line 157, Column 11: required attribute "type" not specified

<p><script>

✉

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.[/QUOTE]

@SempervivumSep 27.2016 — #In order to be able to test my recommendations I have saved the page locally. As recommended I deleted this script:

[CODE]<!-- START PASTE HERE -->
 
 <script type="text/javascript">
 <!--
 
 ////////////////////////////////////////////
 // CHANGE THE SECONDS DELAY BELOW TO //
 // THE NUMBER OF SECONDS YOU WANT BEFORE //
 // THE LINKS APPEAR //
 ////////////////////////////////////////////
 
 
 $secondsdelay = 30;
 
 ////////////////////////////////////////////
 // DO NOT EDIT THIS SECTION //
 ////////////////////////////////////////////
 
 
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidde n':'hidden';
 }
 }
 
 
 $delay = $secondsdelay*1000;
 
 window.setTimeout("unhide('links')",$delay);
 
 //--></script>
 
 <STYLE TYPE="text/css">
 .hidden { visibility: hidden; }
 .unhidden { visibility: visible; } 
 </STYLE>
 
 
 <!-- END PASTE HERE -->[/CODE]

Additionally I had to make the container visible be disabling this in style.css:

[CODE]/*.hidden
 {
 display: none;
 }*/[/CODE]

Now the page works as desired. Go and test it:

http://ulrichbangert.de/div/webdesign/javascript/hiddenhealthrequest.html

@gilmannauthorSep 28.2016 — #THanks i see it works now on your page.

I am confused a bit still though.

What exact code should I put in the head and in the body?

Can you just put it in here please so I can copy paste it into my site?

@SempervivumSep 28.2016 — #Just do what I posted in #48: Delete the script and disable the CSS I mentioned. That's all.

@gilmannauthorSep 28.2016 — #by deleting the script i will have nothing in the head. My script will still work with nothing in the head?

and by disable you mean delete that part?

@SempervivumSep 28.2016 — #by deleting the script i will have nothing in the head[/QUOTE]?? There is much more in the head. Delete only the code I posted.
and by disable you mean delete that part?[/QUOTE]Yes, delete it or make it a remark as I posted.

@gilmannauthorSep 28.2016 — #ok thanks, i will try it out tomorrow

Also in #JavaScript _↴

innerHTML problem How does this work?Make a text disappear gradually from current text color to background color.

Success!

Help @gilmann spread the word by sharing this article on Twitter...

Tweet This

hidden element cookie

52 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

hidden element cookie

52 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

52 Comments(s) _↴

Also in #JavaScript _↴