Pages Not rendering In Mozilla Help?

[Inny]

The following 3 pages which are popups on my site are not rendering in mozilla firefox. Source is visible instead. Any idea why?

http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9948

http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=7101

http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9817

[drhowarddrfine]

For whatever reason, you are serving that page as text/plain rather than text/html. This is a server problem, not a Firefox one.

[Inny]

For whatever reason, you are serving that page as text/plain rather than text/html. This is a server problem, not a Firefox one.

did I write the page incorrectly? I dont quite understand, it displays perfectly in IE

[drhowarddrfine]

It doesn't matter how you wrote the page or that it works in IE. Your server is serving it as text/plain, at least to Firefox browsers it is. Some servers can be set up to serve different browsers differently. Most likely there is a setting somewhere causing this, unless your pages are dynamically created and you are doing this yourself.

[Inny]

No these particular pages were not created dynamically. It gets stranger, A freind looked at them on his desktop pc with moz FF and they rendered as intended, but as text/plain on his laptop.

[drhowarddrfine]

Well, that doesn't make much sense. I don't recall if it's possible or easy to change what Firefox identifies itself as to the server. Opera, for example, can id itself as Opera or IE or other browsers. In any case, only the server determines how the page is served.

[Inny]

Firefox Compatability re-write help

I am using the following script to auto-resize and make clickable thumbnails
of large Images. Im using a custom window to display the enlarged images by using A place_holder image which is switched to the images src.

This works perfectly In IE but I have just discovered, It refuses To work in Firefox. I have absolutely no idea why, but im thinking firefox dosent like something about the code? No matter What doctype I use, The display page gets rendered as text/plain instead of text/html.

I used this page as the display page
http://h1.ripway.com/Inny/newviewx.html and it rendered correctly but the enlarged image did not appear in it!!


can somebody who knows how to code well get this working in firefox aswell?

<body  onload=function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value; >

<script>
function ResizeThem() {
maxheight=250;
maxwidth= 250;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].setAttribute('alt','Reduced Image - Click to see full size');
imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1');iw.focus()");
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;
}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1');iw.focus()");
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;
}
}
}
}
ResizeThem();
</script>


<input type="hidden" id="imgurl">

Display page src

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Image Viewer">
<meta name="keywords"
content="Reptiles">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">

<title> Image Viewer</title>
<STYLE>


body {background-image:url(http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg);

scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;}

</STYLE>
</head>

<body oncontextmenu="return false">
<script language="JavaScript1.2">window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value;}
</script>
<center><img src="http://i14.photobucket.com/albums/a345/Instar/please_do_not_hotlink.gif" id="place_holder"></center>



</body>
</html>

[pronerd]

It refuses To work in Firefox.

Meaning what exactly? What does or does not happen? Is there an error? What debugging have you done? Have you stepped though it with Firebug?

No matter What doctype I use, The display page gets rendered as text/plain instead of text/html.

Again meaning what? Are you seeing text in the page, instead of the HTML content? If so that would explain why your JavaScript is not running. When I checked the sample like the page with Firefox 2.0.0.13 it is rendering as text/html for me.

I used this page as the display page
http://h1.ripway.com/Inny/newviewx.html and it rendered correctly but the enlarged image did not appear in it!!

I see the same picture of a snake in IE6.0 and FF 2.0


It looks like one of the problems is this line. I am not sure what is being tried here, but this is not legal according to any of the DOM references I could find.

window.opener.document.getElementById("imgurl").value;

I am assuming that all you should need is this.

document.getElementById("imgurl").value;

[Inny]

Exactly as I said, In firefox Its rendering as plain text, I think its a server Issue,
since external pages dont do it, however I cannot swap the image with the place holder accross domains.

Id like to try a new Approach, If you could assist, Im sure This is much more Doable. Instead Of opening the enlarged image in a new Page, I want to alter the code to expand the Image in the same page instead.

see example here http://www.webreferenc e.com/programming/javascript/gr/column8/ImageView.htm

The js Of the example

function ImageExpander(oThumb, sImgSrc)
{
	// store thumbnail image and overwrite its onclick handler.
	this.oThumb = oThumb;
	this.oThumb.expander = this;
	this.oThumb.onclick = function() { this.expander.expand(); }
	
	// record original size
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;	

	this.bExpand = true;
	this.bTicks = false;
	
	// self organized list
	if ( !window.aImageExpanders )
	{
		window.aImageExpanders = new Array();
	}
	window.aImageExpanders.push(this);

	// create the full sized image.
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function(){this.expander.onload();}
	this.oImg.src = sImgSrc;
}

ImageExpander.prototype.onload = function()
{
	this.oDiv = document.createElement("div");
	document.body.appendChild(this.oDiv);
	this.oDiv.appendChild(this.oImg);
	this.oDiv.style.position = "absolute";
	this.oDiv.expander = this;
	this.oDiv.onclick = function() {this.expander.toggle();};
	this.oImg.title = "Click to reduce.";
	this.bigWidth = this.oImg.width;
	this.bigHeight = this.oImg.height;
	
	if ( this.bExpand )
	{
		this.expand();
	}
	else
	{
		this.oDiv.style.visibility = "hidden";
		this.oImg.style.visibility = "hidden";
	}
}
ImageExpander.prototype.toggle = function()
{
	this.bExpand = !this.bExpand;
	if ( this.bExpand )
	{
		for ( var i in window.aImageExpanders )
			if ( window.aImageExpanders[i] !== this )
				window.aImageExpanders[i].reduce();
	}
}
ImageExpander.prototype.expand = function()
{
	// set direction of expansion.
	this.bExpand = true;

	// set all other images to reduce
	for ( var i in window.aImageExpanders )
		if ( window.aImageExpanders[i] !== this )
			window.aImageExpanders[i].reduce();

	// if not loaded, don't continue just yet
	if ( !this.oDiv ) return;
	
	// hide the thumbnail
	this.oThumb.style.visibility = "hidden";
	
	// calculate initial dimensions
	this.x = this.oThumb.offsetLeft;
	this.y = this.oThumb.offsetTop;
	this.w = this.oThumb.clientWidth;
	this.h = this.oThumb.clientHeight;
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";
	this.oDiv.style.visibility = "visible";
	this.oImg.style.visibility = "visible";
	
	// start the animation engine.
	if ( !this.bTicks )
	{
		this.bTicks = true;
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);	
	}
}
ImageExpander.prototype.reduce = function()
{
	// set direction of expansion.
	this.bExpand = false;
}
ImageExpander.prototype.tick = function()
{
	// calculate screen dimensions
	var cw = document.body.clientWidth;
	var ch = document.body.clientHeight;
	var cx = document.body.scrollLeft + cw / 2;
	var cy = document.body.scrollTop + ch / 2;

	// calculate target
	var tw,th,tx,ty;
	if ( this.bExpand )
	{
		tw = this.bigWidth;
		th = this.bigHeight;
		if ( tw > cw )
		{
			th *= cw / tw;
			tw = cw;
		}	
		if ( th > ch )
		{
			tw *= ch / th;
			th = ch;
		}
		tx = cx - tw / 2;
		ty = cy - th / 2; 
	}
	else
	{
		tw = this.smallWidth;
		th = this.smallHeight;
		tx = this.oThumb.offsetLeft;
		ty = this.oThumb.offsetTop;
	}	
	// move 5% closer to target
	var nHit = 0;
	var fMove = function(n,tn) 
	{
		var dn = tn - n;
		if ( Math.abs(dn) < 3 )
		{
			nHit++;
			return tn;
		}
		else
		{
			return n + dn / 10;
		}
	}
	this.x = fMove(this.x, tx);
	this.y = fMove(this.y, ty);
	this.w = fMove(this.w, tw);
	this.h = fMove(this.h, th);
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";

	// if reducing and size/position is a match, stop the tick	
	if ( !this.bExpand && (nHit == 4) )
	{
		this.oImg.style.visibility = "hidden";
		this.oDiv.style.visibility = "hidden";
		this.oThumb.style.visibility = "visible";

		this.bTicks = false;
	}
	
	if ( this.bTicks )
	{
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);
	}
}

And You would write your thumbnail like so

<a href="spike.jpg" onclick="this.href = 'javascript:void(0);';">
		<img src="spike_thumb.jpg" title="click to expand." style="float:right;" onclick="new ImageExpander(this, 'spike.jpg');">
	</a>

Can I alter The code Below to expand in this way onclick after it resizes the images?

<script type='text/javascript'>
<!--
function ResizeThem(){
maxheight=250;
maxwidth= 250;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].setAttribute('title','Reduced Image - Click to see full size');
imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;}}}}
ResizeThem()
//-->
</script>

I have tried for several hours but just cannot get it to work, I know I have to replace this line both times in the script but I dont know how to write it correctly.

imgs[p].onclick=new
Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");

[drhowarddrfine]

Here is the corrected HTML from the first post.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="descripti on" content="Image Viewer">
<meta name="keywords"
content="Reptil es">

<title> Image Viewer</title>
<style type="text/css">
body {background-image:url(http://i14.photobucket .com/albums/a345/Instar/greenbgfade17oi .jpg);
scrollbar-3d-light-color:#FFFFFF;s crollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ;
scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:white;}
</style>
</head>
<body oncontextmenu=" return false">
<script type="text/javascript">win dow.onload = function(){docu ment.getElement ById("place_hol der").src = window.opener.d ocument.getElem entById("imgurl ").value;}
</script>
<center><img src="http://i14.photobucket .com/albums/a345/Instar/please_do_not_h otlink.gif" id="place_holde r"></center>



</body>
</html>[/html]

"oncontextm enu" is a HTML5 event and I don't know who supports that yet, if anyone, since HTML5 is still in draft stage.
All that scrollbar styling only works in IE and is non-standard.
Your doctype is incorrect.
There is no such thing as "language=
You should replace <center> with CSS styling.

[pronerd]

Exactly as I said, In firefox Its rendering as plain text

That does not answer the question. What SPECIFICALLY is happening or not happening? You did not answer any of the questions I asked. Please answer these questions.

Again meaning what? Are you seeing text in the page, instead of the HTML content? If so that would explain why your JavaScript is not running. When I checked the sample like the page with Firefox 2.0.0.13 it is rendering as text/html for me.

Id like to try a new Approach, If you could assist

How can I assist you when you continue to refuse to state the problem, and will not answer any of the questions asked?

I want to alter the code to expand the Image in the same page instead.

One thing to consider here would be depending on the size of the image this could make it very grainy looking.

I have tried for several hours but just cannot get it to work,

Meaning what? Just saying it does not work does not tell us anything. What is or is not happening? Are there errors happening, if so what do they say?

[Inny]

Sorry We seem to have a miscommunicatio n issue.

Yes Im seeing plain text under firefox, just the page source, of the display page. Does that make it clearer? I beleive this is an issue with how my server
is configured for displaying attached files (html) in various browsers.
I think this because the display page renders as it should (text/html) under firefox, if I host it on an external server, however the code will not function because I get access denied error accross domains. (the code loads the src image to a placeholder and replaces the placeholder with the src img in the display page, but not firefox) The display page must be on the same domain. I have abandoned the original idea because I do not have access to my server.
see here with firefox (i see the page src)
http://inny.ipbfree.com/index.php?ac...e=post&id=1815
Do you understand now?

About the second Idea, (expanding in the page) they will not be grainy, because they are only expanding to full size, not larger than the image actually is. Only reduced images will be effected, e.g a small 100x100px will not expand to 400x400, it wont be effected at all.

The second Idea Will Avoid the problem explained above, I just dont know how to assign the 'Expander' attribute to the reduced image instead of opening it in a new page.

[acoder]

Threads merged - same problem.

Problem: http://www.howtocreate.co.uk/wrongWi...A+text%2Fplain

[drhowarddrfine]

fwiw, your server is misconfigured and serving the page as text/plain.

[pronerd]

see here with firefox (i see the page src)
http://inny.ipbfree.com/index.php?ac...e=post&id=1815
Do you understand now?

Yes. As already stated the server is setting the MIME type of that page to "text/plain". The server needs to be corrected to that pages are being servered as text/html. This needs to be done before any other issues can be fixed, since none of your JavaScript will be run if the page is being rendered as plain text.

I just dont know how to assign the 'Expander' attribute

The first problem here would be that there is not an "Expander" attribute in mozilla's DOM reference. So you can create that attribute, but it will not do anything. If you want to adjust the images dimensions, it is is just a matter of changing the width and height attributes of the image element.

reduced image instead of opening it in a new page

You have not made the syntax correction I suggested above. As long as you are still calling window.opener it is going to open a new window in IE only. Pop-up blocking will stop this call in Firefox.