Help with showing/hiding div layers

Hi,

I'm having trouble working out why my javascript code is showing more div layers that what I would like on each click of a href="javascript:changeDiv(1,1,7); button/link.

Apologies for the size of the post but I presumed the more I supply the easy it will be to understand where I'm coming from......

My setup up is this:

3 column layout

column 1 = a uk map graphic, with 7 clickable image maps relating to 7 areas of the uk (ie midlands, north west, north east etc)

column 2 = when a user clicks an area, this column is populated with a clickable list of customers from that particular area

column 3 = when a use clicks a customer, this column is populated with a testamonial from that particular customer

My code uses the following javascipt functions:

//the function to begin the change of the div been shown

function changeDiv(pass, level, count) {
var tonum = level+count;
for (j=level;j<tonum;j++)
{
if (j == pass)
{
showDiv(j);
}
else
{
hideDiv (j);
}
}
}

//the function to show that particular div

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideshow.divs[i].visibility = 'visible';
}
}
}

//the function to hide the other divs which aren't selected

function hideDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideshow.divs[i].visibility = 'hidden';
}
}
}

The 7 region divs in column 2 use ids 1-7 id="1", id="2" etc

The testamonial divs in column 3 use ids starting from 8, going up ie. id="8", id="9", id="10" etc

The functions and parameters I call to display the 7 regions are:
href="javascript:changeDiv(1,1,7);"
href="javascript:changeDiv(2,1,7);"
href="javascript:changeDiv(3,1,7);"
href="javascript:changeDiv(4,1,7);"
href="javascript:changeDiv(5,1,7);"
href="javascript:changeDiv(6,1,7);"
href="javascript:changeDiv(7,1,7);"

My issue I haven't been able to solve is this:

when the 1st region script is called (href="javascript:changeDiv(1,1,7);") my div in column 3 with id="10" displays.

I presume this has something to do with the fact that this id includes the number 1, even though I haven't actually called the function href="javascript:changeDiv(10,1,7);"

Please can someone enlighten me!?

Once I have this working correctly I expect to have around 70 individual divs, each numbered accordingly ie. 21, 43, 55 etc etc, so in the current set-up any number of divs will be displayed at each function call.

Thanks in advance for any assistance.

id paseed as parameter is a string, not a number, thus is you want to use id for a further math add/substract or as an index for an array you should first transform it in a number like this:

Number(string)
or
parseInt(string)
or
string*1

Thanks for that Kor...

can I presume that I need to add in something like (in bold):

function changeDiv(pass, level, count) {
var tonum = level+count;
for (j=level;j<tonum;j++)
{
if (j == pass)
{
showDiv(Number(j));
}
else
{
hideDiv(Number(j));
}
}
}


Or is there an addition to make within the showDiv(pass) and hidsDiv(pass) functions?

thanks again

Nope, j is a number. Try:

function changeDiv(pass, level, count) {
var pass=pass*1;
var level=level*1;
var count=count*1
...
the rest of the code

2. on the other hand the modern / NS4 and IE4 variants are not correct

- div[ i ] is an object, not an id
- to use the indent as id, you should reset it as String
- NS4 uses hide/show value for visibility
- IE 4 uses also object.style.attribute, same as modern browsers

Thus try:


...
else
if (document.layers) // Netscape 4
document.layers[String(i)].visibility = 'show';
else // IE 4
document.all[String(i)].style.visibility = 'visible';
}
...

...
if (document.layers) // Netscape 4
document.layers[String(i)].visibility = 'hide';
else // IE 4
document.all[String(i)].style.visibility = 'hidden';
}
...

Thanks for the reply...

but unfortunately, it still displays div ids 1 and 10 when the link to href="javascript:changeDiv(1,1,7);" is pressed.

Are there any other areas that could be effecting which divs display on certain function calls?

ta.

I reckon your code looks much too intricate...you need to transform strings in number back and forth...

Wouldn't be easier to use the index order instead of id? leme think, and if time, I'll make an example

If you could Kor that would be excellent and much appreciated.

Thanks

Hi all,

At the recommendation of another programmer I have redone the functions to show and hide layers to what appears to be a cleaner and more simpler piece of code.

If you look at the link below, the html code and script is exactly what has been recommended but I'm still having no joy as this page throws out errors.

Would you have any comments on this.....

http://www.thompsonsuk.net/customer...inprogress2.htm

Thanks for your help!

The link posted in invalid...

Question: Do you really need your code to be NS4 and IE4 compatible ?