Usage

 

HTML

Example:

Please note that unfortunately jqDock does not work directly on lists (html tags UL or OL). jqDock requires contiguous images, or links that contain an image, and lists do not provide that kind of structure.

STOP PRESS! As of v2.0, jqDock does work with lists! Please see the Lists page.

A menu contains images, which may or may not be within links – you can mix and match as you wish. You should provide css styling as necessary to position your menu where you want the Dock to appear. You can initially hide it (display:none; or – from v1.51.5visibility:hidden;) if you wish; jqDock will reveal it once initialised. You can set the width and/or height styles on the images – for instances where javascript is disabled? – but you should avoid using the width and height IMG attributes.

Images are always expanded to their full natural width/height, or a fraction thereof, depending on the position of the cursor at the time. You can not control the ultimate dimensions of the expanding image by css, because jqDock overrides it, and if you try using the width/height attributes things may not work as expected.

Note : The images you use should be larger than you expect to see them in an “at rest” Dock! As has been stated above – and on the Introduction page – jqDock works by allowing images that have been reduced in size to expand towards their natural full size when hovered over (or near); it does not perform any enlargement of naturally small images!

If an image’s ‘alt’ attribute contains what looks like an image path (ends with a file extension of gif, png or jp[e]g) then ‘src’ will be used as the small image and ‘alt’ as the larger, expanding one.

By default the ‘labels’ option is off, and jqDock will remove any values for ‘title’ and ‘alt’ attributes (after examination), in an attempt to prevent the browser displaying a tooltip when hovering over an image (causes ‘fluttering’ in some browsers if the cursor is allowed to move over the tooltip). Also, jqDock will remove all text nodes within the menu – this helps to ensure a known and standard presentation of the Dock, and smooth animation.

Lists

See the Lists documentation.

Styling

See the Styling documentation.

jQuery

Important!
Versions 1.* of this plugin require at least jQuery v1.2.3.
Version 2.0+ requires at least jQuery v1.7, because it uses API constructs that only became available in that version.
I would always recommend that you try to use the latest version, for speed and efficiency.

Link in the jqDock source (full or compressed) after jQuery itself…

Example:

To make your HTML into a Dock, simply call the jqDock function in the standard manner…

Example:

Note : If you are using lists2.0, please check the Lists documentation!

HTML5 data- Attributes1.9

As of v1.9, the HTML5 data-jqdock attribute is supported, for an object of jqDock options in valid JSON syntax (requires jQuery v1.4.3+).
And jqDock is now also available as jQuery.jqdock and jQuery.fn.jqdock(), ie. the lower-case equivalents of “jqDock”…

Example:

As of v2.02.0, jqDock’s use of the data attributes has been extended so that you may also specify any individual option as a data attribute.

Example:

The order of preference for accepting options values is, in increasing order of priority:

  1. a data-jqdock attribute (ie. a JSON object)
  2. individual data-jqdock-[option name] attributes
  3. options supplied directly to the javascript $().jqdock() constructor (highest priority)

Note : In cases where the option name is camel-cased, such as fadeIn, then the equivalent data attribute is hpyphenated, eg. data-jqdock-fade-in.

See also : Options, For Images

Auto-Run Class2.0

Also new to v2.0 is the provision for a class of jqDockAuto to be added to a menu element, which will result in jqDock() being automatically run on that element. This means that for simpler instances of the Dock – ones that don’t need any supporting functions – you don’t even need to add any javascript of your own!

Example:

Share
 Posted by at 6:04 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)