Q1422 How can I position layers one after another, so that the positioning of header, body and trailer layers are adjusted depending on their length?

You are here: irt.org | FAQ | JavaScript | DHTML | Q1422 [ previous next ]

The only reason you would need this is if you used an absolute style positioning, if you use a relative style positioning, or omitted the style positioning altogether then the layers would follow one after another:

<html>

<head>
<script language="JavaScript"><!--
var accumulative_height = 0;

function getHeight(id) {
    if (document.layers)
        return document.layers[id].document.height;
    else if (document.all)
        return document.all[id].clientHeight;
}

function update() {
    accumulative_height = 0;

    reposition('header');
    reposition('body');
    reposition('footer');
}

function reposition(id) {
    if (document.layers)
        document.layers[id].top = accumulative_height;
    else if (document.all)
        document.all[id].style.posTop = accumulative_height;
    accumulative_height += getHeight(id);
}
//--></script>

<style><!--
.myclass {
  position: absolute;
}
//--></style>
</head>

<body onLoad="update()" bgcolor="#ffffff">

<div id="header" class="myclass">
<h1>Heading</h1>
<p>
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>

<div id="body" class="myclass">
<h1>Body</h1>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt.  Neque porro
quisquam est qui do lorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia nonnumquam eiusmodi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.  Ut enim ad minima veniam, quia
nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?  At vero eos et
accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores
et quas molestias excepturi sint occaccati cupiditate
non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga.  Et harum
quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat facere possimus,
omnis dolor repellendus.  Temporibus autem quibusdam et
aut officiis debitis aut rerum necessitatibus saepe eveniet
ut et voluptates repudiandae sint et molestiae non recusandae.
</p>
</div>

<div id="footer" class="myclass">
<h1>Footer</h1>
<p>
Itaque earum rerum hic tenetur a sapiente delectus
ut aut reiciendis voluptatibus maiores alias consequatur aut
perferendis doloribus asperiores repellat.
</p>
</div>

</body>
</html>