Javascript Cross Browser Issue with FireFox

viki123 · 08-28-2006, 05:56 PM

I have run out of options and would love any help on this issue. Thanks in advance

I spawn a popup window and list image files in the window with this code, The users can select the image that they would like to preview by clicking on the link

Code:

For Each file1 in f.files
	if (instr(lcase(file1.name), ".jpg") > 0) and (includeJPG) then
		s = s & "<a href=""javascript: previewImageFunc('" & lcase(file1.name) & "')"">" & lcase(file1.name) & "</a>"
		s = s &   "<BR>"
	end if

In IE 6.0 this works great but I get no preview or error message in FireFox 1.5.0.6. This is the preview javascript

Code:

var fullpathname='';
	function previewImageFunc(imagename)
	{
		fullpathname =  "/<%=session("brand")%>FILES/access_db/viki/images/<%=imagetype%>/" + selected_folder_name + "/" + imagename;
		var innerHtml = "<span style='font-family:verdana,tahoma;font-size:9px'>" + imagename + "<br><img width=300 src=" + fullpathname + "></span>";
		buttonsDiv.style.display = "";
		imagePreview.innerHTML = innerHtml;
	}

_Aerospace_Eng_ · 08-28-2006, 08:01 PM

Don't use variables that have reserved words in JS for example innerHTML is already something in JS don't use it for a variable. What is buttonsDiv? Do you have the html that goes with the script?

viki123 · 08-28-2006, 08:19 PM

Thanks Aero,

I also just found out that firefox doesn't support innerHTML, the work around is here:

http://www.webdeveloper.com/forum/sh...ad.php?t=74592

I am not familiar with how to use the syntax for :document.getElementById, which is thier solution. Here is the rest of the HTMl that you suggested.

Code:

<%
dim folder_name, imagetype, includeJPG, includeSWF
imagetype = request("type")
if imagetype="" then imagetype="800x"
includeJPG = (trim(request("xJPG"))="")
if includeJPG then
	includeJPGInt=""
else
	includeJPGInt=1
end if
includeSWF = (trim(request("xSWF"))="")
if includeSWF then
	includeSWFInt=""
else
	includeSWFInt=1
end if
folder_name = request("folder_name")
if len(folder_name)=0 then folder_name = "Other"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select Image</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
	var fullpathname='';
	function previewImageFunc(imagename)
	{
		fullpathname =  "/<%=session("brand")%>FILES/images/<%=imagetype%>/" + selected_folder_name + "/" + imagename;
		var innerHtml = "<span style='font-family:verdana,tahoma;font-size:9px'>" + imagename + "<br><img width=300 src=" + fullpathname + "></span>";
		buttonsDiv.style.display = "";
		imagePreview.innerHTML = innerHtml;
	//document.getElementById("imagePreview").innerHtml = innerHtml;
	}
	function previewFlash(flashname)
	{
		fullpathname =  "/<%=session("brand")%>FILES/access_db/viki/images/<%=imagetype%>/" + selected_folder_name + "/" + flashname;
//		var innerHtml = "<span style='font-family:verdana,tahoma;font-size:9px'>" + imagename + "<br><img width='300' src='" + fullpath_imagename + "'></span>";
		var innerHtml = "<span style='font-family:verdana,tahoma;font-size:9px'>" +
						flashname + 
						"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' name='bg' width='300' height='250' id='bg'>" +
						"  <param name='movie' value='" + fullpathname + "'>" +
						"  <param name='quality' value='high'><param name='SCALE' value='noborder'><param name='LOOP' value='false'>" +
						"  <embed src='" + fullpathname + "' width='300' height='250' loop='false' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' scale='noborder' name='bg'></embed>" +
						"</object>" +
						"</span>";
		buttonsDiv.style.display = "";
		//imagePreview.innerHTML = innerHtml;
	imagePreview.innerHtml = innerHtml;
	//document.getElementById("imagePreview").innerHtml = innerHtml;

	
	
	
	}	
	function selectImage()
	{
		window.opener.selected_image = fullpathname;
		window.opener.focus();
		window.close();
	}
	function ChangeFolder()
	{
	
	}
	</script>
<style type="text/css">
<!--
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-size: 13px}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
-->
</style>
</head>
<body onLoad="window.focus()">
<div align="center"><img src="../../images/select-back-header.gif" width="391" height="54"><br> 
</div><form name="form1" id="form1" method="GET">
<input type=HIDDEN name=xJPG value="<%=includeJPGInt%>">
<input type=HIDDEN name=xSWF value="<%=includeSWFInt%>">
<input type=HIDDEN name=type value="<%=imagetype%>">
 <table width="100%"  border="0" cellspacing="0" cellpadding="2"> 
<tr> <th width="20%" valign="top" nowrap scope="row"><span class="style8">Image 
Folder:</span></th><td valign="top"> <span class="style8"> <select name="folder_name" onchange="form1.submit()"><OPTION VALUE="Art">Art</OPTION><OPTION VALUE="animals">Animals</OPTION><OPTION VALUE="Computer">Computer</OPTION><OPTION VALUE="English">English</OPTION><OPTION VALUE="ForeignLanguage">Foreign 
Language</OPTION><OPTION VALUE="Geography">Geography</OPTION><OPTION VALUE="History">History</OPTION><OPTION VALUE="Literature">Literature</OPTION><OPTION VALUE="Math">Math</OPTION><OPTION VALUE="Music">Music</OPTION><OPTION VALUE="Other">Other</OPTION><OPTION VALUE="Sci">Science</OPTION><OPTION VALUE="SocialStudies">Social 
Studies</OPTION></select> <a href="upload_multimedia.asp?<%=request.QueryString%>">upload 
new images</a> <script language="javascript">
		var selected_folder_name='<%=folder_name%>';
		if (selected_folder_name.length>0) 
		{
			var oe = form1.folder_name;
			for (var i=0; i<oe.length; i++)
				if (oe[i].value == selected_folder_name) oe[i].selected = true;
		}
		</script> </span></td><td valign="top">&nbsp;</td></tr> <tr> <th valign="top" nowrap scope="row"><p class="style1 style4">Image 
File(s):</p><p class="style8"><img src="../../images/pick-image.jpg" width="90" height="130"> 
</p></th><td valign="top"><span class="style8"> <%
dim fso, f, file1, s
set fso= Server.CreateObject("Scripting.FileSystemObject")
'response.write( Server.MapPath( "/" & session("brand") & "FILES/access_db/viki/images/" & imagetype & "/") & "\" & folder_name )
set f = fso.GetFolder( Server.MapPath( "/" & session("brand") & "FILES/access_db/viki/images/" & imagetype & "/") & "\" & folder_name )
'response.Write( typename(f) & "<br>")
'thecount=imgfiles.count

For Each file1 in f.files
	if (instr(lcase(file1.name), ".jpg") > 0) and (includeJPG) then
		s = s & "<a href=""javascript: previewImageFunc('" & lcase(file1.name) & "')"">" & lcase(file1.name) & "</a>"
		s = s &   "<BR>"
	end if
	if (instr(lcase(file1.name), ".swf") > 0) and (includeSWF) then
		s = s & "<a href=""javascript: previewFlash('" & lcase(file1.name) & "')"">" & lcase(file1.name) & "</a>"
		s = s &   "<BR>"
	end if
Next

response.Write(s)
response.Write("<br>")

%> </span></td><td align="center" valign="middle"><div id="imagePreview"></div></td></tr> 
<tr> <td colspan="3" align="center"> <div id="buttonsDiv" style="display:none "> 
<input name="btnSelectImage" type="button" id="btnSelectImage" value="Select Image" onClick="selectImage()"> 
<input name="btnCancel" type="button" id="btnCancel" value="Cancel" onClick="window.close();"> 
</div></td></tr> </table></form> 

</body>
</html>

subhailc · 08-29-2006, 05:20 AM

firefox does support innerHTML, but you're using vbscript - visual basic script - i.e., propreitary MS code - which wont work in anything but IE.

the translation is simple enough tho, assuming you can get the f.files into javascript as a real array - locally, it'd be something like this

Code:

var fso = new ActiveXObject("scripting.filesystemobject");
var folder = fso.getfolder(".");
var iterator = new Enumerator(folder.files);
var list = [];
for(;!iterator.atEnd();iterator.moveNext())list.push(iterator.item().path);

but you'll find that the filesystemobject is effectively worthless online - there's similiar fuctionality serverside using ASP, but you'll have to make sure your server supports that first. anyways, assuming you can get the image list into js:

Code:

//For Each file1 in f.files
var s = "";
for(var i=0,l=f.files.length;i<l;i++){
var file1 = f.files[i];
var fname = file1.name.toLowerCase();
if(fname.slice(0,-4)==".jpg" && includeJPG) s += "<a href=\"javascript:previewImageFunc('" + fname + "')\">" + fname + "</a>";};