Hello, all.
I am using javascript to change the content (innerHTML) of a layer, so as not to reload the page for the same category/sub-category. It works great in FF/NN/Op, but not very well in IE6. It will change the content, fine, but will not display an image if an image is included. In IE, you have to right-click the image placeholder and choose “Show picture”.
WTF??
Here is my JavaScript code:
[code]
<script language=”javascript”>
function changeContent(tid) {
switch(tid) { <cfset thisIteration = 0>
<cfif isDefined(“queryData.itemImage0″)>
<cfloop query=”queryData”>
<cfset internalFiletype = trim(lcase(right(queryData.itemImage0,3)))> //CF variable; internalFileType = extension of file (mov,swf)
case “link_#val(queryData.itemID)#”: // the ID and name of the <A>, also looped in the menu
<cfif trim(internalFiletype) eq “pdf” OR trim(internalFiletype) eq “swf” OR trim(internalFiletype) eq “mov”>
<cfif trim(internalFiletype) eq “pdf”>
<cfset filename = replace(trim(queryData.itemImage0), ” “, “%20”, “all”)>
<cfset “filetype#thisIteration#” = “#right(trim(queryData.itemImage0),3)#”>
thisContent = ‘<OBJECT CLASSID=”clsid:CA8A9780-280D-11CF-A24D-444553540000″ codebase=”http://www.adobe.com/products/acrobat/readstep2.html” height=”99%” width=”99%”><PARAM NAME=”SRC” VALUE=”#request.localhost#_includes/#trim(filename)#” height=”99%” width=”99%”><EMBED SRC=”#request.localhost#_includes/#trim(filename)#” height=”99%” width=”99%”><NOEMBED>Your browser does not support embedded PDF files</NOEMBED></EMBED></OBJECT>’;
</cfif>
<cfif trim(internalFiletype) eq “swf”>
<cfset filename = replace(trim(queryData.itemImage0), ” “, “%20”, “all”)>
<cfset “filetype#thisIteration#” = “#right(trim(queryData.itemImage0),3)#”>
thisContent = ‘<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=”99%” height=”99%” id=”#request.localhost#_includes/#trim(filename)#”><PARAM NAME=movie VALUE=”#request.localhost#_includes/#trim(filename)#”><PARAM NAME=quality VALUE=high><PARAM NAME=LOOP VALUE=”true”><PARAM NAME=bgcolor VALUE=##ffffff><EMBED src=”#request.localhost#_includes/#trim(filename)#” quality=high bgcolor=##ffffff WIDTH=”99%” HEIGHT=”99%” NAME=”#request.localhost#_includes/#trim(filename)#” TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”><NOEMBED>Your browser does not support embedded SWF files</NOEMBED></EMBED></OBJECT>’;
</cfif>
<cfif trim(internalFiletype) eq “mov”>
<cfset filename = replace(trim(queryData.itemImage0), ” “, “%20”, “all”)>
<cfset “filetype#thisIteration#” = “#right(trim(queryData.itemImage0),3)#”>
thisContent = ‘<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” codebase=”http://www.apple.com/qtactivex/qtplugin.cab” align=”center” width=”99%” height=”99%”><param name=”src” value=”#request.localhost#_includes/#trim(queryData.itemImage0)#”><param name=”autoplay” value=”false”><param name=”controller” value=”true”><embed src=”#request.localhost#_includes/#trim(queryData.itemImage0)#” align=”center” autohref=”false” autoplay=”false” cache=”true” controller=”true” height=”99%” href=”#request.localhost#_includes/#trim(queryData.itemImage0)#” hspace=”0″ pluginspage=”http://www.apple.com/quicktime/download/” vspace=”0″ width=”99%” QTSRC=”#request.localhost#_includes/#trim(queryData.itemImage0)#”><noembed>Your browser does not support embedded MOV files</noembed></embed></object>’;
</cfif>
<cfelse>
<cfset “filetype#thisIteration#” = “”>
<cfset thisContent = trim(replace(queryData.itemContents,”‘”,”‘”,”all”))>
<cfset thisTitle = trim(replace(queryData.itemTitle,”‘”,”‘”,”all”))>
thisContent = ‘<font style=”font-weight:bold; font-size:14px; color:##CE7019;”>#trim(thisTitle)#</font><div id=”printVersion” style=”text-align:right; position:relative; font-size:9px;”><a href=”#request.localhost#printarticle.cfml?id=#val(queryData.itemID)#” style=”font-size:9px;” target=”pup_#val(queryData.itemID)#” onFocus=”this.blur();”>Print Page</a> §</div><br /><cfif len(trim(queryData.itemImage0))><img src=”images/#trim(queryData.itemImage0)#” name=”itemImage0_#queryData.currentRow#” id=”itemImage0_#queryData.currentRow#” hspace=”6″ vspace=”4″ border=”0″ align=”left” valign=”top” alt=”Image: #trim(queryData.itemImage0)#” /></cfif><font style=”font-size:14px;”>#trim(thisContent)#</font><cfif len(trim(queryData.itemImage1))><img src=”images/#trim(queryData.itemImage1)#” name=”itemImage1_#queryData.currentRow#” id=”itemImage1_#queryData.currentRow#” hspace=”6″ vspace=”4″ border=”0″ align=”right” valign=”bottom” /></cfif>’;
</cfif>
<cfset theseKeywords = theseKeywords & “,#trim(queryData.itemKeywords)#”>
break;
<cfset thisIteration = thisIteration + 1>
<cfif NOT isDefined(“url.id”)><cfset url.id = val(queryData.itemID)></cfif>
</cfloop></cfif>
default:
thisContent = “”;
break;
}
dg = document.getElementById(“tContent”); // the name of the layer which contains the dynamic content
dg.innerHTML = thisContent; dg.scrollTop=0; // change the content and scroll to the top automatically
<cfif isDefined(“queryData.itemID”)><cfloop query=”queryData”>
document.getElementById(“link_#val(queryData.itemID)#”).className = “menu”; // set all menu class to unselected class
document.getElementById(“cell_#val(queryData.itemID)#”).className = “menu”;
</cfloop></cfif>
reg = /link/gi;
document.getElementById(tid.replace(reg,”cell”)).className = “menuSelectedCell”; // set selected menu item to selected class
document.getElementById(tid).className = “menuSelected”; // set selected menu item to selected class
}
</script>
Here is my HTML/CF code:
[code]
<div id=”menuTable” style=”width:180px; height:475px; border:0px solid black; overflow:auto;”>
<table width=”163″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″ hspace=”0″ vspace=”0″>
<tr>
<td class=”menuHeader”>#trim(thisTitle)#</td>
</tr><cfset counter = 0><cfset thisMenuLoop = 0>
<cfloop query=”queryData”><cfset thsID = val(queryData.itemParent)>
<cfif val(thsID) gt 0><cfset counter = counter + 1></cfif>
<cfset thisFileType = trim(right(queryData.itemImage0,3))>
<cfif thisFileType eq “mov” OR thisFileType eq “pdf”>
<tr><cfset thisClassCell=”menu”><cfset thisClass=”menu”><cfif val(queryData.itemID) eq val(articleID)><cfset thisClassCell=”menuSelectedCell”><cfset thisClass=”menuSelected”></cfif>
<td id=”cell_#val(queryData.itemID)#” class=”#thisClassCell#”><cfif val(thsID) gt 0> </cfif><a href=”javascript:void(0);” id=”link_#val(queryData.itemID)#” style=”border:0px solid ##999999;” onClick=”openMedia(‘#request.localhost#_includes/#trim(queryData.itemImage0)#’,’item#val(queryData.itemID)#’,’#thisFileType#’);” onFocus=”this.blur();” class=”#thisClass#”>#trim(queryData.itemTitle)#</a> <font style=”color:##000000; font-weight:normal;”>§</font></td>
</tr><cfset thisMenuLoop = thisMenuLoop + 1>
<cfelse>
<tr><cfset thisClassCell=”menu”><cfset thisClass=”menu”><cfif val(queryData.itemID) eq val(articleID)><cfset thisClassCell=”menuSelectedCell”><cfset thisClass=”menuSelected”></cfif>
<td id=”cell_#val(queryData.itemID)#” class=”#thisClassCell#”><cfif val(thsID) gt 0> </cfif><a href=”javascript:void(0);” id=”link_#val(queryData.itemID)#” style=”border:0px solid ##999999;” onClick=”changeContent(this.id);” onFocus=”this.blur();” class=”#thisClass#”>#trim(queryData.itemTitle)#</a></td>
</tr><cfset thisMenuLoop = thisMenuLoop + 1>
</cfif>
</cfloop>
</table>
</div>
Any ideas?
Thanks,
^_^