SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide div using cookies

    Hi there,

    I am trying to display a div popup which the user can close and then will hide for 24 hours, but not having much luck.

    This is what I have so far:
    PHP Code:
    <script>
    $(
    document).ready(function() {

      
    // If the 'hide cookie is not set we show the message
      
    if (!readCookie('hide')) {
            $(
    '#offerbox').show();
      }

      
    // Add the event that closes the popup and sets the cookie that tells us to
      // not show it again until one day has passed.
      
    $('#close').click(function() {
            $(
    '#offerbox').hide();
            
    createCookie('hide'true1)
            return 
    false;
      });

    });

    // ---
    // And some generic cookie logic
    // ---
    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;ca.length;i++) {
            var 
    ca[i];
            while (
    c.charAt(0)==' '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);
    }
    </script>


    <div id="offerbox">
    <a href="Javascript:void(0)" id="close">close</a>
    content here
    </div>


    <script>
    $(document).ready(function(){
     $(window).scroll(function(){
      // get the height of #wrap
      var h = $('#wrapper').height();
      var y = $(window).scrollTop();
      if( y > (h*.25) && y < (h*.75) ){
       // if we are show keyboardTips
       $("#offerbox").fadeIn("1000");
      } else {
       $('#offerbox').fadeOut('1000');
      }
     });
    })


    </script> 

    ID offerbox id the box div.

    Any ideas what i'm doing wrong?

    Thanks

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You currently have an IF statement that checks if the cookie exists and if it doesn't you show the close button but that would be the wrong behavior as the button should always be visible but hidden when the page loads given the cookie is set still, see the below.

    Code:
    $(function() {
        
        // If the 'hide cookie is not set we show the message 
        if (readCookie('hide')) {
            $('#offerbox').hide(0);
        }
        
        // Add the event that closes the popup and sets the cookie that tells us to 
        // not show it again until one day has passed.
        $('#close').click(function(e) {
            e.preventDefault();
            $('#offerbox').hide();
            createCookie('hide', true, 1);
        });
        
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •