CODEWITHSUNDEEP
javascripthtml
meowsome
meowsome

Reputation: 87

Show a div only once per time the user is on the site

I'm trying to show a div element only once per time that the user is on the site. I've seen multiple answers to similar questions already, but none of them seem to work... I have a code written out, but it doesn't work... I got a part of the code from somewhere else (I can't remember) so is that why it doesn't work?

Here's the code

<script type="text/javascript">
//<![CDATA[

var once_per_session=1


function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // if cookie exists
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1)
         end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}

function loadalert(){
document.getElementById("popupp").style.visibility = visible;

if (once_per_session==0)
loadalert()
else
alertornot()

//]]>
</script>

<div class="popupp" style="visibility:hidden;">hi</div>

Do you think you could help me figure out what's wrong with it?

EDIT

I've got it! Here it is: 

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
(function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
        document.getElementById("popupp").style.visibility = "visible";
        localStorage.setItem('visited', true);
    }
})();
}//]]>  

</script>


</head>
<body>
  <div id="popupp" style="visibility:hidden;">hi</div>

</body>

Upvotes: 4

Views: 6731

Answers (3)

Ahosan Karim Asik
Ahosan Karim Asik

Reputation: 3299

Try this: in html: class="popupp" change to id="popupp"

and in javascript: document.getElementById("popupp").style.visibility = visible; change to document.getElementById("popupp").style.visibility = "visible";

Demo

Upvotes: 0

DACrosby
DACrosby

Reputation: 11440

If the goal is to only show it once, you can use the example on the MDN website as a start.

if (document.cookie.replace(/(?:(?:^|.*;\s*)someCookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
  alert("Do something here!");
  document.cookie = "someCookieName=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}

http://jsfiddle.net/daCrosby/pqb5baa5/

Edit

Here it is showing you div. Note, I moved the styling to CSS instead of inline in my jsFiddle - much better approach to get in the hang of

if (document.cookie.replace(/(?:(?:^|.*;\s*)someCookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    document.getElementById("popupp").style.visibility = "visbile";
    document.cookie = "someCookieName=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}

http://jsfiddle.net/daCrosby/pqb5baa5/2/

Upvotes: 0

taxicala
taxicala

Reputation: 21759

You could use localStorage instead, only when the user clears it out he will get the popup again (same with cookies) but its much simplier:

(function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
        document.getElementById("popupp").style.visibility = "visible";
        localStorage.setItem('visited', true);
    }
})();

html:

<div id="popupp" style="visibility:hidden;">hi</div>

This way you get a lot of less code. Hope this helps.

Upvotes: 9

Related Questions