PDA

View Full Version : why doesn't my content disappear with my div?

tyler jones
10-01-2002, 10:23 PM
I've got a div tag in my page and some script set up to hide most of it when someone clicks a link. But in Mozilla or NN7, it's not hiding the content of the div. It's weird in that it is hiding the div, but not what's contained in it. In my code I have a flash file, but if you want to try it, just substitute that code with an image or something. Do I need to create a layer a different way for Mozilla & NN instead of using the div tag? Thanks. Oh, and I'm also using innerText which Mozilla seems to be able to read, but not write. Again, what would be the correct syntax to get Mozilla to write the innerText?


<HTML>
<HEAD>
<TITLE>help_file_template</TITLE>
<script language="JavaScript">
<!--

function fireClose(){
var divArea = document.getElementById('toggleButton');
var cookieExpires;
var nowDate = new Date();
nowDate.setMonth(nowDate.getMonth() + 12);
cookieExpires = nowDate.toGMTString();

if (divArea.innerText == "Open")
{
divArea.innerText = "Close";
//document.getElementById('flashLayer').style.height = 400;
document.getElementById('flashLayer').style.clip = 'rect(0 670 400 0)';
document.cookie = "showFlash=True;expires=" + cookieExpires;
}
else
{
divArea.innerText = "Open";
document.getElementById('flashLayer').style.clip = 'rect(0 670 25 0)';
document.cookie = "showFlash=False;expires=" + cookieExpires;
}
}

function getFlashCookie() {
var cookieValue = document.cookie;
var cookieStartsAt = cookieValue.indexOf(" showFlash=");
if (cookieStartsAt == -1)
{cookieStartsAt = cookieValue.indexOf("showFlash=");}
if (cookieStartsAt == -1 )
{cookieValue = "";}
else
{
cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt ) + 1;
var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
if ( cookieEndsAt == -1 )
{cookieEndsAt = cookieValue.length;}
cookieValue = unescape( cookieValue.substring( cookieStartsAt, cookieEndsAt));
}

return cookieValue;
}

var showFlash = getFlashCookie();
if ( getFlashCookie() == "False" )
{
clipProperty = 'rect(0 670 25 0)'
toggleButtonText = "Open";
}
else
{
clipProperty = 'rect(0 670 400 0)'
toggleButtonText = "Close";
}

// -->
</script>
</HEAD>
<BODY bgcolor="#FFFFFF">
<script language="JavaScript">
<!--
document.write ("<div id='flashLayer' style='position:absolute; width:670px; height:400px; clip: " + clipProperty + "; z-index:1; left: 20px; top: 20px; overflow: hidden; background-color:red'>");
//-->
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#000066">
<td colspan="3">
<table border="0" width="100%">
<tr>
<td><b><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">&nbsp;Help File</font></b> </td>
<td align="right"><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif" size="1"><b><a href="javascript:fireClose();" style="color:white;"><span id="toggleButton"><script language="javascript">document.write (toggleButtonText);</script></span></a></b></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#000066"><img src="/images/spacer.gif" width="1" height="1"></td>
<td>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="640" height="350" id="help_file_template" align="" vspace="5" hspace="5" border="1">
<param name=movie value="help_file_template.swf">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed src="help_file_template.swf" quality=high bgcolor=#FFFFFF width="640" height="350" vspace="5" align=""
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" hspace="5" border="1">
</embed>
</object></td>
<td bgcolor="#000066"><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
<tr bgcolor="#000066">
<td colspan="3"><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table>

<script language="javascript">
<!--
document.write ("</div>");
//-->
</script>
</BODY>
</HTML>
beetle
10-01-2002, 11:29 PM
Well, the proper DOM method for switching text is accessing the proper textNode then changing it's nodeValue property

Quickie example:function toggle(tNode) {
tNode.nodeValue = (tNode.nodeValue == 'Open') ? 'Close' : 'Open';
}
<span onClick="toggle(this.firstChild)" id="tester">Open</span>But since you are using a script block to write that text, your DOMs are going to get confused about the firstChild. Getting Vladdy's DOM Viewer (http://www.vladdy.net/WebDesign/DOM_TreeViewer.html) and reading my post (http://www.sitepointforums.com/showthread.php?s=&threadid=76795) about textNodes should help you clean up your code to make it DOM compliant. (In otherwords, you need to get rid of the concept of writing text-based HTML variables to the page, like the clipProperty and toggleButtonText variables you have...)
tomwald
06-21-2006, 05:15 AM
Adding this parameter within your Flash object may solve this problem (three-and-a-half years after the fact):

<param name="scale" value="exactfit" />