Drop down/ Overlapping Content script
Updated: Sept 11th, 08': Fixed bug whereby drop down content isn't revealed onClick of anchor in Safari/ Google Chrome
Description: This script lets you display content in tight areas on your page, by dropping it down into view when the mouse rolls over the anchor element. The content temporarily overlaps anything beneath it. Think of it as adding another dimension to your webpage to create more space. It's extremely handy for displaying search boxes, additional links etc in a tight area, such as the sidebar column of a page. The content to reveal/ overlap in each case is simply contained inside an arbitrary DIV on the page for easy customizing. A quick overview:
- Drop Down Content can be revealed either via onclick of the anchor link, or onmouseover instead. Independent setting for each anchor link.
- Set whether Drop Down Content itself should automatically hide after the user rolls his mouse out of it. Global setting inside .js file.
- For the content within Drop Down Content, it can either be inline, or fetched from an external file on your server via Ajax instead.
- Drop Down Content supports four different position orientations- "
left-bottom", "right-bottom", "left-top", and "right-top". The speed of the drop down reveal can also be customized.
Demo #1: Search DD
Demo #2 (content fetched via Ajax, activated onclick): Additional Resources
Directions:
Step 1: Insert the following script into the <head> section of your page:
The above code references an external .js file, which you need to download below:
Step 2: Insert the below sample HTML code into the <body> section of your page, which demonstrates how to set up two drop down contents, activated by two arbitrary links:
More Information
The code of Step 2 shows the required convention in setting up a drop down content on your page. It consists of three parts:
- The anchor element (an arbitrary element that will show the drop down content onMouseover).
- The Drop Down content element.
- Calling the initialization script at the very end to tie things together.
<!--Anchor Element -->
<b><a href="search.htm" id="searchlink"
rel="subcontent">Search DD</a></b><br />
<!--Drop Down content element -->
<DIV id="subcontent" style="position:absolute; visibility: hidden; border: 9px
solid orange; background-color: white; width: 300px; padding: 8px;">
<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox"
alt="Search" />
<input value="Search" type="submit" /
</form>
<div align="right"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
</DIV>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration,
"revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "right-bottom", 500,
'mouseover')
</script>
The parts in red are significant. Firstly, for your anchor element, give it a
unique ID attribute, plus a rel attribute that matches
the ID attribute of the drop down content DIV that should be
revealed. The Drop Down content should simply be a DIV that wraps
around
the content you wish to reveal, with a unique ID attribute
matching. While you can style this DIV any way you like, at the very minimum, it
must contain the CSS rules "position:absolute; visibility: hidden;"
to ensure it's able to be dropped down. Lastly, following both of the above HTML
(ie: at the very end of the page), call the below function to initialize the
script:
dropdowncontent.init("searchlink", "right-bottom", 500, 'mouseover')
If you have multiple Drop Down content instances on the page, call this function multiple times for each instance. The function accepts 4 parameters:
- The ID of the anchor element, typically a link with a rel attribute pointing to the ID of the Drop Down DIV.
- The position of the Drop Down DIV relative to the anchor link: "
left-bottom", "right-bottom", "left-top", or "right-top") - The third is the duration of the reveal animation in milliseconds (ie: 500= 1/2 second). Tip: If you wish to essentially disable the animation, set it to a very small integer, such as 10.
- How the Drop Down DIV should be revealed- "
click" or "mouseover" of the anchor link.
Manually hiding the Drop Down DIV
By default the Drop Down DIV will automatically hide itself when the user
rolls his mouse over then out of it. Since this behaviour is configurable (see
bottom of page), depending on your setup, you may need to include some way for
the user to manually dismiss the Drop Down DIV. This can be done by calling
dropdowncontent.hidediv("id_of_div"), and passing in the ID of the
Drop Down DIV. For example:
<a href="javascript:dropdowncontent.hidediv('subcontent')">Hide this DIV manually</a>
Dynamically populating a Drop Down content using an external file (Ajax)
A drop down content can be dynamically populated with contents from an
external file on the same domain, instead of defining it inline on the shown
page. You still need to define the HTML for the drop down container
itself on your page, though it will simply be an empty DIV. Then, use the
optional "rev" attribute inside the anchor link to specify
the path to the external page you wish to load into its corresponding drop down
content. Here's an example, with the code in red highlighting the differences
compared to the previous example above:
<!--Anchor Element with drop down content
dynamically populated via Ajax-->
<b><a href="search.htm" id="searchlink"
rel="subcontent" rev="external.htm">Search DD</a></b><br />
<!--Drop Down content element -->
<DIV id="subcontent" style="position:absolute; visibility: hidden; border: 9px
solid orange; background-color: white; width: 300px; padding: 8px;">
//EMPTY DIV!!
</DIV>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration,
"revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "right-bottom", 500,
"click")
</script>
Make sure "rev" points to an external file on your domain, as due to security
reasons offsite domains aren't allowed.
Additional Settings
Near the top of dropdowncontent.js, there are four global settings you can further adjust, which are:
disableanchorlink: true, //when user clicks on anchor
link, should link itself be disabled (always true if "revealbehavior" above set
to "click")
hidedivmouseout: [true, 200], //Set hiding behavior within Drop Down DIV itself:
[hide_div_onmouseover?, miliseconds_before_hiding]
ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax
page is being feched, if applicable
ajaxbustcache: true, //Bust cache when fetching Ajax pages?