| ||
|
|
| |
| ||
| ||
|
Introduction - Animate-to-place Content Demonstration DHTMLLib is a compatibility layer designed to simplify cross-browser DHTML scripting. In this article, we tackled the task of creating a simple floating content window that stays on the screen. With DHTMLLib we are able to create this floating window with a few lines of script. After reading this article, we recommend visiting the DHTMLLib 2.0 page to download and learn more about DHTMLLib. Creating a floating window is a seemingly simple task. The goal is to reposition the floating content every time the user scrolls the page. Without DHTMLLib, this simple task is actually quite complicated if you want your script to run in both browsers. First, you need to detect what browser the visitor is using. If it is Netscape, you need to manipulate the element using the Layers collection, simulate an onscroll event using a timer (Netscape does not have this event), and calculate the elements position using Netscape specific properties. Internet Explorer, on the otherhand, uses the onscroll event to determine when the user scrolls, the all collection to access the element, and different properties to determine the position. DHTMLLib takes the approach of emulating a subset of Internet Explorer's object model in Netscape Navigator. With DHTMLLib acting as your intermediary, you can ignore all the cross-browser differences and just write the script once.
First, let's examing keeping the content at a constant position. By using DHTMLLib we are able
to accomplish this with one line of script (we will use a few more to make things simpler to follow).
This script keeps the DIV element with the ID "navBar" on the screen. For this to work, you
must absolutely position the navBar DIV. We accomplish this with a global stylesheet that
we place in the document's HEAD section:
Next we define the contents to float inside of the navBar DIV. We define the contents
using a table because we want to change the background color of the content's title:
This content can be embedded at the beginning or end of your page. The only caveat is to make sure you do not place this content inside of a table or other positioned element. This causes the element to be offset from a different position in the document - something our simple script is not designed to handle. While this causes the content to stay on-screen, the frequency the onscroll event fires causes the content to be repositioned many times.
This can lead to a lot of flickering. An alternative is to avoid directly positioning the
content using the onscroll event and instead use a timer to animate the content onto the screen.
Next we adapt our script to more cleanly scroll the element.
Animating the content only requires us to modify the script. We will position the same navBar element using the same stylesheet. Since we are going to use a timer to track the document's position we no longer need the onscroll event. The timer is going to continually poll the document to determine if the content needs to be moved. Each time we need to move the element, we will move it 10% of the distance until the content reaches the destination. By using a percentage of the total distance, the content moves quickly for long distances and then slows as it nears the correct position.
<script SRC="dhtmllib2.js"></script>
<script>
<!--
var topOffset = 80
function smoothMove() {
var Dif = parseInt((document.body.scrollTop+topOffset-document.all.navBar.offsetTop)*.1)
// Work-around wierd Netscape NaN bug when Dif is 0
if (isNaN(Dif)) Dif=0
document.all.navBar.style.pixelTop+=Dif
}
function doLoad() {
setup()
window.setInterval("smoothMove()",20)
}
window.onload = doLoad;
// -->
</script>
© 1999 by InsideDHTML.com, LLC. All rights reserved. |