Showing Div popup with javascript.

[matborden]

i have used this code for the longest time to hide a div with an iframe or a SWF object for the longest.

<script type="text/javascript">function youtube(){ var swf2 = document.getElementById("youtube");if(swf2.style.display === "none"){swf2.style.display = "block";}else {swf2.style.display = "none";}var swf3 = document.getElementById("ytvid");if(swf3.style.display === "none"){swf3.style.display = "block";}else {swf3.style.display = "none";}}</script>

i have been trying to make it simpler useing arguments, but i cant seem to get it to work.

<script type="text/javascript">function popup(div,frame){ var swf1 = document.getElementById("div");if(swf1.style.display === "none"){swf1.style.display = "block";}else {swf1.style.display = "none";}var swf2 = document.getElementById("frame");if(swf2.style.display === "none"){swf2.style.display = "block";}else {swf2.style.display = "none";}}</script>

can anyone tell me why i cant get it to work right, and how to get the Div hidden and show back up with the new code (as when i tryed the exact same frames thay wouldnt hide or popout)

<div id="youtube" style="visibility: visable; display: none; position: absolute; top: 0pt; left: 0px; height:100%; width:100%;background-image: url(http://i148.photobucket.com/albums/s29/matborden/dim.png)"><center><img src='http://s148.photobucket.com/albums/s29/matborden/layouts/SPD/blank.png' height='116' width='1'><table style="text-align: left; width: 400px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="width: 1px;"><img src="http://i148.photobucket.com/albums/s29/matborden/layout11/lt.png"></td><td style="background: url('http://i148.photobucket.com/albums/s29/matborden/layout11/tc.png') repeat-x; text-align: right;"><a href="#" onclick="youtube(); return false;"><img src="http://i148.photobucket.com/albums/s29/matborden/layout11/CloseNormal.png"onmouseover="this.src='http://i148.photobucket.com/albums/s29/matborden/layout11/CloseHover.png'"onmouseout="this.src='http://i148.photobucket.com/albums/s29/matborden/layout11/CloseNormal.png'"></a></td><td><img src="http://i148.photobucket.com/albums/s29/matborden/layout11/rt.png"></td></tr><tr><td style="background: url('http://i148.photobucket.com/albums/s29/matborden/layout11/cl.png') repeat-y;"></td><td style="background: url('http://i148.photobucket.com/albums/s29/matborden/layout11/c.png')"><table style="text-align: right; width: 100%;" border="0"cellpadding="0" cellspacing="0">  <tbody>	<tr>	  <td><iframe id="ytvid" name="ytvid" style="visibility: visable; display: none; border-top: 1px; border-left: 1px; border-right: 1px; border-bottom: 1px;border-color:black;border-style:solid;" width="640" height="390" src="" frameborder="0" allowfullscreen></iframe></td>	  <td><div style="overflow: hidden;background: url('http://i148.photobucket.com/albums/s29/matborden/layout11/pagebg.png'); width:160; height: 390px; border-top: 1px; border-left: 0px; border-right: 1px; border-bottom: 1px;border-color:black;border-style:solid;"><a name="page1"></a><div class="misc" style="overflow: hidden; width:160; height: 390px; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 0px;border-color:black;border-style:solid;"><center><span id="nav"><a href="http://www.youtube.com/embed/CAwYfvnAqn8?rel=0" target="ytvid"><div><img src='http://s148.photobucket.com/albums/s29/matborden/layouts/SPD/blank.png' height='4' width='0'></img><br>Jaimie's Birthday</div></a></span><a href="#page1" target="avatar_content">[Page 1]</a> - <a href="#page2" target="avatar_content">[Page 2]</a></div><a name="page2"></a><div class='misc' style="overflow: hidden; width:160; height: 390px; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 0px;border-color:black;border-style:solid;"><center><span id="nav"><a href="http://www.youtube.com/embed/P3Ci09GwAmg?rel=0" target="ytvid"><div><img src='http://s148.photobucket.com/albums/s29/matborden/layouts/SPD/blank.png' height='4' width='0'></img><br>Minecraft - "Diamonds"</div></a></span><a href="#page1" target="avatar_content">[Page 1]</a> - <a href="#page2" target="avatar_content">[Page 2]</a></div></div>

[justsomeguy]

You can pass the IDs to the function and then use those to look up the elements.

function popup(div,frame){  var swf1 = document.getElementById(div);  var swf2 = document.getElementById(frame);

[matborden]

<script type="text/javascript">function popup(var1,var2){  var div = document.getElementById(var1);  var ele = document.getElementById(var2);  if(div.style.display === "none"){div.style.display = "block";}  else {div.style.display = "none";  if(ele.style.display === "none"){ele.style.display = "block";}  else {ele.style.display = "none";}</script> <a href="#" onclick="popup(one,two)">pop</a>  <div id="one" style="visibility: visable; display: none; height:100; width:100;">text<div id="two" style="visibility: visable; display: none; height:100; width:100;">text2</div></div>

This is the code I'm using to test now, but i cant get it to do anything. The link should un-hide and hide the text.

[dsonesuk]

1) you are missing closing curly bracket for both else conditions. 2) visable should be visible 3) apply unit type to height and width as in 100px 4) wrap id ref passed with function call one and two in single quotes 'one', 'two' else it will treat these as referring to JavaScript variables

[matborden]

1) you are missing closing curly bracket for both else conditions. 2) visable should be visible 3) apply unit type to height and width as in 100px 4) wrap id ref passed with function call one and two in single quotes 'one', 'two' else it will treat these as referring to JavaScript variables

Thanks, currently running on one hour of sleep so i guess i missed those. got it working now.