Pages Not rendering In Mozilla Help?

77 New Member

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....e=post&id=9948

http://herproom.5.forumer.com/index....e=post&id=7101

http://herproom.5.forumer.com/index....e=post&id=9817

Nov 14 '07 #1

Subscribe Reply

2588

drhowarddrfine

7,435

Recognized Expert Expert

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

Nov 15 '07 #2

Inny

New Member

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

Nov 15 '07 #3

drhowarddrfine

7,435

Recognized Expert Expert

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.

Nov 16 '07 #4

Inny

New Member

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.

Nov 17 '07 #5

drhowarddrfine

7,435

Recognized Expert Expert

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.

Nov 18 '07 #6

Inny

New Member

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?

Expand|Select|Wrap|Line Numbers

 
<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

Expand|Select|Wrap|Line Numbers

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

Apr 16 '08 #7

pronerd

392

Recognized Expert Contributor

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.

Expand|Select|Wrap|Line Numbers

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

I am assuming that all you should need is this.

Expand|Select|Wrap|Line Numbers

document.getElementById("imgurl").value;

Apr 16 '08 #8

Inny

New Member

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

Expand|Select|Wrap|Line Numbers

 
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

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

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

Expand|Select|Wrap|Line Numbers

 imgs[p].onclick=new

Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");

Apr 17 '08 #9

drhowarddrfine

7,435

Recognized Expert Expert

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.

Apr 17 '08 #10

Similar topics

3661

Javascript that does not work in NN/Mozilla

by: rnd | last post by:

Hi all! could you kindly help me to solve a compatibility problem that involves Internet Explorer and NN/Mozilla. I created a html page that contains a form (its name is "Modulo") and some text boxes. After clicking on a button, a popup appears. I tried to modify the text of "Testo" textbox from the popup windows by using the following javascript code: window.opener.Modulo.Testo.value=window.opener.Modulo.Testo.value + " This

Javascript

3264

Problem with document.lastModified in Mozilla

by: Bart | last post by:

Hallo, I'm have a problem with the following script: function wr(s) { //Just got tired of writing document.write, //so I created a shorthand version document.write(s);

Javascript

1760

onmousedown hangs in Mozilla Help!

by: Gary Mayor | last post by:

Hi, I'm trying to make it so when I click a image it prints out the image again and a load of other stuff. So far i've got this far. <html> <head> <script language="JavaScript" type=""> document.onmousedown = onmousedown; function onmousedown(e) {

Javascript

1533

Dynamic controls not rendering - please help...

by: David Smith | last post by:

I have the following snippet which will not render the control on the page: foreach(DataRow dr in ds.Tables.Rows) { System.Web.UI.HtmlControls.HtmlTableRow r = new System.Web.UI.HtmlControls.HtmlTableRow(); System.Web.UI.HtmlControls.HtmlTableCell c1 = new

C# / C Sharp

2773

Extended question on tabbed pages--Rick please help

by: kev | last post by:

Hello, I posted a question a while ago on tabbed pages, how to set it to invisible when the text box is empty.It was answered by Rick and the code ran perfectly. However, i tried using the same code for another scenario and it gives me compile error:method or data member not found. My scenario is i have a nested tab page.My main tabbed page has 4 tabs, About, SafetyLevel1,SafetyLevel2,SafetyLevel3. Inside this main, i created a...

Microsoft Access / VBA

1207

Problem of javascript in mozilla

by: saurabhpant | last post by:

Hi friends, I am working on a blog application.In this application we use an iframe for writing the text I am using the javascript for storing the value of iframe in a temporary variable.The code is given below:--- var tmpIframe=iframe.document.body.innerText; it works perfectly in IE but not working in Mozilla. help me asap. Regards Saurabh

Javascript

2040

scrolling images does not work on mozilla help me please

by: gunnuk | last post by:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>WELCOME TO HEMA CREATIVE HOUSE</title> <style type="text/css"> <!-- @import url("css/IDESIGN 1.css"); @import url("css/IDESIGN.2.css"); body {

Javascript

1433

Problem with dynamic html pages in mozilla

by: bnashenas1984 | last post by:

Hi everyone I have a HTML page which has some dynamic parts. The problem is that this page works fine in IE but not in MOZILLA ( doesn't work att all in mozilla ) here is an example: ------------------------------------------ <table id="searchtable" > <tr> <td> Some text here... </td>

HTML / CSS

1838

Mozilla HTML parser in Python?

by: tegdim | last post by:

Hello, I'm working on a machine learning project that I have lots of HTML news stories to work with. I made an online tool that lets me look at these pages via mozilla and hand label them by adding my own tags into the DOM. The problem I've found is that the pages I'm using are being tidied by Mozilla. For example, <p/> is changed into proper <p> and </p> tags. The problem is that I also want to be able to process these pages without...

HTML / CSS

9456

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9843

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9713

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8713

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7248

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6534

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

3805

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3358

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2666

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General