Change layer style of different layers at the same time

Discussion in 'JavaScript' started by Wouter, Apr 12, 2008.

0
  1. #1
    I'm looking for a way to change the layer style of more layers at the same time when clicking on a link.

    To give you an example:

    There are four links, when you click on any of those links, all links will change into the second link (by making another layer visible). If you click that link, they all change into the third link etc.

    The only problem is that the number of the links is dynamic, so you can have 1 link to click on to change it to the next one, or you can have ten links.

    This is what I've got now:

    
<html>

<head>

<script language=javascript>
var select =	new Array();
var secondselect = new Array();

function FillForm(regionr,accnr,telnieuw,telhuidig)
{
document.formulier['select[1]'].value = regionr;
document.formulier['secondselect[1]'].value = accnr;

document.getElementById(telnieuw).style.visibility = 'visible';
document.getElementById(telhuidig).style.visibility = 'hidden';

}
function FillForm2(regionr,accnr,telnieuw,telhuidig)
{
document.formulier['select[2]'].value = regionr;
document.formulier['secondselect[2]'].value = accnr;

document.getElementById(telnieuw).style.visibility = 'visible';
document.getElementById(telhuidig).style.visibility = 'hidden';
}
function FillForm3(regionr,accnr,telnieuw,telhuidig)
{
document.formulier['select[3]'].value = regionr;
document.formulier['secondselect[3]'].value = accnr;

document.getElementById(telnieuw).style.visibility = 'visible';
document.getElementById(telhuidig).style.visibility = 'hidden';
}
function FillForm4(regionr,accnr,telnieuw,telhuidig)
{
document.formulier['select[4]'].value = regionr;
document.formulier['secondselect[4]'].value = accnr;

document.getElementById(telnieuw).style.visibility = 'visible';
document.getElementById(telhuidig).style.visibility = 'hidden';
}
</script>

</head>

<body>


<div id='layer0' style='position:absolute;'>
<P>Area 1<BR>
When you click here the first row of the form is filled<BR>
<a href='#' onClick="FillForm('1','1','layer1','layer0')">Do It!</a></P>
</div>

<div id='layer1' style='visibility:hidden; position:absolute;'>
<P>Area 1<BR>
When you click here the second row of the form is filled<BR>
<a href='#' onClick="FillForm2('1','2','layer2','layer1')">Do It!</a></P>
</div>

<div id='layer2' style='visibility:hidden; position:absolute;'>
<P>Area 1<BR>
When you click here the third row of the form is filled<BR>
<a href='#' onClick="FillForm3('1','3','layer3','layer2')">Do It!</a></P>
</div>

<div id='layer3' style='visibility:hidden; position:absolute;'>
<P>Area 1<BR>
When you click here the fourth row of the form is filled<BR>
<a href='#' onClick="FillForm4('1','4','layer4','layer3')">Do It!</a></P>
</div>
<BR><BR><BR><BR><BR><BR>




<div id='layer0' style='position:absolute;'>
<P>Area 2<BR>
When you click here the first row of the form is filled<BR>
<a href='#' onClick="FillForm('1','1','layer1','layer0')">Do It!</a></P>
</div>

<div id='layer1' style='visibility:hidden; position:absolute;'>
<P>Area 2<BR>
When you click here the second row of the form is filled<BR>
<a href='#' onClick="FillForm2('1','2','layer2','layer1')">Do It!</a></P>
</div>

<div id='layer2' style='visibility:hidden; position:absolute;'>
<P>Area 2<BR>
When you click here the third row of the form is filled<BR>
<a href='#' onClick="FillForm3('1','3','layer3','layer2')">Do It!</a></P>
</div>

<div id='layer3' style='visibility:hidden; position:absolute;'>
<P>Area 2<BR>
When you click here the fourth row of the form is filled<BR>
<a href='#' onClick="FillForm4('1','4','layer4','layer3')">Do It!</a></P>
</div>
<BR><BR><BR><BR><BR><BR>




<div id='layer0' style='position:absolute;'>
<P>Area 3<BR>
When you click here the first row of the form is filled<BR>
<a href='#' onClick="FillForm('1','1','layer1','layer0')">Do It!</a></P>
</div>

<div id='layer1' style='visibility:hidden; position:absolute;'>
<P>Area 3<BR>
When you click here the second row of the form is filled<BR>
<a href='#' onClick="FillForm2('1','2','layer2','layer1')">Do It!</a></P>
</div>

<div id='layer2' style='visibility:hidden; position:absolute;'>
<P>Area 3<BR>
When you click here the third row of the form is filled<BR>
<a href='#' onClick="FillForm3('1','3','layer3','layer2')">Do It!</a></P>
</div>

<div id='layer3' style='visibility:hidden; position:absolute;'>
<P>Area 3<BR>
When you click here the fourth row of the form is filled<BR>
<a href='#' onClick="FillForm4('1','4','layer4','layer3')">Do It!</a></P>
</div>
<BR><BR><BR><BR><BR><BR>




<div id='layer0' style='position:absolute;'>
<P>Area 4<BR>
When you click here the first row of the form is filled<BR>
<a href='#' onClick="FillForm('1','1','layer1','layer0')">Do It!</a></P>
</div>

<div id='layer1' style='visibility:hidden; position:absolute;'>
<P>Area 4<BR>
When you click here the second row of the form is filled<BR>
<a href='#' onClick="FillForm2('1','2','layer2','layer1')">Do It!</a></P>
</div>

<div id='layer2' style='visibility:hidden; position:absolute;'>
<P>Area 4<BR>
When you click here the third row of the form is filled<BR>
<a href='#' onClick="FillForm3('1','3','layer3','layer2')">Do It!</a></P>
</div>

<div id='layer3' style='visibility:hidden; position:absolute;'>
<P>Area 4<BR>
When you click here the fourth row of the form is filled<BR>
<a href='#' onClick="FillForm4('1','4','layer4','layer3')">Do It!</a></P>
</div>
<BR><BR><BR><BR><BR><BR>




<form name=formulier>

<SELECT NAME="select[1]" class="input" style = "width:150px">
  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
  <OPTION VALUE="5">5</OPTION>
  <OPTION VALUE="6">6</OPTION>
  <OPTION VALUE="7">7</OPTION>
</SELECT>

<SELECT NAME="secondselect[1]" class="input" style = "width:250px">

  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
</SELECT>

<BR>
<SELECT NAME="select[2]" class="input" style = "width:150px">
  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
  <OPTION VALUE="5">5</OPTION>
  <OPTION VALUE="6">6</OPTION>
  <OPTION VALUE="7">7</OPTION>
</SELECT>

<SELECT NAME="secondselect[2]" class="input" style = "width:250px">

  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
</SELECT>

<BR>
<SELECT NAME="select[3]" class="input" style = "width:150px">
  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
  <OPTION VALUE="5">5</OPTION>
  <OPTION VALUE="6">6</OPTION>
  <OPTION VALUE="7">7</OPTION>>
</SELECT>

<SELECT NAME="secondselect[3]" class="input" style = "width:250px">
 
  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
</SELECT>

<BR>
<SELECT NAME="select[4]" class="input" style = "width:150px">
  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
  <OPTION VALUE="5">5</OPTION>
  <OPTION VALUE="6">6</OPTION>
  <OPTION VALUE="7">7</OPTION>
</SELECT>

<SELECT NAME="secondselect[4]" class="input" style = "width:250px">

  <OPTION VALUE="0" >0</OPTION>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
</SELECT>

<BR>
</form>
</body>

</html>
    PHP:

    Here is a live example:

    http://www.coolerealtones.com/test8.php

    The purpose is that every Area should change when one of the links is clicked. But the problem is that only the first changes. While all the divs have the same id. I thought that all the divs would change if they all have the same id, but only the first changes.

    Does anyone know what I'm doing wrong?
     
    Wouter, Apr 12, 2008 IP
  2. hogan_h

    hogan_h Peon

    Messages:
    199
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, it isn't allowed for two elements to have the same id, so you will need to use something else to group your elements, maybe giving them the same css class, etc...
     
    hogan_h, Apr 13, 2008 IP