?
Solved

Resizing div's onload...

Posted on 2004-04-18
12
Medium Priority
?
1,905 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
[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
  • 7
  • 5
12 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

801 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