hide div with javascript cookie

Forum Moderators: open

Message Too Old, No Replies

hide div with javascript cookie

javascript, hide, div, cookie

moodie

1:19 am on May 2, 2008 (gmt 0)

I'm trying to set up a cookie that always hides the #content div on the first page (index.php) or on the very first page load.

the site is set up so that the #content div is in a layer above the #menu div. I have been able to hide the content div to view the menu, which is fine once you are navigating the site, but for the initial page load, i just want the #menu div visible.

any help would be great.

Thanks,
Aaron

Otaku

2:20 pm on May 5, 2008 (gmt 0)

Googling for "javascript cookies" brings up this not-so-bad tutorial: [quirksmode.org...]

Make the CSS so that the upper layer initially cover the menu. Then it will cover it on the first page load. Then set the cookie. It will be set on the 2nd and consequent loads. Test for it and if it's present, set the layer's style.visibility to "hidden" to show the menu.

[edited by: Otaku at 2:21 pm (utc) on May 5, 2008]

StupidScript

9:17 pm on May 6, 2008 (gmt 0)

<script type="text/javascript">
function checkCookie() {
//establish DIV object to manipulate
contentDiv=document.getElementById("content");
//check if cookie includes "mycookie"
if (document.cookie.indexOf("mycookie")!=-1) {
 //if it does (not false), display the DIV object
 contentDiv.style.display="block";
}
else {
 //if it does not, set the cookie for next page load
 document.cookie="mycookie=1";
}
}
</script>
<body>
<!-- Here's the "content" DIV element
   It doesn't display until the cookie is set -->
<div id="content" style="display:none">Content here..</div>
<!-- Here's the "menu" DIV element -->
<div id="menu" style="display:block">Menu here...</div>
<script type="text/javascript">
//check for the cookie and display DIV or set cookie
checkCookie();
</script>
</body>

There are tons of Javascript references on the web, and almost all of them include cookie syntax and useage. Good luck!

<edit: added comments>

[edited by: StupidScript at 9:26 pm (utc) on May 6, 2008]

moodie

5:40 am on May 7, 2008 (gmt 0)

Thanks for the help guys. The problem is that seeing the site is run via cms (indexhibit), if i change the index.php, it effects all the pages.

I was just trying something else. When I'm adding the content via the backend, I should be able to ad a piece of JS (a var maybe?) in with the text, and then when the browser renders the page, a function on the main index.php can check whether the var is in the content and display/hide the div accordingly? that should work shouldn't it?

index.php head

content via editor

dsiplayContent = true

</script>

Otaku

9:40 am on May 7, 2008 (gmt 0)

If I correctly understand you, you need this thing to be broken into two parts: one part that's the same for all pages and the second that you can change. Well, then let's start with the second part. It should be easy for you, so let's do it this way: when you need to show the menu, just insert:


<script type="text/javascript"><!--
 showMenu();
--></script>

and if you don't insert that, the menu will be hidden (content DIV will be visible and cover it).

To make it real, we need to have the content DIV to be initially visible, and also insert the following code at the header of every page:


<script type="text/javascript"><!--
function showMenu()
{
 document.getElementById( "content" ).style.visibility = "hidden";
}
--></script>

moodie

10:29 am on May 7, 2008 (gmt 0)

Thanks so much Otaku, thats exactly what I was after. I always end up making things way more complicated then they need to be ... I should have realised I just needed to initialise a function.

thanks again