jqDock

A jQuery Plugin

The Dock - as anyone familiar with a Mac will know - is a set of iconic images that expand when rolled over with the cursor, and usually perform some action when clicked. This plugin mimics that behaviour by transforming a contiguous set of HTML images into an expanding Dock, vertical or horizontal, with or without labels.

HTML

<div id='menu'>
  <img src='image1.gif' alt='image1.png' title='' />
  ...
  <a href='page.html' title=''>
    <img src='imageN.png' alt='' title='' /></a>
  ...
</div>

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.5 - visibility: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 won't work as expected.

If an image's 'alt' attribute contains what looks like an image path (ends with a dot-suffix 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.

jQuery

Important! This plugin requires at least jQuery v1.2.3, because it uses API constructs that only became available in that version. However, 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...

<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='jquery.jqDock.js'></script>

To convert your HTML into a Dock, simply call the jqDock function in the standard manner...

jQuery(document).ready(function(){
  jQuery('#menu').jqDock(Options);
});

jqDock() supports full chaining, noConflict(), and the metadata() plugin.

Options

There are a number of options available, which can be set on per-Dock basis. None of the options are mandatory since they all have defaults.

//the most commonly used options are likely to be align, size and labels, closely followed
//by fadeIn and inactivity (the other options are probably for the more advanced user)
var opts =
  // horizontal Dock with images expanding downwards in the vertical axis...
{ align: 'top'
  // set the maximum minor axis (vertical) image dimension to 48px
, size: 48
  // add labels..
, labels: true
  // swap the GIF extension for PNG extension for the larger image...
, source: function(i){ return this.src.replace(/gif$/,'png'); }
};
$('#menu').jqDock(opts);

• align : string, default = 'bottom', values = 'top', 'middle', 'bottom', left', center', 'right'
  Fixes the horizontal/vertical main axis, and direction of expansion.
  
  For a horizontal menu:

  • 'top' : fixes the top edge of the dock, so that images expand down
  • 'middle' : fixes the middle of the images, so that images expand up and down equally
  • 'bottom' : fixes the bottom edge of the dock, so that images expand up

  For a vertical menu:

  • 'left' : fixes the left edge of the dock, so that images expand right
  • 'center' : fixes the center of the images, so that images expand left and right equally
  • 'right' : fixes the right edge of the dock, so that images expand left
• coefficient : number, default = 1.5
  Attenuation coefficient. This controls the relationship between the distance from the cursor and the amount of expansion of any affected image within that distance. A coefficient of 1 makes the expansion linear with respect to distance from cursor; a larger coefficient gives a greater degree of expansion the closer to the cursor the affected image is (within distance).
• distance : integer, default = 72
  Attenuation distance from cursor, ie the distance (in pixels) from the cursor that an image has to be within in order to have any expansion applied.
  
  Note that attenuation is always calculated as if the Dock was 'at rest' (no images expanded), even though there may be expanded images at the time.
• duration : integer, default = 300
  The duration (in milliseconds) of the initial 'on-Dock' expansion, and the 'off-Dock' shrinkage.
• fadeIn^1.3 : integer, default = 0
  The amount of time (in milliseconds) for the initial fade-in of the Dock after initialisation. By default this is set to 0 (zero), which means that the Dock is displayed in full as soon as it can be ( = show() ).
  There may be occasions when a 'softer' presentation of the Dock is desirable, and setting fadeIn to, for example, 400 would fade the Dock in over that period.
  
  Note that the A-B-C-D menu in my examples has been set to fade in over a period of 1 second (1000 millisecoonds); all other examples have the fadeIn option disabled (set to zero).
• fadeLayer^1.4 : string, default = ''
  By default the fade-in effect (see fadeIn above) is applied to the original target menu element. By specifying either 'wrap' or 'dock' here, the fade-in element can be switched to the child or grand-child (ie. div.jqDockWrap or div.jqDock, respectively) of the original target menu element. This option only has any effect if fadeIn is set, and is really only useful for cases where, for example, background colours have been styled on the original menu element or div.jqDock, and you don't want them to be faded in.
• flow^1.5 : boolean, default = false
  If set, this alters the default dock behaviour such that the Dock is not auto-centered and the wrap element (.jqDockWrap, which is relatively positioned) expands and collapses to precisely contain the Dock (.jqDock); this allows elements positioned around the docked menu to adjust their own relative position according to the current state of the docked menu.
  
  Warning : There are consequences to using this option, which might possibly only become apparent when you try it. I have provided it because it has specifically been requested, but with flow enabled, if you aim your mouse at a specific menu option you will probably find that quite often you don't stay on that option without having to move the mouse again!
• idle^1.5 : integer, default = 0
  The period of time (in milliseconds) after the mouse has left the menu (without re-entering, obviously!) before the Dock attempts to go to sleep. Please read - and be sure that you understand - the Advanced documentation before setting a value for this option.
• inactivity^1.3 : integer, default = 0
  The period of time (in milliseconds) after which the Dock will shrink if there has been no movement of the mouse while it is over an expanded Dock.
  
  Note that the rightmost of the demo page examples - the one with a camera, floppy disk, etc - is set to a 4 second inactivity period; the other six menus have the inactivity option disabled (defaulted to zero).
• labels : boolean or string, default = false, values = true, 'tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'
  This enables/disables display of a label on the current image.
  Allowed string values are 2 characters in length: the first character indicates horizontal position (t=top, m=middle, b=bottom) and the second indicates vertical position (l=left, c=center, r=right). So 'br' means bottom-right!
  If simply set to true, jqDock will use its default positioning for the label, which is 'tl' (top-left) for any align setting other than 'top' or 'left'. The defaults for 'top' and 'left' alignment are 'br' (bottom-right) and 'tr' (top-right) respectively.
  To determine the text for the label, jqDock looks firstly for text in the image's 'title' attribute; if not found, it will then look for text in the 'title' attribute of the parent link - if there is one - and use that if found.
  
  Please be aware that enabling this option with one of the middle/center label positions (eg. 'ml', 'bc', etc) may have a slight effect on the performance of the Dock, simply due to the additional processing required to position the label correctly.
• loader : string, default = [none], values = 'image', 'jquery'
  This overrides the default image loader used by jqDock. Depending on the browser, jqDock uses an image loader based on either "new Image()", or the jQuery HTML constructor "jQuery('<img />')...". If your Dock is not being displayed, and you have triple checked all your image paths, try setting this option to 'image' or 'jquery' to override the default loader.
• onReady^1.5 : function, default = [none]
  Function called after jqDock has completed initialisation and is ready to reveal the Dock. The called function is given the scope (this) of the original menu element, and may return false to prevent the Dock being revealed. Please refer to the Advanced documentation.
• onSleep^1.5 : function, default = [none]
  Function called when the Dock is about to go to sleep. The called function is given the scope (this) of the original menu element, and may return false to prevent the Dock going to sleep. Please refer to the Advanced documentation.
• onWake^1.5 : function, default = [none]
  Function called when the Dock is about to wake up from sleep. The called function is given the scope (this) of the original menu element, and may return false to prevent the Dock waking up. Please refer to the Advanced documentation.
• setLabel^1.5 : function, default = [none]
  Function for transforming label text (ie. title) when initially building the label. This is provided so that if a label requires HTML, this transform function can set it rather than having to put it in the title field and thereby make the markup invalid. The called function will be given scope (this) of the original menu element, and will be passed 2 arguments: the text of the label, and the (zero-based) index of the option within the menu; the function is required to return a string (HTML or plain text).
  The function is called once per option during setup.
• size : integer, default = 48
  This is the maximum value (in pixels) of the minor axis dimension for the 'at rest' images. For example, an image of natural dimensions 90x120 (width x height), placed in a horizontal Dock (say, 'align' = 'bottom') would, by default, be sized down to 36x48. This is because height is the minor axis in a horizontal Dock, and to keep the presentation of the 'at rest' images neat and tidy it is the height that is governed by the size option. Conversely, in a vertical Dock it would be the width that was capped at the size value, with height being set proportionately.
• source : function, default = [none]
  Function for providing an alternate large image source path. For instances where you are either unable, or do not want to put the large image's path in the IMG's 'alt' attribute, but you still want to have a small and large image for clarity, this function may be useful.
  
  If provided, it is called once per image during setup, and is given the scope of the image element and passed the index of the image within the current Dock; it is expected to return a valid image path, or false/null to continue using the defaults ('alt' or 'src'). (See example above)
• step^1.3 : integer, default = 50
  The timer interval (in milliseconds) between each animation step of the 'on-Dock' expansion, and the 'off-Dock' shrinkage.

Alternate Options^1.3

In order to support image switching in real time, jqDock() supports a small alternate set of options for use solely on images.

When passed a selection of elements that consists solely of IMG elements that are already part of a jqDock menu, jqDock() will accept 2 options, that effect a change of an image's source path.

• src : string or function
  The new source path for the 'at-rest' image.
• altsrc : string or function
  The new source path for the expanded image.

$('#menu img').eq(0).jqDock({src:'imageAlpha.gif', altsrc:'imageAlpha.png'});

var fnChangePath = function(current, type){
    //always change altsrc, but only change src if image has a class of 'changeExpanded'...
    return type == 'altsrc' || $(this).hasClass('changeExpanded')
      ? current.replace(/old\.png$/, 'new.png')
      : current;
  };
$('#menu img').jqDock({src:fnChangePath, altsrc:fnChangePath});

[ You can specify a string for one property and a function for the other, eg 'src' as a string and 'altsrc' as a function. ]

I have provided one example that uses these alternate options - Change image source - on the Examples page.

Important! Even though you may not have initialised the dock with alternate larger images (see the source option above), jqDock will still have 2 separate internal variables: one for the 'at-rest' image path, and one for the expanding image path. This means that if you change one of the paths, it is highly likely (but not inevitable!) that you should be changing both.

Events & 'Sleeping' Dock

As of v1.5, a number of custom events have been introduced, mainly to support the new concept of the Dock being able to "go to sleep". This enables the calling script (if it so desires) to do something with the Dock - like slide it out of view - if it has not been used for a while.

Basically, the Dock will (if instructed to - see the idle option) go to sleep after a specified period during which the mouse has not entered the Dock. Technically, it does this by setting a timer on a mouseleave event, cancelling the timer on any mouseenter or mousemove event (within the Dock). The duration of the timer is set via the idle option, and if the timer fires then the Dock goes to sleep.
Note that this is totally different to the inactivity option, which is for the absence of mouse movement while over the dock.

Once the Dock has gone to sleep, the only way to wake it up it is to 'nudge' it. While the Dock is alseep it will not respond to any mouse movement events (enter, leave or move) but it will still respond to clicks.

jqDock Will Trigger ...

• dockshow
  Triggered once (and once only) when the Dock has initially been made visible after initialisation. Can be prevented by onReady() (see below and Options) returning false.
• docksleep
  Triggered the instant the Dock goes to sleep (except when onReady() returns false). Can be prevented by onSleep() (see below and Options) - which immediately precedes it - returning false.
• dockwake
  Triggered the instant the Dock is woken up. Can be prevented by onWake() (see below and Options) - which immediately precedes it - returning false.

$('#menu').bind('dockshow', function(){  });
$('#menu').bind('docksleep', function(){  });
$('#menu').bind('dockwake', function(){  });

• onReady
  Called after jqDock has completed initialisation and is ready to reveal the Dock. Returning false from the onReady() call will prevent the Dock being revealed, put the Dock to sleep, and prevent notification of the dockshow event.
  Note that, unlike the other "on___" calls, onReady() and dockshow are separated by another process - that of actually 'revealing' the Dock. If the fadeIn option is set, there could be a discernible delay because dockshow is only triggered once the Dock is fully visible.

  WARNING : If you return false from an onReady() function you have effectively absolved jqDock of any responsibility for the initial display of the Dock! It is your script that will have to ensure that the Dock is, or becomes, visible and usable, and then 'nudge' the Dock awake.

• onSleep
  Called immediately prior to putting the Dock to sleep (for any reason except onReady returning false). Returning false will prevent the Dock going to sleep. Note that even if onSleep() returns false the idle timer does not get automatically reset! It will require a 'nudge' to reset it.
• onWake
  Calling immediately prior to waking the Dock from sleep. Returning false will prevent the Dock waking up.

var doSomething = function(){ $('.jqDock', this).hide(); }
  , doSomethingElse = function(){ $('.jqDock', this).show(); };
$('#menu').jqDock({onSleep:doSomething, onWake:doSomethingElse});

jqDock Listens For ...

• dockidle
  On receipt, the Dock will (if not already asleep) attempt to go to sleep by calling onSleep(), and then triggering 'docksleep' if successful.
• docknudge
  On receipt, the Dock will attempt to wake up (if asleep) by calling onWake() and then triggering 'dockwake' if successful. If the Dock is not asleep when it receives a 'docknudge', it will (if appropriate) reset the idle timer.

$('#menu').trigger('dockidle'); //puts dock to sleep (if not already)
$('#menu').trigger('docknudge'); //wakes dock from sleep, or resets idle timer if not asleep

$('#menu').jqDock('idle'); //same as $('#menu').trigger('dockidle')
$('#menu').jqDock('nudge'); //same as $('#menu').trigger('docknudge')

Illustrations of Event/Callback Sequences

ready / show idle / sleep nudge / wake

HTML Transform

The HTML transform is the same, regardless of the vertical/horizontal orientation of the Dock, with only slight differences in inline styling between the two. The inline styles applied by jqDock are not show below, but they do get applied to both the new and the existing elements, and can vary depending on the browser, the containing page's html, and the options chosen for jqDock.
As an example, this...

<div id='menu'>
  <img class='myFirstOption' src='image1.gif' alt='image1.png' title='Label text' />
  ...
  <a id='mySpecialLink' href='page.html' title='Label text'>
    <img src='imageN.png' alt='' title='' />
  </a>
  ...
</div>

...transforms to this...

<div id='menu' class='jqDocked'>
  <div class='jqDockWrap'>
    <div class='jqDock' id='jqDock0'>
      <div class='jqDockMouse0'>
        <div>
          <img class='myFirstOption jqDockMouse0' src='image1.gif' alt='image1.png' title='Label text' />
          <div class='jqDockLabel jqDockLabelImage'>
            <div class='jqDockLabelText'>
              Label text
            </div>
          </div>
        </div>
      </div>
        ...
      <div class='jqDockMouseN'>
        <div>
          <a id='mySpecialLink' href='page.html' title='Label text'>
            <img class='jqDockMouseN' src='imageN.png' alt='' title='' />
            <div class='jqDockLabel jqDockLabelLink'>
              <div class='jqDockLabelText'>
                Label text
              </div>
            </div>
          </a>
        </div>
      </div>
        ...
    </div>
  </div>
</div>

CSS Styling

Using the jqDocked, jqDock, jqDockLabel and jqDockLabelText^1.5 classes, you can apply CSS styles to modify the presentation of the Dock and labels (if enabled). The jqDockWrap^1.3 class also enables some positioning (such as centering) that was not possible in earlier versions. For examples, I suggest looking at the later part of the style.css stylesheet used by these pages (Demo CSS) - it is fully commented and, given the number of demo Docks, should provide all the hints you need. There are also a number of single-Dock examples on the Examples page.

The jqDockMouseN classes are used internally by the mouse events handler to determine the menu item (N) being targeted. The jqDock0 id is also used internally, to determine which Dock is being targeted when there are multiple Docks on a page. (Additional Docks would have equivalent ids of jqDock1, jqDock2, etc.)

The Dock's label has an additional class - jqDockLabelLink or jqDockLabelImage - which indicates whether the current menu option is an image within a link, or just an image, respectively. You can use this class to, for example, set the cursor for the label to be the same as the image it relates to.

Please be aware that although jqDock does not remove any original classes or ids, it does apply inline styling to anchors and links in order to ensure that everything works correctly, and these inline styles - such as setting padding, margins and borders to zero - may well override your own CSS rules.

Tested Browsers

I have tested the demo page and examples in the following browsers:

• Internet Explorer (6 and later)
• Firefox
• Opera
• Safari
• Chrome

If anyone can confirm that jqDock works - or doesn't! - in other browsers (and/or operating systems), please let me know.

Known Issues

1. You can space menu items out by applying padding to the images, but the padded area is not expanded in the minor axis. This means that when your cursor is off the main axis area there is a gap between adjacent expanded images that will trigger a 'mouseleave' event and cause the dock to return to 'at rest'.
   Snapshot...

Other Questions

1. What files do I need in order to run jqDock?
   • Just the script file - jquery.jqDock.js or jquery.jqDock.min.js (compressed version). Oh, and jQuery itself, of course!
2. I haven't used jQuery before, so where do I get it and how do I use it?
   • You can get your own copy of the latest version of jQuery from http://jquery.com.
   • Alternatively, you can load jQuery from a CDN (Content Delivery Network) host, and http://docs.jquery.com/Downloading_jQuery has a list of CDNs for you to choose from.
     As an example, this could go in the head section of your page...

     <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>

   • As for using jQuery, well there is substantial documentation, including a number of tutorials, available on the jQuery site.
     But to simply get jqDock working, I would suggest looking at the source code of the examples on the Examples page, particularly the Images within links, labelled one (just don't include my example.js file on any page you create, or clicking on your links will simply produce an alert!).
   • Using images within links (anchors) is probably the easiest way to implement jqDock because then you simply put the menu option's target url into the link's href attribute. This avoids having to get into things like click handlers if you've never used jQuery before.
3. Why isn't the Dock being displayed?
   • Check that all your image paths are correct, because if jqDock fails to load any image the Dock will not be shown.
   • See if the Dock diplays correctly in another browser - there is always the possibility that jqDock doesn't work for your browser/operating system combination.
   • Try changing the image loader (options.loader = 'image' or 'jquery'). jqDock uses 2 types of image loader, and it could be that the default for your browser is incorrect.
   • Check for any elements other than images or link-wrapped images (IMG or A>IMG) in the menu that you are attempting to turn into a Dock.
   • As of v1.5, if you have set the onReady^1.5 option up with a function that returns false then the display of the dock is down to you!
4. Why is nothing happening when I move my mouse over the images?
   • Check that jqDock() is being called after the document has loaded. (Ref. the jQuery tutorial : Launching Code on Document Ready).
   • Check that some other element of your page is not obscuring the Dock, and thereby intercepting the events (this may seem unlikely but I can assure you that, having accidentally done it myself, it is very easy to do!).
   • As of v1.5, check that the Dock has not gone to sleep (see the Advanced page), either because you set the idle^1.5 option, or because you instructed the Dock to go to sleep.
5. Why is the text of my links not being displayed?
   • jqDock removes all text nodes within the scope of the menu element, including link text. Not doing so would cause variations in the presentation of the Dock between browsers and DOCTYPE'd pages; it would also make the width/height calculations almost impossible.
6. Why am I not seeing labels on the Dock images?
   • The labels option is off by default.
   • Labels only appear on expanded images, and then only on the image currently beneath the cursor.
   • The text for a label is taken firstly from the title attribute of the menu image; if that is not available, and the image is wrapped in a link, then the title attribute of the link will be used. If neither of these are available, then no label will be displayed.
   • As of v1.5, you have the option to run a setLabel^1.5 function on each label. If that function does not return a string (of HTML or text) then the label will have no content and will not be shown.
7. Can I change the position of the label?
   • As of v1.1, yes (see Options).
   • The positions can be 'tweaked' by css styling of div.jqDockLabel, eg. adding padding to the label (see the Demo CSS, and Examples).
   • As of v1.5, the label can be comprehensively re-positioned by means of the additional inner wrapper, div.jqDockLabelText^1.5 (see the Examples).
8. How do I change the style of the labels?
   • Add a CSS style for div.jqDockLabel or div.jqDockLabelText^1.5, setting font, color, etc, as required. See the examples at the bottom of Demo CSS, and on Examples.
9. How do I stop the image expansion being 'jerky'?
   • There is actually very little you can do. Different browsers, different operating systems, and different machines, all make for a varied experience. I have reduced the processing overhead in the events handler as much as possible, and about the only thing you can try is turning off labels (if they are enabled), or placing them in a corner rather than using middle/center, and possibly reducing the distance option (the fewer images that are in an expansion state at any time, the less the processing involved). Sorry.
10. Why can't I use an earlier version of jQuery than v1.2.3?
    • The jqDock plugin utilises some of the API features introduced in v1.2.3.
    • If it doesn't break any of your existing code, I would highly recommend upgrading to the most current version of jQuery, for speed and efficiency.
11. Why is the Dock disappearing under other element(s) on the page?
    • Because the target menu element (and its surrounding elements?) have not been correctly positioned in order to avoid just such a situation.
    • jqDock does not move or delete any elements from the page's original HTML, and any inserted elements or wrappers are within the target menu element's scope. The position of the Dock is totally dependent on the original styling applied to the target menu element, plus any additional styling you apply to div.jqDock.
12. How do I change the appearance of the Dock?
    • Apply css styling to div.jqDockWrap or div.jqDock, that are inserted within the target menu element's scope. See the Styling documentation, and the examples in the Demo CSS and the Examples page.
13. Can I dynamically add/remove images on an existing Dock?
    • Yes, of course, with jQuery you can do almost anything you like ... but you will corrupt the Dock's layout and positioning, so I suggest you don't!
14. Can I dynamically change images on an existing Dock?
    • Since v1.3, yes. See the Alternate Options on the Options page. There is also an example of switching images on the Examples page.
      Important! Only replace existing images with images of the same size, otherwise you will corrupt the Dock's layout and positioning!
15. Can I disable elements of the Dock?
    • You can enable/disable clicks in the same manner that you would any other element.
    • jqDock does not control what happens when/if an element is clicked - you do. If your menu has any pure images (not wrapped in links) then you will have to bind any required click events to them. If there are linked images in the Dock then what happens when the link (the image) is clicked is down to you.
    • Note that you can't selectively hide/show elements of the Dock at will (except by making them invisible, which would leave gaps!). You also can't selectively prevent elements from reacting to the mouse (in terms of expanding/shrinking).
16. Why do I need a large and a small image?
    • You don't, you can just use the larger image. However, some images do not retain good clarity when reduced by a browser, so you therefore have the option of providing two purpose-built images: one for when the dock is not being expanded ('at rest'), and one for when it is expanding.
17. Can I remove jqDock from a menu element?
    • No, sorry, there is no 'un-jqDock' facility.
18. Can a Dock be given a 'fixed' position?
    • Yes. However, as with any other use of fixed position, you are going to have to be careful and meticulous with your HTML and CSS if you want it to work in all browsers. There is an example of a (very simple!) fixed position Dock (that even works for IE6, and IE7 in quirks mode) on the Examples page.
19. Why does nothing happen when I click on a label?
    • Regardless of whether an image is contained within a link or not, clicking on its associated label will always trigger the 'click' event for the image.
    • Since v1.3, if the related image is contained within a link, then the label is also within that link, and should therefore activate the link in the same manner as clicking on the image itself.
    • [ Prior to v1.3, clicking on the label of an image within a link required that you provide a click handler for the label itself, which could trigger a handler on the relevant link. ]
20. Why are the examples on the demo page so slow to load?
    • Possibly because there are 7 of them on a single page!
    • I can think of no real-life scenario where anyone would want/need that many separate jqDock menus on one page. I would expect normal usage to be one jqDock, or possibly two, so the load times of the examples on the Examples page might be a more realistic indicator?
21. Can I upgrade from a previous version of jqDock simply by swapping in the new version of the script?
    • From v1.3 to v1.4, yes.
    • From v1.3/4 to v1.5, yes, if you initially hide your menu (as I do on the demo page); as of v1.5, jqDock no longer hides the menu at the outset, so if you don't already you might want to consider doing so? (The Change Log for v1.5 has possible 'breaking changes' indicated in red)
    • From a lower version, in principle, yes, however you may need to be aware of the changes to some of the options defaults (see the Change Log section on the Introduction page)...
    • If you have styled (ie. positioned) a menu based on a previous default size of 36, the new default size of 48^1.3 may cause expanded menu items to encroach on other elements on your page (you may need to add size:36 to your options).
    • The other setting that might affect the presentation of your menu is a change to the default label position (from 'tc' to 'tl')^1.3, if you have just set labels:true in your options.
22. Why are my image/anchor borders/margins disappearing?
    • Inline styling is applied to anchors and images that sets padding, margins, and borders to zero.
    • Why? Because it's expensive (coding and processing) to measure and handle each of these, per image, on all four sides, and be consistent across browsers and Doc Types. Different browsers/Doc Types handle these attributes (margins, in particular) in different ways (and IE has caused me enough problems as it is!).
23. Why does the Dock take up so much room?
    • Because the images expand, and that extra space is needed for the images to expand into.
    • As of v1.5 there is a flow^1.5 option which removes the Dock's space reservation and auto-centering, but you should be very careful if you implement it; you (or your site's visitors) may not like the result.
24. Can the jqDock automatically hide the Dock if it is not being used?
    • No. But as of v1.5, you can! (see the Advanced page)
    • There simply too many possibilities for jqDock to do anything itself : Hide it how? Slide or fade (or something else)? Slide it which way? Slide how far? Slide and fade? Fade over what period? Hide it when slid? Slide it under another element? Slide it off the viewport? Etc, etc, etc...
    • So ... you now have the ability to do it for yourself. And there are even some Examples to help you!
    • Please be aware that IE has certain problems with fading that jqDock handles for the Dock itself (div.jqDock and below), but if you fade the Dock wrapper or the original menu element you will have to cope with these issues yourself.
25. Can one of the menu's elements be designated as 'active', and thereby be in an 'expanded' state when initialised?
    • No.
26. Why are my transparent PNGs not showing as transparent?
    • On the assumption that you are specifically referring to IE6 and not a more recent browser, then that is your answer ... IE6!
    • As I have indicated in the Introduction - albeit very briefly! - IE6 can only handle transparency on 8-bit PNGs. There is nothing jqDock can do to change IE6's (or any other browser's) native behaviour, although I have no doubt that there are other solutions available specifically to provide a work-around for this limitation.
    • If your problem is with a more recent browser then please let me know (with a test case if possible), just in case there is something jqDock can be made to do about it.
    • Please note that several of my Examples use 8-bit PNGs with transparency, so if there is a problem, they should demonstrate it.