JavaScript Hell

Published 07 July 05 03:08 PM | russnem

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!

Comments

# leave the javascript for your AJAX calls... said on July 7, 2005 06:42 PM:

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...

# Russ said on July 7, 2005 07:12 PM:

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

# hrm said on July 7, 2005 07:29 PM:

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

# Julien Couvreur said on July 7, 2005 07:30 PM:

What about this one (copied from the AutoTOC Greasemonkey script: http://runeskaug.com/greasemonkey)?

.floatingfooter {position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: 20px; width: 100%; display: block; border-top: 1px solid #777; background: #ddd; margin: 0; padding: 3px; z-index: 9999; }

# Russ said on July 7, 2005 07:43 PM:

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.

# Raj Kaimal said on July 7, 2005 08:11 PM:

This should get you started...
<html>
<head>
<script language="javascript">
function DockToBottomRight()
{
var windowHeight = document.body.clientHeight;
var windowWidth = document.body.clientWidth;
var windowScrollTop = document.body.scrollTop;
var windowScrollLeft = document.body.scrollLeft;

//alert(windowWidth)

var boxPanel = document.getElementById("mybox");

boxPanel.style.top = windowHeight + windowScrollTop - boxPanel.clientHeight;
boxPanel.style.left = windowWidth + windowScrollLeft - boxPanel.clientWidth;
}

window.onscroll=DockToBottomRight;
window.onresize=DockToBottomRight;
window.onload=DockToBottomRight;
</script>
</head>
<body>
<div id="mybox" style="position: absolute;z-index:5000">
<table border="1" bgcolor="red"><tr><td nowrap>
This is the floating layer.
</td></tr></table>
</div>
Here is some normal text

# Nuz said on July 7, 2005 08:16 PM:

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

# Dustin Fraze said on July 8, 2005 07:31 AM:

There's a script at Dynamic Drive that implements this behavior. I take no credit for the script, I'm just the messenger.

http://www.dynamicdrive.com/dynamicindex10/topmsg.htm

Good Luck.

# Ryan Verbeck said on July 16, 2005 10:09 PM:

Not sure if this will answer your question as I'm skimming for an answer to a different problem but I believe the algorithm you want is something like the following:
if (document.all) {
var gel = document.getElementById('scrlBy');
gel.style.zIndex = 99;
gel.style.posTop = window.document.body.offsetTop + window.document.body.scrollTop;
gel.style.posLeft = 0;

} else {
document.getElementById('scrlBy').style.zIndex = 99;
document.getElementById('scrlBy').style.cssText = 'position:absolute; left:0px; top:' + window.pageYOffset + 'px;'
document.getElementById('scrlBy').style.visibility = "visible";

}


This one docks to the top not the bottom though, gotta go

# Coding Room » Blog Archive » javascript scrolling said on February 10, 2007 03:59 AM:

PingBack from http://codingroom.ch/2007/02/10/javascript-scrolling/

Leave a Comment

(required) 
(required) 
(optional)
(required)