The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Menu with tabs and using cookies

Hi,
My problem has to do with a menu with tabs. I can change a menu, using java, without changing the url, see this thread. Problem is the reload of the page. If menu 3 is shown and you refresh the page or click a link, the menu changes to default (=menu 1). I can't handle the cookies for containing menu 3 after reload.

When it comes to dealing with cookies, we want to set the cookie when we show a menu.

Code javascript:

createCookie('menu', i,365);

The trickier part is when we load the page. When we call the function with no menu number, what would work great is to instead get the cookie value.

Code javascript:

num = num || parseInt(readCookie('menu'));

The parseInt is required because the menu number is stored in the cookie as a string value, but we want to use it as a numeric value.

What though if this is the first time that someone is visiting the page. The page loads and runs the function with no number, there is no cookie value yet that has stored the last menu that was used, so num still remains undefined.

We can specify another default value to use, should the others not be able to provide a useful result.

Currently there are style attributes in the code, which now serve a redundant purpose, as the script is performing the same job.
The script code in the menu tabs should be removed completely and instead be attached when the page loads.
The links should refer to a valid location for the benefit of web spiders and clients without javascript support.

That leaves just the base html, so that someone without css or javscript capabilities can still use the page. It also means that any javascript changes occur in only the one place.

With the style attributes removed you can then improve the script performance by moving it to the bottom of the body. This also frees you from using an onload technique, as the script, due to being at the bottom of the page, now has full access to the DOM without having to wait for the page to load.

Instead of explicitly defining events for each menu tab, we can attach the events by starting from the first menu tab and walking through them to their end.

When the showMenu function runs, we can get the menu number from the href of the link. All we're after is the last two digits of the fragment identifier, that being '#menutab_01'
There can be a couple of different techniques to achieve this.
One is to take the last two characters with '#menutab_01'.slice(-2)
Another is to use a regular expression to get the first group of digits with '#menutab_01'.match(/\d+/)[0];

One of the gotcha's with using parseInt is that it converts "08" to 0 and "09" to 1 because the leading zero makes parseInt think that it's dealing with octal numbers. This is why specifying a decimal number base with 10 is a good practice with parseInt.

Now we can get rid of some duplication. There are two nearly identical loops, where the only difference is in the body of the loop. We can have a forEachMenuTab function and just provide it with a different function to run on each occasion.