PDA

View Full Version : my menu works only the first time



carlitos_way
Mar 22nd, 2007, 02:55 PM
hi all, in a webpage there is a menu, and i wanted to do that if i click on a tab of the menu, i get showed the content linked (e.g. i click on tab home, i show the content of the home, then i click on products and i show the products, etc..)

i figured how to do it, but it works only one time, if i click twice on a menu i get an error :(

this is the webpage (http://www.viniolindog.it/test/index.html), and its js:

// Cambio pad
var gloID = "home";

function initPad() {
var h = document.getElementById("home");
h.setAttribute('id','current');

var c = document.getElementById("content-home");
c.style.visibility = 'visible';
c.style.display = 'block';
}

function hide() {
var h = document.getElementById("current");
h.setAttribute('id',gloID);

var c = document.getElementById("content-"+gloID);
c.style.visibility = 'hidden';
c.style.display = 'none';
}

function show(id) {
var h = document.getElementById(id);
h.setAttribute('id','current');

var c = document.getElementById("content-"+id);
c.style.visibility = 'visible';
c.style.display = 'block';
}

function changePad(id) {
//nascondi
hide();
//mostra
show(id);

//aggiorna var globale
gloID = id;
}

graficus
Mar 22nd, 2007, 09:59 PM
Not exactly sure what you are trying to do. Are you trying to do menu tabs like on apple.com?
Are you using php/asp or plain html? Using CSS table ids?

carlitos_way
Mar 22nd, 2007, 10:16 PM
Not exactly sure what you are trying to do. Are you trying to do menu tabs like on apple.com?
Are you using php/asp or plain html? Using CSS table ids?

yes, but i'd like to do it without reloading the page. the menu is made using the sliding doors' (http://www.alistapart.com/articles/slidingdoors) technique.

the javascript hide and shows the pages corresponding to the menu, playing with style attribute.

i used only html, css and javascript

graficus
Mar 22nd, 2007, 10:40 PM
Check if this (http://projectseven.com/products/tools/tabpanel/index.htm) works for you.
If you dont want to buy it I can probably send you a 2-3 tab mockup, and you can take it from there.

david_kw
Mar 22nd, 2007, 11:25 PM
The problem appears to be in function show(id) when you are trying to select a tab that is already selected. The value of "current" was passed for the id but the function hide() gets rid of that id from the DOM.

The easiest way to fix it is probably to just add a check to the beginning of your changePad() function to see if the selected tab is already selected.



function changePad(id) {
// if the tab is already selected then do nothing
if (id == "current") {
return;
}

//nascondi
hide();
//mostra
show(id);

//aggiorna var globale
gloID = id;
}


david_kw

FJbrian
Mar 22nd, 2007, 11:28 PM
Check if this (http://projectseven.com/products/tools/tabpanel/index.htm) works for you.
If you dont want to buy it I can probably send you a 2-3 tab mockup, and you can take it from there.

http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

carlitos_way
Mar 23rd, 2007, 09:33 AM
thanks david ;)