SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to remember last action?

    Hi,
    I am new to javascript. I am creating a navigation system for my site, all menues are hidden only their headings are appear on the site. When a visitor click on a heading its shows the navigation links. Its working smoothly.

    The problem is when user open a navagation menu and click on a link to browse the next page/link, after loading the next page the menu got close and visitor need to reopen the desired menu. I want that the desired menu stay open while browsing the site and only closed when a visitor wants to close it.

    HTML Code:
    <script type="text/javascript">
    function toggleLayer(geTLayer) {
    	var style2 = document.getElementById(geTLayer);
    	style2.style.display = style2.style.display ? "":"none";
    }
    </script>
    <span id="cat1" class="menu_off" onclick="return toggleLayer('cat-1); return false;">Category 1</span>
    <div id="cat-1" style="display:none;">
    <a href="http://localhost/cat-1/">subcat1</a>
    </div>
              .
              .
              .
    <span id="cat10" class="menu_off" onclick="return toggleLayer('cat-10); return false;">Category 10</span>
    <div id="cat-10" style="display:none;">
    <a href="http://localhost/cat-10/">subcat1</a>
    </div>
    Hopefully you will understand the problem.
    Thank you all

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,238
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    persistant menu state

    If you want the menu to remain the same on the next page, you have 2 choices AFAIK. Either you can pass the info to the next page using GET variables and have the script parse out the value. Or have a variable in each page pre-set the menu.

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague
    Or have a variable in each page pre-set the menu.
    Please can you explain it. Some hints how I can do it?.
    Thanks

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,238
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    page location in menu

    If you're on page "cat-1" on the page you could put
    HTML Code:
    <script type="text/javascript">
    var page_id = "cat-1"
    </script>
    and then either call the existing function with
    HTML Code:
    toggleLayer(page_id);
    somewhere or modify your existing script to test for page_id value and use it in the function on page load.
    Although if you have lots of pages or you want the script to scale well, it might be better to have your script parse out the "cat-1" from the location value and then use that. Maybe something like (in very crude pseiudo-code, but you should get the idea)
    Code:
    var page_loc = location.href;
    var page_id = page_loc.match(/localhost\/(cat-[0-9]+)\//);

  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've changed my code for session cookie. Here is the code.
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function toggleLayer(geTLayer) {
    	var style2 = document.getElementById(geTLayer);
            if (style2.style.display) {
    		style2.style.display = '';
    		window.document.cookie = "Layer" + geTLayer + "=" + geTLayer + ";"
    	}
    	else {
    		style2.style.display = 'none';
    		window.document.cookie = "Layer" + geTLayer + "=NULL;"
    	}
    }
    function checKCookie() {
    	var cookies = document.cookie.split(/; /g);
    	
    	var re = /^Layer.+/;
    	for (var i=0; i<cookies.length; i++) {
    		var cookie = cookies[i];
    		if (cookie.indexOf("=") == -1) {
    			continue;
    		}
    		var name = cookie.substring(0, cookie.indexOf("="));
    		var value =  cookie.substring(cookie.indexOf("=") + 1);
    		if (re.test(name) && value != 'NULL') {
    			toggleLayer(value);
    		}
    	}
    }
    </script>
    </head>
    <body onload="checKCookie()">
    <span id="cat1" class="menu_off" onclick="return toggleLayer('cat-1); return false;">Category 1</span>
    <div id="cat-1" style="display:none;">
    <a href="http://localhost/cat-1/">subcat1</a>
    </div>
              .
              .
              .
    <span id="cat10" class="menu_off" onclick="return toggleLayer('cat-10); return false;">Category 10</span>
    <div id="cat-10" style="display:none;">
    <a href="http://localhost/cat-10/">subcat1</a>
    </div>
    </body>
    </html>
    What do you think? Any advice?

    Thanks

  6. #6
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I forgotten to tell you, this method is working on my localhost properly.

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,238
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    3rd way!

    I stand corrected. Besides GET vars and in-page vars there are cookies too.
    Because I've never used them I didn't think of them, but yes, you can use cookies to hold information.
    I'm not qualified to evaluate your "cookie" code, but hopefully someone with more experience using them will chime in.


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
  •