Floating Layers

A script from COBOLdinosaur

This page has two floating layers. The first one is fixed to its location as defined by the inline code and the second is defined to float at the bottom of the screen by calculating an offset at load time. The strict doctype is require for it to work, otherwise you have to deal with quirks mode and the browsers do the positioning calculation differently and not to standard in quirks mode. The mouse scrollwheel will not work for some drivers. You have to use the slider on the screen.

The styling should be moved to a stylesheet but is inline here to make it easier to understand the necessary property values to get a correct float. To get the source code click on the link below and then just copy and paste into a text file. You will have to change the code to use your own images.

Get Source

Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis. Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci. A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat. Habitant pretium. Suscipit ante. Volutpat suscipit odio. Nostra nunc ultrices eleifend egestas cursus. Diam cursus enim habitasse sed, sociis et. Sit interdum mi ridiculus pretium id, senectus tincidunt aenean sem pulvinar pellentesque. Et libero.