Solved

Resizing div's onload...

Posted on 2004-04-18
12
1,874 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
website content maintenance 3 100
Grunt No Clean Targets 6 185
Questions about this React unit test 4 66
Windows and other UI names - The Proper names for the Various elements! 1 107
Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

839 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