This page demonstrates the ActiveSpotLight FastFind Menu Script. ActiveSpotLight provides the javascript related to this project under the BSD License (See Below). This software is provided as-is and without any warranty. ActiveSpotLight assumes no responsibility for any loss or damage as a result of using this software, please do so at your own risk.
This script is still under development and has been tested in FF1.5-2, IE 6-7, Opera 9, and Safari. The current build has the following issues in Safari: Arrows do not appear to show in-menu versus external links, as appear in the other browsers.
2008-02-23 - Thanks to Calvin Chan for his fix to stop blank pages from scrolling when clicked too fast.
This script allows for nested menus, based on dynamic "AJAX" responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.
To view the demo, click the [Toggle Menu] Link at the top of the page.
Note: This script may eventually be completed as a plugin, at this point it is nearly there, though several options remain hard-coded.
Requirements: This script requires jQuery and Interface for jQuery (Drag-and-Drop).
The public version of this script pulls a content feed as data to populate the menu, this can be static or dynamic. The version we use internally uses JSON/XML as data feeds. The feed provided in this example is is for illustrative purposes only. A sample output for the first page of the demo menu looks like this:
<div class="ifM_cats">
<h1>Quick Navigation</h1>
<p class="ifM_desc">Use this menu to navigate this site quickly</p>
</div>
<div class="ifM_pager">
<a href="#" rel="Up" title="Scroll Up" style="display:none"><img src="/resources/images/arrow_up.gif" alt="Scroll Up"/></a>
</div>
<div class="ifM_content">
<a href="fetch://{'current':4,'previous':1,'apiKey':'bd51b0648d268122996b9e68cfd86175','client':'ActiveSpotLight'}" class="ifM_more">Browse by Issue</a>
<a href="fetch://{'current':2,'previous':1,'apiKey':'bd51b0648d268122996b9e68cfd86175','client':'ActiveSpotLight'}" class="ifM_more">Browse by Brand</a>
<a href="fetch://{'current':3,'previous':1,'apiKey':'bd51b0648d268122996b9e68cfd86175','client':'ActiveSpotLight'}" class="ifM_more">Browse by Category</a>
<a href="fetch://{'current':5,'previous':1,'apiKey':'bd51b0648d268122996b9e68cfd86175','client':'ActiveSpotLight'}" class="ifM_more">More Options..</a>
</div>
<div class="ifM_pager">
<a href="#" rel="Down" title="Scroll Down" style="display:none"><img src="/resources/images/arrow_dn.gif" alt="Scroll Up"/></a>
</div>
<div class="ifM_back">
<a href="fetch://{'previous':1}">« Back</a>
</div>
This version will display whatever markup is returned by the server, so even though the link structure is set one way in the example above, it is possible to change it to fit different applications. The example parses http/https:// links as regular links and fetch:// links as JSON and passes the object to the content producing link defined in the script initialization. The data that is returned by that script is displayed in a new "tile" and scrolled into view.
This script is not well documented at this point and further documentation will be added to this page with further revisions to the software. In the meantime, the Javascript itself is documented, which may be helpful to developers.
We would greatly appreciate your feedback and suggestions related to this application. (Please send any bugs you find as well) You can contact us at: activespotlight.com