New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr8+

Drop down/ Overlapping Content script

Author: Dynamic Drive

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: Mouse over the "Search DD" link near the top of the left column on this page.

Demo #2 (content fetched via Ajax, activated onclick): Additional Resources


Directions: Developer's View

Step 1: Insert the following script into the <head> section of your page:

Select All

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:

Select All

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:

  1. The ID of the anchor element, typically a link with a rel attribute pointing to the ID of the Drop Down DIV.
  2. The position of the Drop Down DIV relative to the anchor link: "left-bottom", "right-bottom", "left-top", or "right-top")
  3. 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.
  4. 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?