Solved

Resizing div's onload...

Posted on 2004-04-18
12
1,867 Views
Last Modified: 2012-06-22
Browser: IE
Site:       http://www.pdgmedia.com/index_new.html

Problem:
We are using javascript to resize the 2 side-by-side div's onload. In IE, the delay is noticeable...

function sizeDivs() {
  H = Math.max(document.getElementById('rightinner').offsetHeight,document.getElementById('leftinner').offsetHeight);
  document.getElementById('rightinner').style.height = H+'px';
  document.getElementById('leftinner').style.height = H+'px';
}
 
and
 
<body onload="sizeDivs();">

Is there a way to have the div's equal out in height "before" the content gets rendered?

Thanks,
Sean

Note - this must be fully modern browser compatible :-)
0
Comment
Question by:seanpowell
  • 7
  • 5
12 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10853973
Start the layers off with visibility:'hidden';

Then just change visibilty to visible in the function after they are resized.

If you want the user to have something to look at during the load, just pust a smiley and a "loading..." message in a visible layer and hide it as part of the load.  

I don't actually see any delay, because the load is very fast on on my connection, and the pages are not all that heavy so even on a slow dialup, it is not going to be a long delay.

Cd&
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10854025
It's possible that the div's appearing out of nowhere after a second may be worse than the resize - but I'll live with it if there's no other way.

I thought there might be something by setting the function when the window loads, instead of the body, but I guess there's no difference.

The delay - even on my high speed connection - is only about .5 seconds, but it's there. Long enough for me to take a screenshot as the page loads.

Here's an example of what you see "very" briefly.
http://www.pdgmedia.com/onload.jpg
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10854038
If the div's are initially hidden - doesn't that mean they'll be nothing to size them against.
Perhaps I'm writing the js badly.

Points increased :-)

0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10854199
Window.onload fires ofter the document.onload so going to it will not make a difference.

As for sizing, the element has size whether it is visibile or not.  It is still there and taking up space.  The browser still renders it and add all its properties to the DOM.  Using display:none, might create a problem because in theory it does not existing in the document flow, but it is there, and has size.  However I would not relay on a non-diplayed element.  But visibility only effect the whether it shows, not its size.

Cd&
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10854580
Well, it works, but it really is just as distracting.
http://www.pdgmedia.com/cd_research.html

The CSS:

div#leftpage {
                /* other stuff here */
      visibility:hidden; }
      
div#rightpage {
                /* other stuff here */
      visibility:hidden; }

div#leftinner {
                /* other stuff here */
      visibility:hidden; }
      
div#rightinner {
                /* other stuff here */
      visibility:hidden; }

The js:

function sizeDivs() {
  H = Math.max(document.getElementById('rightinner').offsetHeight,document.getElementById('leftinner').offsetHeight);
  document.getElementById('rightinner').style.height = H+'px';
  document.getElementById('leftinner').style.height = H+'px';

  document.getElementById('leftpage').style.visibility = "visible";
  document.getElementById('rightpage').style.visibility = "visible";
  document.getElementById('leftinner').style.visibility = "visible";
  document.getElementById('rightinner').style.visibility = "visible";
}


What's frustrating is that Mozilla does not show the delay at all. I was just hoping there was some other way to deal with it.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10854621
>>>What's frustrating is that Mozilla does not show the delay at all. I was just hoping there was some other way to deal with it.

Hmmmm.....  

function fixIE()
if (document.all)
{
   alert('your browser is defective')
   window.location.href='http://www.mozilla.org/download.html';
}


:^)

Cd&
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10854677
I'll take that as a no...
Guess I'm back to the drawing board, and will have to rethink the layout :-(
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10854731
I like the kangaroo the best.  It is too bad that transitions are IE only.  Let me play with it maybe we can smooth it out with a gradual re-sizing.

Cd&
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10854780
Okay - this is your's to play with if it helps:
http://www.pdgmedia.com/cd_research.html

I've set the div's at a fixed height for now...
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10854812
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10855278
You might hate this even worse than the little delay but it might give some ideas on how you can play with it.

Revised script:

<!-- Resize Code by COBOLdinosuar -->
var grow;
var obj;
var H;
var maxH;
var ctl;
function sizeDivs() {
  H = Math.max(document.getElementById('rightinner').offsetHeight,document.getElementById('leftinner').offsetHeight);
  document.getElementById('rightinner').style.height = H+'px';
  document.getElementById('leftinner').style.height = H+'px';  
  obj=document.getElementById('wrapper');
  maxH=document.documentElement.offsetHeight+150;
  grow=maxH%20;
  obj.style.height=grow+'px';
  obj.style.visibility='visible';
  ctl=setInterval('sizeloop()',50);
}
function sizeloop()
{
   obj.style.height=grow+'px';
   grow+=20;
   if (grow>=maxH)clearInterval(ctl);
}

Style revisions:

body
      {
      margin:50px 0 0 0;
      padding:0;
      text-align:center;
      background-color:#666;
      font-family:Georgia, Times, "Times New Roman", serif;
      font-size:0.8em;
      color: #222;
      line-height:2em;
      }
div#wrapper {visibility:hidden; overflow:hidden; position:relative;}

div#content
      {
      width:768px;
      margin:0 auto;
      padding:0;
      text-align:center;
      position:relative;
      }
      
div#leftpage
      {
      width:260px;
      margin:0;
      padding:40px 0 12px 0;
      background-color:#777;
      position:absolute;
      top:0;
      left:0;
      border-top:4px solid #ccc;
      border-right:none;
      border-bottom:4px solid #ccc;
      border-left:4px solid #ccc;
      }

div#rightpage
      {
      width:500px;
      margin:0;
      padding:40px 0 12px 0;
      background-color:#999;
      position:absolute;
      top:0;
      right:0;
      border-top:4px solid #ccc;
      border-right:4px solid #ccc;
      border-bottom:4px solid #ccc;
      border-left:none;
      }

div#leftinner
      {
      margin:0 0 0 30px;
      padding:18px 18px 0 18px;
      background-color:#222;
      border:4px solid #333;
      border-right:none;
      text-align:center;
      }
      
div#rightinner
      {
      margin:0 30px 0 0;
      padding:18px 100px 0 18px;
      background-color:#fff;
      border:4px solid #333;
      border-left:none;
      text-align:left;
      }            


In the page itself 2 minor changes:

After the body add
<div id="wrapper">

And close it right before the links div.

The sizing at the bottom is still off between Moz and IE.
The speed can be controlled by changing the value in the setInterval.

I think the way you already have it is fine, but this will give you an idea of how you can control with simulated transitions.

Cd&

0
 
LVL 31

Author Comment

by:seanpowell
ID: 10855996
Yes, you're right  :-)
That's some pretty interesting code. This needs digesting with a nice cold one. Or two. Or perhaps three...

Thanks Cd& :-)
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Owl Carousel 6 206
Clean URL from GET variables 2 101
Format results with PHP 3 77
CSS Question.. 3 87
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to dynamically set the form action using jQuery.

809 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