PDA

View Full Version : Help needed with a popup div problem



nimbus3
12-21-2006, 08:27 PM
Greatings all

I am really hopping to find some aid with this issue as it has been bugging me for sometime and is almost the only problem i have left to solve with my page.

Ok here is an example of the script i am currently using in the head of an html document.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.box {
width:40px;
height:40px;
display:none;
}
#stylMen1 {
background:#000;
}
#stylMen2 {
background:#333;
}
#stylMen3 {
background:#666666;
}
#stylMen4 {
background:#999;
}
</style>
<script type="text/javascript">
function showDiv(tgTyp)
{
var mypop;
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
{
if(divs[i].className == 'box')
{
divs[i].style.display = 'none';
}
}
if(tgTyp != 'none')
{
if(tgTyp == 'a')
mypop = document.getElementById('stylMen1');
else if(tgTyp == 'b')
mypop = document.getElementById('stylMen2');
else if(tgTyp == 'bod')
mypop = document.getElementById('stylMen3');
else if(tgTyp == 'h1')
mypop = document.getElementById('stylMen4');
mypop.style.display = "block";
}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showDiv(this.options[this.options.selectedIndex].value)">
<option value="none">Choose a tag</option>
<option value="a">&lt;a&gt;</option>
<option value="b">&lt;b&gt;</option>
<option value="bod">&lt;body&gt;</option>
<option value="h1">&lt;h1&gt;</option>
<option>&lt;h2&gt;</option>
<option>&lt;h3&gt;</option>
<option>&lt;h4&gt;</option>
<option>&lt;h5&gt;</option>
<option>&lt;h6&gt;</option>
<option>&lt;&gt;</option>
<option>&lt;&gt;</option>
<option>&lt;&gt;</option>
<option>&lt;&gt;</option>
<option>&lt;&gt;</option>
<option>&lt;&gt;</option>
<option>&lt;&gt;</option>
<option>&lt;&gt;</option>
</select>
</form>
<div id="stylMen1" class="box"></div>
<div id="stylMen2" class="box"></div>
<div id="stylMen3" class="box"></div>
<div id="stylMen4" class="box"></div>
</body>
</html>


Now for the problem:

this part of the script works fine when picking one div per selection from the form, but what i would like to happen is to be able to add more than one div to popup for one or more options. For instance if i selected <option value="bod">&lt;b&gt;</option> then <div id="stylMen2" class="box"></div> and <div id="stylMen3" class="box"></div> would popup one below the other. I have tried just simply adding mypop = document.getElementById('stylMen3'); as shown below:



if(tgTyp != 'none')
{
if(tgTyp == 'a')
mypop = document.getElementById('stylMen1');
else if(tgTyp == 'b')
mypop = document.getElementById('stylMen2');
mypop = document.getElementById('stylMen3');
else if(tgTyp == 'bod')
mypop = document.getElementById('stylMen3');
else if(tgTyp == 'h1')
mypop = document.getElementById('stylMen4');
mypop.style.display = "block";
}

But this did not work.

ps. when picking divs to display, it might not necessarily be divs in sequence (i.e stylMen1 and StyleMen4) ....

Would anybody please help to resolve this problem.

kind regards and thanks for any aid that is given

nimbus3