SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How can I permanently hide a div?

    I've set up a simple div that's fixed at the top of a site (one of those). It contains some call-to-action stuff. I want to set it up so that a user can hide and it's hidden across the entire site unless the user changes it. Does that make sense?

    http://estevancarlos.kodingen.com/ecv7/

    Right now the top bar shows up on each page, requiring a user to hide it each time if necessary.

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    What you need is some cookies nom nom nom!
    More precisely, Javascript cookies: http://www.w3schools.com/js/js_cookies.asp
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Obligatory: ppk's cookie functions are short and sweet. Or, if you're more into the jQuery thing, there's the ubiquitous jQuery cookie plugin.
    I'm the web overlord for Graphic Business Systems

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    Obligatory: ppk's cookie functions are short and sweet.
    +1 for ppk's cookie functions. They've even been updated to meet todays rigorous coding standards as cookie handling functions
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Non-Member
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use cookies only if you want the div to stay hidden in subsequent browser sessions. Otherwise I would use a session variable as a flag to hide or show the div. The disadvantage of cookies is that users could have them turned off in their browser or they can at any time delete all cookies from their pc.

  6. #6
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you point me in the right direction on how to use this technique?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rpeg View Post
    Can you point me in the right direction on how to use this technique?
    If a cookie exists that states that it should remain hidden, then hide the call to action stuff.
    When someone chooses to hide it, set a cookie saying that it should remain hidden (for 1 day, 7 days, you decide) then hide the call to action stuff.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Non-Member
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rpeg View Post
    Can you point me in the right direction on how to use this technique?
    If you're using a session, then just set a session variable to true or false or any other flag value you want to use. Then at the top of each web page, check the value of the session variable and then show or hide whatever you need according to the session var's value.

  9. #9
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Meldin View Post
    If you're using a session, then just set a session variable to true or false or any other flag value you want to use. Then at the top of each web page, check the value of the session variable and then show or hide whatever you need according to the session var's value.
    I think a session variable in JavaScript (and by session I mean "discarded when the browser is closed") is just a normal cookie, but created without an expiration date:

    Code JavaScript:
    // with ppk's function
    createCookie('some_name', 'some_truthy_value');
     
    // or with the jQuery cookie plugin
    $.cookie('some_name', 'some_truthy_value');
     
    // and in normal, vanilla, boring JavaScript...
    document.cookie = 'some_name=some_truthy_value; path=/';
    I'm the web overlord for Graphic Business Systems

  10. #10
    Non-Member
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    I think a session variable in JavaScript (and by session I mean "discarded when the browser is closed") is just a normal cookie, but created without an expiration date:
    I was referring to a server side session variable. See post 5

  11. #11
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    what language?
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  12. #12
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Meldin View Post
    I would use cookies only if you want the div to stay hidden in subsequent browser sessions. Otherwise I would use a session variable as a flag to hide or show the div. The disadvantage of cookies is that users could have them turned off in their browser or they can at any time delete all cookies from their pc.
    I was actually curious to understand this technique. Although in general I'm going to use all the advice here as I should learn to use cookies.

  13. #13
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rpeg View Post
    I was actually curious to understand this technique. Although in general I'm going to use all the advice here as I should learn to use cookies.
    You'd use a server-side language to set a session cookie, like Meldin says. Here's an example of just about the laziest way to do it (I only know PHP, so that's what this uses; any language would work, though):

    PHP Code:
    session_start();
    $_SESSION['showBanner'] = TRUE// or FALSE, whatevs 
    But I disagree.

    The banner shows up by default, so when would you set this value? Obviously, when the user clicks the "hide" link. But how would that work?

    You're using JS to hide the banner anyway, so if you just set the cookie in JS, that's a single line you'd add to the click event listener.

    But if you wanted to use a server-side language to set the value, you'd have to either turn the "hide" link into a form submit (so that your server can set the session variable and then redirect back to whatever page the user was on) or send an AJAX request... Hiding the banner is a client action, so you'd have to figure out some way to get the server involved.

    On the other hand...

    How are you creating the HTML for the banner in the first place? It looks like you're using a server-side language to build your pages anyway, and (in my opinion) it would make more sense to have the server hide the banner by default (maybe just by adding a "hide" class to it, or something). It just seems clunky to have it show up, check for the cookie with JS, and then hide it if the cookie is found.

    Thankfully, cookies set by JS are sent to the server!

    So I would suggest setting the cookie with JS (whether it's a session or not) whenever the user clicks the show/hide button, but checking for the cookie on the server, when you build the page...

    If that's doable.
    I'm the web overlord for Graphic Business Systems


Tags for this Thread

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
  •