Cut & Paste Drop down Panel script
|
Description: Drop Down Panel adds a pull down panel to the top of your page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content. Clicking anywhere on the panel again closes it. You can easily customize the height of the Panel, button text (ie: "panel content"), and drop down speed in milliseconds. A plug and play Ajax drop down panel!
Example: Click on the protruding button at the top to reveal/ hide Panel.
Directions:
Step 1: Insert the below into the <head> section of your page:
The code above references two external .js files and the image used as the panel button. Download them below:
Step 2: Then, open up jkpanel.js, and edit the very last line
of the script:
jkpanel.init(''panelcontent.htm', '200px', 500)
The first parameter should be the path to the external content to load (on
your server), the second the height of the content DIV in pixels, and lastly,
the animation in milliseconds. You may optionally edit two variables at the top
of jkpanel.js, plus the CSS at the top of the entire code.
FYI the external content used in the demo is panelcontent.htm. If you specify an invalid or non existent file inside the script, nothing will appear (including the protruding button).