Solved

Resizing div's onload...

Posted on 2004-04-18
12
1,839 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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 …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now