Jump to content

Showing Div popup with javascript.


matborden
 Share

Recommended Posts

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>

Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...