Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Set the state of a drop down menu in a cookie

    Hi all,

    I would like to know if anyone can help me. I have created a javasript/CSS drop down menu that, when you click a menu header, a submenu appears. Click again and it dissapears. This is done using the CSS display attribute. The menu is shown on all pages in the site using a <!-- #file include.

    When you click on a submenu item, the link takes you to the relevant page. The problem is that when the new page loads, the menu refreshes and all open sub menus close.

    I would like to be able to save the state of the menu (i.e. what sub menus are showing), possibly as a session cookie, so that the user can navigate the site without having to open the menus on every page.

    Is this possible?

    And more importantly - can anyone give me a pointer on how to do it.

    Unfortunately the site is on a restricted Intranet so I cannot give you a link. However, I can send the code to anyone who may be interested in helping.

    Thanks in advance.

    Deanoo

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>Q_21158909</title>
    		<!--[if IE]><script type="text/javascript">var ie = true;</script><![endif]-->
    		<style type="text/css">
    			ul	{list-style-position:inside;padding-left:1em;}
    
    			li.closed		{list-style-image:url("/images/icon_folder_closed.png");}
    			li.closed > ul	{display:none;}
    			li.open			{list-style-image:url("/images/icon_folder_open.png");}
    			li.open > ul	{display:block;}
    
    			li	{list-style-image:url("/images/icon_file.png");}
    		</style>
    	</head>
    	<body>
    		<ul id="directory">
    			<li><a href="" onclick="return false">Folder 1</a>
    				<ul>
    					<li><a href="" onclick="return false">Folder 1_1</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    					<li><a href="" onclick="return false">Folder 1_2</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li><a href="" onclick="return false">Folder 2</a>
    				<ul>
    					<li><a href="" onclick="return false">Folder 2_1</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    					<li><a href="" onclick="return false">Folder 2_2</a>
    						<ul>
    							<li><a href="">Item 1</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    		</ul>
    	</body>
    	<script type="text/javascript">
    		var list = document.getElementById("directory").getElementsByTagName("ul");
    		for(var i = 0; i < list.length; i++)
    		{
    			if(String(list[i].parentNode.nodeName).toLowerCase() == 'li')
    			{
    				if(window.ie)
    				{
    					list[i].parentNode.onclick = open;
    				}
    				else
    				{
    					list[i].parentNode.addEventListener("click",open,true);
    				}
    
    				var reg = new RegExp("(?:\\W|\\s)" + i + "(?:\\W|\\s|$)","g");
    				if(String(document.cookie).search(reg) == -1)
    				{
    					list[i].open = false;
    					list[i].parentNode.className = 'closed';
    					if(window.ie) list[i].style.display = 'none';
    				}
    				else
    				{
    					list[i].open = true;
    					list[i].parentNode.className = 'open';
    					if(window.ie) list[i].style.display = '';
    				}
    			}
    		}
    
    		function open(e)
    		{
    			if(window.ie)
    			{
    				window.event.cancelBubble = true;
    			}
    			else
    			{
    				e.stopPropagation();
    				e.preventDefault;
    			}
    
    			var i;
    			for(i = 0; i < list.length; i++)
    			{
    				if(window.ie)
    				{
    					if(list[i] == this.getElementsByTagName('ul')[0])
    					{
    						break;
    					}
    				}
    				else
    				{
    					if(list[i] == e.target.getElementsByTagName('ul')[0])
    					{
    						break;
    					}
    				}
    			}
    
    			list[i].open = (list[i].open) ? false : true;
    			list[i].parentNode.className = list[i].open ? 'open' : 'closed';
    			if(window.ie)
    			{
    				list[i].style.display = list[i].open ? '' : 'none';
    			}
    
    			write_cookie();
    		}
    
    		function write_cookie()
    		{
    			var str = '';
    			for(var i = 0; i < list.length; i++)
    			{
    				if(list[i].open)
    				{
    					if(str.length > 0)
    					{
    						str += ',';
    					}
    					str += i;
    				}
    			}
    			document.cookie = "open_folders=" + str;
    		}
    	</script>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks hemebond

    will give it a try and let you know

  • #4
    New Coder
    Join Date
    Apr 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hemebond,

    excellent!!!

    Thank you very much indeed.

    Deanoo


  •  

    Posting Permissions

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