Archive for the ‘jQuery’ Category

SimpleMegaDrop v1: SimpleDrop + Mega-Dropdown Menus, with SimpleMegaButtons on the side!

Posted by

I have been a fan of the SimpleDrop dropdown menu from JavaScript Array for a while. Basically, once I found it, it became my standard dropdown menu package. The simplicity is what originally drew me—it has a tiny footprint beyond jQuery. Of course, the name SimpleDrop was well-chosen. It has no frills, but it works on all major browsers, including Internet Explorer 6. IE6 is almost extinct, but I have a client that doesn’t have the money to update their infrastructure, and are therefore limited to IE6.

I have made some improvements to what I now call SimpleMegaDrop, and it now offers these features:

  • Standard dropdown menus (single-level) in a navbar
  • Mega-dropdown menus integrated with dropdown menus
  • Free-standing Buttons that invoke dropdown or mega-dropdown menus.
  • All of the menu items use hoverIntent to reduce the overall twitchiness.
Proceed to the demo—download links are at the bottom.

My Working Set of jQuery Plugins (and some Other Hacks) by DFF

Posted by
Here’s the second installment in my Working Set series: my standard set of jQuery plugins. I’ll also include a few other bits of code I use occasionally that are not in plugins. I make no claims about these being the best or anything like that, but this is a really useful, robust set of plugins that will be useful in any Web site.

Fall Cow by DFF

jQuery

www.jQuery.com

The source of jQuery.

jQueryUI

www.jQueryUI.com

The source of jQuery’s user interface modules.

AjaxContactForm

http://midmodesign.com/news/coding/jquery-ajax-contact-form-with-honeypot/

A straightforward Ajax Contact Form that can be dropped into a sidebar anywhere. You can see this in action at www.kelleyhousemuseum.org.

Cycle Plugin

http://malsup.com/jquery/cycle/

I use this all the time. It’s a very easy way to cycle images or HTML content. There’s even a light version that eschews the flashy kinds of transitions.

DataTables

DataTables.net

This is an amazingly full-featured table plugin. Filtering, striping, searching, and more.

HighSlide

Highslide.com

HighSlide is a superb Javascript library for displaying images and slideshows. This well-supported module has a minimal charge for commercial usage, but it’s well worth it. Tremendous flexibility and stability! It’s been in continuous development for many years, and it really shows in the feature set. They have lots of excellent examples of the library in use.

hoverIntent

jquery.hoverIntent.html

This wonderful little plugin helps smooth out user interactions. Instead of immediately invoking the onmouseover handler on links, this waits for a settable threshold before firing the onmouseover event. If you slide the mouse over a row of menu items, this will suppress all the random firings along the way to wherever you were moving the mouse. It can really make a big difference in reducing the jerkiness of the interface.

jkMegamenu

www.javascriptkit.com/script/script2/jkmegamenu.shtml

This little module from JavascriptKit is a straightforward implementation of a mega-dropdown menu. You can see this code in action on MendocinoFun.com.

SimpleDrop

javascript-array.com/scripts/jquery_simple_drop_down_menu/

Simple jQuery-assisted dropdown menu code. It only does a single level of dropdown, which is plenty— that’s why mega-dropdowns were invented! This code is simple to use and to style with CSS, and it’s robust because it’s so simple. And it works reliably on IE6, too.

Equal Column Heights

(hack)

This is a little hack I use a lot, and it ensures that selected columns are the same height. One of the great advantages of absolute positioning is that you can place sidebar material after more important content in the file for search engine spiders. The disadvantage is that absolute positioning removes the object from the flow, and the sidebar can therefore overlap the footer below if the sidebar is taller than the main content on the page. Note that this can equalize heights among multiple columns, not just 2. Place this code in the bottom of your HTML, just inside the /html tag.


<script type=”text/javascript”> // this sets all columns to the tallest height of the selected elements…. var max = 0; $(“#content, #leftnav, #sidebar”).each(function() { max = Math.max(max, $(this).height()); }).height(max); </script>

This code will equalize the heights of columns with IDs “#content”, “#leftnav”, and “#sidebar”.

There’s my working set. There are other modules I use occasionally, so I’ll get to those in a subsequent post.

Simple Enhancement to SimpleDrop

Posted by
I’ve looked around at many dropdown menu packages that are out there, and I’ve been using a very simple implementation called SimpleDrop from Javascript Array. SimpleDrop does everything I need: you use an unordered list for the menu items, include a tiny bit of jQuery, and set the styling for your menu. SimpleDrop has a built-in delay when the mouse moves off an item, but it immediately invokes itself when the mouse moves over an item. This turns out to cause excessive jumpiness if you have a lot of menu items. On one site, I also mixed in a mega-dropdown item off one of the top-level items, and the jumpiness is really obvious. The answer is simple — use the nifty hoverIntent plugin to manage the dropdown events. If you’re not aware of it, hoverIntent delays the invocation of the mousedown event until a settable threshold is reached. This allows you to slide the mouse quickly across a bunch of menu items without triggering a dropdown event on each one. Much less confusing! To use hoverIntent with SimpleDrop, first load the hoverIntent.js code. Next, change the invocation of simpledrop to use hoverIntent. OLD VERSION: $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer) }); document.onclick = jsddm_close; NEW VERSION: $(function() { $('#jsddm > li').hoverIntent(jsddm_open, jsddm_timer); document.onclick = jsddm_close; }); That’s really all it takes, and it definitely adds a lot to the package. I did try suggesting that Javascript Array add this bit to their page, but I got no response. They disallow comments on their site, however, and I guess my email went into the bottomless bit bucket.
Back to TOP Page UP Page DOWN