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?
Right now the top bar shows up on each page, requiring a user to hide it each time if necessary.
What you need is some cookies nom nom nom!
Obligatory: [ppk's cookie functions are short and sweet. Or, if you're more into the jQuery thing, there's [url=https://github.com/carhartl/jquery-cookie]the ubiquitous jQuery cookie plugin](http://www.quirksmode.org/js/cookies.html#script).
+1 for ppk's cookie functions. They've even been updated to meet todays rigorous coding standards as cookie handling functions
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.
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.
// with ppk's function
// or with the jQuery cookie plugin
document.cookie = 'some_name=some_truthy_value; path=/';
I was referring to a server side session variable. See post 5
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['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.
This topic is now closed. New replies are no longer allowed.