Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.

Thread: 

Hide div using cookie and JavaScript?

Ads
banner
banner
banner
destroyer Offline referral

Posts: 430
Joined: Jul 2013
Reputation: 3

#1
Senior Member
Many websites message showing and have a close button to hide the message? I am know it can be done with JavaScript and cookies but how?

How to hide div message and set cookie that will expire in 24 hours? Once cookie expires show div again?
marcus_avrelius Offline referral

Posts: 2,424
Joined: May 2013
Reputation: 102

#2
Support Team
HTML
Code:
<div class="hide_div_main">
<span id="hide_div_main_close">Close</span>
Your div content goes here. This content will get hidden once user clicks on close button. And will remain hidden until cookie expires.
</div>

CSS
Code:
.hide_div_main{ display: none;
/*Add more css! This will style your main div*/
}
#hide_div_main_close{/*Add css here. This will style close button*/}
#hide_div_main_close:hover{/*Add css here. This will style close button hover or on mouse-over*/}

JavaScript
Code:
<script type="text/javascript">
document.observe('dom:loaded', function(){

   var notebox = $$('.hide_div_main')[0];
   if(Cookie.get("hide_div_cookie") != "Close")
   {
       notebox.style.display = 'block';
   }

   var dismiss = document.getElementById('hide_div_main_close');

   dismiss.addEventListener('click', function() {
       Cookie.set("hide_div_cookie", "Close", 60*60*24*365);
       notebox.style.display = 'none';
   }, false);

});
</script>

This JavaScript sets cookie that will expire in 24 hours. You can modify expiration date by modifying this line: 60*60*24*365
invisibe_dude Offline referral

Posts: 820
Joined: May 2013
Reputation: 24

#3
Posting Freak
If you want to show/hide div/message box then use jQuery.

HTML
Code:
<div id="messagebox">The content of message box
    <a href="JavaScript:void(0)" id="close">close</a>
</div>

CSS
Code:
#messagebox {
    display: none;
    color:#000 !important;
    background: white;
}

jQuery
Code:
$(document).ready(function() {
  if (!readCookie('hide')) {
    $('#messagebox').show();
  }
  $('#close').click(function() {
    $('#messagebox').hide();
    createCookie('hide', true, 1)
    return false;
  });
});

JavaScript
Code:
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
function eraseCookie(name) {
  createCookie(name,"",-1);
}





User(s) browsing this thread: 1 Guest(s)