interfered with what you were trying to accomplish. You tried making the div hidden but it still remained in the way. This page is the result of my frustration with that issue. Why not just slide the div off the page until needed. Then slide the div onto the page when needed. Animating a div is what this page is all about.
The "drop-in div" code is pretty simple to use. The DIV can be located anywhere within the body of the page. The STYLE
tags can be located anywhere outside the body of the page. These are generally placed in the head of the page.
I first used this code to include an embedded YouTube "help" video on a page I created. That way the visitor remained on the main page and wasn't re-directed to a different page in order to watch the video. You can see a demonstration of this at the mrkent.com home page
. Try clicking on the image to the left side of the page.
tag, following the position:relative
(or absolute), the top
attribute determines the vertical location of the div on the page. Normally we see the top
attribute at a value somewhere between 0 and something like 75px, etc.
But the top
attribute can also be set to a negative value like -200px or so. When that happens the top of the div becomes located above
the top of the web page. Using JQuery’s marginTop attribute with animation
we can cause the div to move into, and, out of the webpage.