Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

a javascript makes blank screen in IE but works in FF and Chrome

Posted on 2009-03-31
18
Medium Priority
?
710 Views
Last Modified: 2013-12-08
Dear experts,

I have a function which called at <body onload="setNavColumnHeight()">

    function setNavColumnHeight(){
      var height = Math.max(document.getElementById("mainNavColumn").offsetHeight, document.getElementById("bodyContainer").offsetHeight);
      document.getElementById("mainNavColumn").style.height = height + "px";
    }

Everything was fine before I add this call in onload. My page displays correctly on IE,FF,Chrome. However, IE gave me a blank screen after I added this into onload while other browsers displays correctly. In fact in IE, I can see the page for a very short moment and then I tried alert and the calculated height is correct.

Any ideas?
0
Comment
Question by:candychan611
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
18 Comments
 
LVL 14

Expert Comment

by:Dhiraj Mutha
ID: 24036061
Can you try the same code on any other system and have a check.
0
 
LVL 1

Expert Comment

by:jitendrajls
ID: 24036454


Generally these type of problem occured with IE (time out problem on onload time)

add a setTimeout function to solve this problem..........................

function firstCallOnbodyLoad()
{
 setTimeout("setNavColumnHeight()",1000);
}

<body onload=" firstCallOnbodyLoad()">

    function setNavColumnHeight(){
      var height = Math.max(document.getElementById("mainNavColumn").offsetHeight, document.getElementById("bodyContainer").offsetHeight);
      document.getElementById("mainNavColumn").style.height = height + "px";
    }
0
 

Author Comment

by:candychan611
ID: 24036694
I have do more test on this and let me describe it more clearly.

This function is in a page which will be loaded into an iframe. While I execute this function via <body onload="setNavColumnHeight()">. It makes the content in the iframe blank and REAPPEAR if I resize the IE window. I've tested it by IETester and DebugBar, no error message. If I load this page in IE directly, no error too.
0
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 

Author Comment

by:candychan611
ID: 24036738
Dear jitendrajls,

Isn't the onload event fires when the page finish loading? Why there is still a timeout? And this function is so simple it should not execute long enough to make it timeout either.

I've tried your code. set timeout to 1 second make the content to display 1 second before disappear. Strange.

Also please see my last reply. I found it maybe some kind of iframe problem.

Thanks a lot!

IE gives me a lot of headache. Points raised for someone who can help me out :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24036782
try this

 function setNavColumnHeight(){
var height = Math.max(document.getElementById("mainNavColumn").offsetHeight, document.getElementById("bodyContainer").offsetHeight);
  if (height > 100) document.getElementById("mainNavColumn").style.height = height + "px";
else alert('Height is only:' height); // remove this line when you have seen that IE does not do what you thought it would
}

My guess is that IE has not set the heights at the time you execute
0
 

Author Comment

by:candychan611
ID: 24037041
Dear mplungjan,

Seems there's a typo in alert('Height is only:' + height); ?? But this alert never comes out in IE. So I guess the situation is came from the combination of all my functions in the page. Let me go back to create some test pages and try to isolate the problematic code more.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24037056
Yes, sorry about the missing plus
0
 

Author Comment

by:candychan611
ID: 24040018
Dear mplungjan,

I have isolated the problematic code and it turns out to be a css problem! Here I show you the code to reproduce this problem.

The parent page,
<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link href="test-styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <iframe id="template" src="test-iframe.html" height="600px" width="100%"></iframe>
</body>
</html>

The page in iframe,
<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link href="test-styles.css" rel="stylesheet" type="text/css" />
  <script language="JavaScript">
    function setNavColumnHeight(){
      var height = Math.max(document.getElementById("mainNavColumn").offsetHeight, document.getElementById("bodyContainer").offsetHeight);
      document.getElementById("mainNavColumn").style.height = height + "px";
    }
  </script>
</head>

<body onload="setNavColumnHeight();">
  <div id="topContainer">
    <div id="mainNavColumn" class="navColumn">abc</div>
    <div id="bodyContainer">def</div>
  </div>
</body>
</html>

And the css,
* {
    position:relative;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
   }
html,body{
    width:100%;
    height:100%; /* we need both html and body to have this in order for their child elem's 100% setting to work in FF!! */
    }
body {
    text-align:center; /* replace center tag, for IE */
    font-family:Arial;
    font-size:12px;
    color:#404040;
    background-color:#FFFFFF;
    }
iframe {
    border:0px;
    display:block;
    }

#topContainer {
    text-align:left;
    margin:0px auto 0px auto; /* replace center tag, for other browsers */
    width:800px;
    }

.navColumn {
    float:left;
    width:130px;
    border:solid 1px red;
   }

#bodyContainer {
    float:left;
    width:668px;
    border:solid 1px black;
    }

In fact, the page can be displayed if I delete its link to the css file. Furthermore, #topContainer / .navColumn / #bodyContainer have no effect to the problem. You can just delete it. I leave them here for you to see the divs easier only.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24041954
So you are fine?
0
 

Author Comment

by:candychan611
ID: 24045610
Dear mplungjan,

Of course not. These code can only re-produce the problem. However, I don't see any errors in my css with my limited knowledge. :-(
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 24048727
remove the position relative on all items

Then it works
0
 

Author Comment

by:candychan611
ID: 24056183
Thank you mplungjan! It works! I will allocate the points to you! Could you tell me the reason too?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24057172
No, but I bet someone else can ;)

http://www.google.com/search?q=ie+position+relative+bug

There used to be a Peek-a-boo bug in IE6 but this is a newer bug, I had it in IE7 on XP
0
 

Author Closing Comment

by:candychan611
ID: 31565168
Your are most helpful sir! Thanks again for your help! :) BTW, why do I get into IE bugs everyday? -_-"
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24061455
You get bugs when you push the limits of the browser.
0
 

Author Comment

by:candychan611
ID: 24065638
Well....This is just my first time to build a website! A relatively static site with just 3x pages on a static web space (Rare in this century). I guess IE bugs are just too many! :-( A pity it's my company's website, otherwise I will just declare it as "Firefox & Chrome" only ;-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24065893
What I meant was that if you add many scripts or do many things out of the ordinary, you hit issues. For example why have an iframe at all if you resize it to content anyway?
It makes the page do two http requests and has possible issues.
0
 

Author Comment

by:candychan611
ID: 24066065
It's because I want to simulate the "master page" function for a ***totally static web space***. I think I can only do it javascript (client side), with my limited knowledge. For the server side javascript, I need to check company's old email record with the provider first.

I am now adding a invisible box to the template to hold a calculated "real" height of my page and resize the iframe by that. adding height 100% will cause the display of double scrollbar for IE all times and Firefox sometimes.

I hope the new Xframe comes faster!

BTW, for "doing things out of the ordinary", using iframe to load other page inside a page seems oldest way to get task done (for me). ^__^"
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question