JavaScript Hell

I am trying to implement something in a web application whereby specific content (which includes images and text) exists inside a "box" that's about 2/3's of the width of the browser and about 90 pixels high. This box should stay at the bottom of the browser no matter what.

If the page has one word on it (and therefore doesn't need to scroll) the box should be at the bottom of the browser.

If the page has 1000 paragraphs of text on it, the box should stay "docked" at the bottom of the browser window as the user scrolls down and reads (the box should appear on TOP of the page's content).

I have tried determining the size of the browser and getting a simple label to move as I scroll using the onscroll event in the body tag but the label doesn't go anywhere (even though my javascript method IS getting called).

Can anyone help me or perhaps point me in the direction of a working implementation of this?

Thanks!

5 Comments

  • Why use javascript?

    Put this at the end of your html body:

    <div class="floatingfooter"><div class="oneword">oneword</div></div>



    Put this in your stylesheet:

    .floatingfooter { position: absolute; bottom: 0px; height: 90px; background: #efefef; border: solid 1px #666; padding: 4px; margin-bottom: 2px; text-align: center; width: 66%; }

    .floatingfooter .oneword { vertical-align: middle; font-size: 5em; }



    Then adjust the styles to taste...

  • That stylesheet approach puts the content where it needs to go on page load, but it doesn't stay there when I scroll.

  • It should, is the div after your content in the html body?

  • The DIV was immediately before the closing body tag. I also tried that second style tag but then it just put the thing at the bottom of the page and it still didn't do anything when I scrolled.

  • What about using IFrames, display your stuff in the bottom frame and the top one can contain the main information.

Comments have been disabled for this content.