How can I permanently hide a div?

[rpeg]

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.

[spikeZ]

What you need is some cookies nom nom nom!
More precisely, Javascript cookies: http://www.w3schools.com/js/js_cookies.asp

[sdleihssirhc]

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.

[paul_wilkins]

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

[Meldin]

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.

[rpeg]

Can you point me in the right direction on how to use this technique?

[paul_wilkins]

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.

[Meldin]

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.

[sdleihssirhc]

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:

// 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=/';

[Meldin]

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

[spikeZ]

what language?

[rpeg]

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.

[sdleihssirhc]

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):

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.