CREATE YOUR OWN DROP-IN DIV WITH THIS CODE


HOME



©2014-, mrkent.com

(Click image to reload )
As a JQuery programmer have you ever had a time when a
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 AND JAVASCRIPT 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.

The code is provided in the two boxes below. The top box code for a sample page while the lower box contains the javascript and css script. The div tag is what does all the work. Within the style 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.
SAMPLE PAGE


SAMPLE HEAD SCRIPT
THIS IS A SAMPLE OF THE DROP-IN DIV


You can use something like this when your page is too crowded to place this kind of information in a logical location.

Or, you can place an embedded YouTube video in a div like this.

Or, you may have your own ideas.

Enjoy!

<==== Click "HIDE SAMPLE" to close this!