jqDock

 

jqDock is a jQuery plugin that transforms images into a Mac-like Dock menu, with icons that expand on rollover!

Illustration of jqdock

The plugin works with images, or images within anchors, and has a number of configuration options which provide :

  • Horizontal or vertical alignment
  • Image expansion out from an edge or a mid-point
  • Positioned labels
  • Different small and large images
  • Menu fade-in
  • Size and sensitivity adjustment
  • Initial expansion and instant ‘freezing’
  • Inactivity timeouts and ‘wake up’ calls

There are also a number of callback hooks and custom events that can be used to control how the Dock operates, and create some interesting effects.

Full documentation is available (see sub-pages), and there are 50+ examples available to help you get started. I’ve cherry-picked half a dozen here : no options , 2 menus , labelled images , switch images , slide in-out , multiple navigation

NB : There’s also a WordPress plugin : jqDock Post Thumbs by Shaun Scovil.

Share
 Posted by at 9:58 am

  116 Responses to “jqDock”

Comments (79) Pingbacks (37)
  1. Good afternoon,

    I use jqDock and it works great except that it inserts a # at the end of the links’ href. I don’t want that since it breaks my page refresh. Is there any way to remove this additional #?

    Regards,

    Pierre

    • Pierre
      jqDock does not modify the href attribute of links surrounding an image, as examples such as this demonstrate. Can you provide a web-accessible example that I can look at?
      Regards…

  2. Very nice work! I have two questions:
    - is it possible to have labels visible all the time?
    - does it work with canvas/svg instead of img?

    Thanks

  3. Exelent blog, awesome js you provide here man.
    I was looking at the labelled images and I was wondering:
    is there a way to make the images “expand” upwards instead of in front?

  4. is there anyway to add a submenu to a submenu? so that first menu opens the sub, and thet sub opens anotehr sub on click?

    • http://www.wizzud.com/2012/01/05/sub-menus-as-labels/ uses hover rather than click, but otherwise it has sub-sub-menus…

      • thanks. however thats not what i need. i meant like in the example “multinavigation”, when for instance the second menu point is clicked, it reveals a new row (the submenu). From there I want the same function for a new submenu under that submenu? Anyway to do this? I’ve managed to get it to work, but it will only go back to the first submenu, from there it wont go back to the main menu.

        Like this:

        Main Menu >> Submenu >> Sub-submenu

        Back it goes:

        Sub-Submenu >> Submenu >>(wont return to main menu)

        • Ah, okay.
          Backward navigation is actually the easiest thing to set a generic handler for…
          The jqdock requirements for navigation are fairly simple : if you click a nav image/link, hide/idle the current menu and unhide/nudge the target menu.
          My sub-menus are set up such that the first image is a Home navigator. If we modify that slightly to say that the first image/link of any sub- (or sub-sub-, or whatever) menu is a Back navigator (ie. “go back to whichever menu opened this menu”) then all you need for any Back navigation is to know which menu you came from.
          Therefore the click handler on a nav image/link (eg. all the top menu ones, and any sub-menu one that opens a sub-sub-menu) has to do one extra thing to the target menu : as well as doing an unhide/nudge, simply store the ‘current menu’ somewhere on the ‘target menu’ (eg. $('#targetMenu').data('opener', thisMenu);). Then the click handler on any Back image can simply determine the target menu from $(thisMenu).data('opener');.
          The ‘opener’ doesn’t even have to be stored on the menu : it might be better to store it on the Back image/link itself, eg $('#targetMenu .backLink').data('opener', $(this).closest('.jqDocked')); to set it, and $(this).data('opener') for the Back image/link to retrieve it.
          Going forward is a lot harder to be generic about, because it very much depends on your menu structure and how you detemine which sub- or sub-sub- (or whatever) menu to open when a particular nav image/link is clicked. You could use the html structure, or classes, or ids with increasing levels of numbering (#sub_1, #sub_1_1, #sub_1_1_1, etc) … there are so many ways of defining a ‘menu structure’, but whichever one you pick it should be possible to determine the target menu from any clicked-on nav image/link without having to assign different click handlers to each one.
          I realise that this response may not be as specific as you would have liked, but I hope it helps.

  5. Hi,

    I need to incorporate a slider under the above example but not able to control its width? How can we do that please advise?

    Thanks & Regards,
    Ankur

    • I don’t know which example you are referring to, and I’m unsure which width you are “not able to control” : the example (or some part thereof) or the slider?
      Not knowing anything about the slider, or what it needs to match (in terms of width), I suggest initialising the jqDock, and then inspecting div.jqDockWrap or div.jqDock. You could then try simply appending your slider to one or other of those (making a suitable adjustment for height) with a width of 100%?

  6. Would this be able to be adapted to a circular layout?

    • No. JqDock is primarily one-dimensional : it works on movement of the mouse in either the x-axis or the y-axis, across a group of items arranged along that same axis.
      The only way of using jqDock for a ring of images is to have each image be the sole item of a ‘menu’, and run jqDock on each ‘menu’. But you’d have to space out your ‘menus’ to provide room between them for a fully-expanded image, and there would be no interaction between the ‘menus’ (so expansion of one image would not affect neighbouring images in any way).
      I think that for a circular layout you need an alternative to jqDock, something that works on a per-image basis so that the position of images relative to each other becomes irrelevant.

  7. nice work, i will be soon using it in one of my project ..
    Thanks..

  8. Is it possible to change the horizontal menu layout to vertical with right or left alignment?

    Thanks and congratulations, fantastic work!

    Ricard

  9. First of all congratulations for this great work! One question: Is it possible to somehow wrap all the images on a smooth slider (like this one here: http://www.smoothdivscroll.com/#quickdemo) and have at the same time the enlarge effect on the hovered image?

    Thank you!

    • Thanks for the compliment.
      Regarding SmoothDivScroll, I don’t know for certain without actually trying it but I suspect not :

      • SmoothDivScroll needs to know (ie. be able to calculate) the width of the scrollable area, and the nature of jqDock is that the area taken up by the images changes (as one or more images expand/contract).
      • You wouldn’t be able to use the endless loop settings because SmoothDivScroll manipulates the images (moves first to last, or vice versa) to achieve this, and that would not sit well with jqDock.

      Making the Dock slide left/right is not difficult – and there is an example – but you do need to take account of its ‘flexible width’ nature.

  10. hello wizzud, great work. i have a question, but not sure how to explain. I am creating a webpage using the dock and i also am using a space gallery slideshow. the problem is the dock will now work when i use the jquery from the slideshow. im not sure which version if jquery it is, but it is newer. ive tried using either the newer jquery (dock will not work), and using the jquery 1.1.2. (the slider will not work).
    can this dock run off a newer version of jquery?
    or do you have any ideas what i can do?
    thanks

    • i forgot to add what was happening, my dock icons are all bunched up onthe top left.

      and i just downloaded jquery 1.7.2.min, the slideshow works, but the dock does not.

      thanks

    • Hi Reconmatt.
      I must admit I’m slightly confused as to which version of jQuery you’ve managed to get working with which plugin.
      jqdock v1.* requires an absolute minimum of jQuery v1.2.3, and if you’re using the latest version of jqdock (which is v2.0.1, and which I would recommend using) then the minimum jQuery version is 1.7.0. As you can hopefully see from my examples, it works fine with jQuery v1.7.2 (actually, the examples all use the jquery-latest.min.js file served from the code.jquery.com CDN).
      You don’t say where the Spacegallery plugin comes from but, having Googled it, I’m assuming that it’s http://www.eyecon.ro/spacegallery/ ? I don’t know which version of jQuery is shipped with the Spacegallery plugin, but I have found a working example (on a different site) that uses jQuery v1.4.2. I can’t prove that it will work with jQuery versions greater than 1.4.2, but your second post seems to imply that it does.

      Right, first off, if you have a web-accessible example page that shows jqdock not working then that would make it a lot easier for me to help you?
      Secondly, please check the version of jqdock you are using, and verify that you have an appropriate version of jQuery to run it under.
      Thirdly, you mention jqdock’s images being “all scrunched up on the top left” : can you please check out Known Issues, number 2, and see if that applies to your implementation?

      • thanks, for the quick reply. heres a link to what i have so far.
        http://www.lucasbarela.com/gallery.html
        i have taken out the script location for the slider

        http://www.lucasbarela.com/gallery5.html
        this is where i left the script location for the jquery.

        i tried using jquery 1.7.1.min, latest version from jquery.com, i still have the same effect.

        if you could help, that would be great, if not, is ok, ill probably end up just using the first link for now.

        Thanks,Matt

        • Matt, thanks for the links. There’s one slight problem, which is that neither of the pages you provided are using jqDock!
          Since you seem to be trying to use Interface‘s Fisheye Menu, my initial response would have been that you approach them for support … but I don’t think you’ll be very successful, given that their site is still quoting jQuery v1.1.2 as the platform!
          If you would like to switch to jqDock instead of Fisheye, then please do so, and if you then have any problems I would be pleased to help.

  11. Hi,

    What do you think, can I use this example (image gallery) http://www.wizzud.com/jqdock_examples_folder/example.gallery.html with the jQuery thumbnail scroller plugin? http://manos.malihu.gr/jquery-thumbnail-scroller I have small thumbnails and intend to show large thumbnails with jqDock as Fisheye. But I need a good thumbnails scroller!

    Thanks in advance.
    Oleg.

    • Hi Oleg.
      There’s one, fairly major, area of incompatibility between jqDock and scrollers – and it’s immediately apparent as soon you open my gallery example : width (or height, if vertical)!
      Scrollers tend to work in a fashion that requires calculation of the dimensions of whatever’s being scrolled. jqDock works by changing those dimensions every time the mouse moves over the dock!

      With jqDock you have 2 possibilities : scroll according to the ‘at rest’ dimension, or scroll according to the maximum expanded dimension. If you do the former (the ‘at rest’ dimension) you run the risk of not being able to see/reach the items at the ends of the dock; if you do the latter, you’ll have white space at either end of the scroller.

      In theory the answer to your question is Yes, because the thumbnail scroller and jqDock don’t appear to interfere code-wise with each other. But you would have to make changes to the scroller’s css. I’ve only run a very quick and dirty test myself, and I didn’t go as far as trying to make it presentable and usable – personally, I’m not convinced it can be done – so good luck with it, and if you get them to work together decently let me know…

  12. hey wizzud, fantastic piece of work! i´m a total beginner with jquery, so a friend styled your dock in combination with sound:
    http://www.tonage.de/e/index
    in order to show visitors a “hint” of the dock, i tried different ways to “expand” one image and collapse it again with some timeout…but nothing worked out unfortunately. do you maybe have an idea how to implement such a short activation once the page has loaded?
    many thanks!

    cheers, danny

    • Hi Danny. I’m glad you like jqDock!
      You can run an ‘expand’ on any menu item programmatically using…
      $('#menu img').eq(n).jqdock('expand');
      …but bear in mind that the dock is then ‘frozen’ and requires a ‘nudge’ to wake it up again (so that it responds to mouse movements).

      If you wanted to do something like a ripple effect, you could go along the (very simple) lines of…

      var rippleTimer = null, rippleItem = -1,
        ripple = function(stop){
          if(stop === true){
            if(rippleTimer){
              window.clearTimeout(rippleTimer);
            }
            //the 'idle' collapses the dock, and the 'nudge' makes it mouse-responsive again...
            $('#menu').jqdock('idle').jqdock('nudge');
            rippleTimer = null;
            rippleItem = -1;
          }else{
            if($('#menu img').eq(++rippleItem).jqdock('expand').end().length > rippleItem){
              rippleTimer = window.setTimeout(ripple, 600); //set as appropriate
            }else{
              ripple(true); //stops ripple
            }
          }
        };
      var rippleTimer = null, rippleItem = -1,
        ripple = function(stop){
          if(stop === true){
            if(rippleTimer){
              window.clearTimeout(rippleTimer);
            }
            //the 'idle' collapses the dock, and the 'nudge' makes it mouse-responsive again...
            $('#menu').jqdock('idle').jqdock('nudge');
            rippleTimer = null;
            rippleItem = -1;
          }else{
            if($('#menu img').eq(++rippleItem).jqdock('expand').end().length > rippleItem){
              rippleTimer = window.setTimeout(ripple, 600); //set as appropriate
            }else{
              ripple(true); //stops ripple
            }
          }
        };

      …where running ripple(); would expand each menu item below #menu in turn. Running ripple(true); stops it (if running). You could, for example, run it on receipt of a dockshow event (on #menu), or after a specified amount of time.

      You can even trigger mouseover and mouseout events on each item as you go through them – to run your soundbites – but you would then have to lengthen the time spent on each ‘expanded’ image, and you’d need careful consideration of how to interupt and cancel the ripple as soon as the mouse entered the dock (because there’s nothing in this ripple function to prevent your soundbites playing on mouseover of any item). In fact, if you wanted to get that clever, I would advise shifting the playing of the soundbites off of the onmouseover / onmouseout attributes and using jquery to bind the relevant mouseenter / mouseleave (or hover) events, because it would give you more control.

      If you look at the Demonstrator page, on the Demonstration Controller is a set of small icons corresponding to the menu items on the left; clicking any one of those small icons will expand the relevant menu item on the left. You can see that the dock is then ‘frozen’ (blue ‘ZZZZ’s), and you can ‘nudge’ it, or ‘idle’ then ‘nudge’ it. In all cases, the actual code being run is shown in the black box at the bottom of the Demostration Controller.

      • WOW!
        thank you so much for your help!
        very much appreciated.
        i just puted this into my code on a test-page and it looks great!
        i just have to adjust the timeout and then i am a happy person.

        once again many thanks for your work!

        greets,

        danny

  13. Olá galera, gostaria de saber porque o jquery.jqDock
    não funciona bem no google chrome, ou seja, no meu site que estou programando ainda,
    quando executo o meu site no chrome e no explore, ele não desce, não posso ver o rodapé do site, é em
    todas as páginas, descobrir que é o jquery.jqDock v1.2. Já no firerox ele funciona perfeitamente.

    Por Favor o que faço para meu site abri normalmente no google chrome??
    Por obséquio me ajudem
    =)

    • Translation from Google Translate:

      Hello guys, I wonder why jquery.jqDock not work well in google chrome, ie, on my website I am programming yet, when I run my site and explore the chrome, it does not go down, I can not see the bottom of site is on every page, find out which is the jquery.jqDock v1.2. Firerox now it works perfectly.
      Please what do I usually open my site in google chrome?
      Please help me

      Can you upgrade to a newer version of jqDock? Version 1.2 is very old now!

  14. Just wanted to say I was doing research on Mac dock-like jQuery plugins. A quick note: the plugin isn’t touch-friendly (iPad, etc). Otherwise, works well.

    But that’s not why I’m commenting here. I’m commenting because I’ve read all of the comments here, as well as your responses. You’re really quite remarkable; you took the time to respond to each and every comment with a well thought out friendly helpful response, and went out of your way to help with no thought towards compensation. You have my highest commendations and kudos- if only every programmer was more like you! Keep up the good work!

    • Thanks for your comments Don. Much appreciated.

      Re ‘touch’…
      If you have any suggestions I’d be glad to hear them?
      I have thought about touch (albeit very briefly!). Unfortunately I do not have access to a suitable touch device (iphone, ipad, etc) to try things out on. However, I am inclined towards the view that jqDock is more suited for a desktop environment than a touch device: it’s more of an attention-getter while you’re ‘waving the mouse cursor around the screen’, whereas I think touch usage is more likely to be “tap the icon/image because I want to go there or do that”.
      Of course, I could easily be wrong! And having given it a bit more thought, I can imagine that there might be situations where a ‘tap-and-hold’ touch might be required to expand the underlying image without performing an action. But given the html5 capabilities of most modern touch devices, I suspect that it might be more easily accomplished using css rather than having to rely on javascript?
      Again, I’d be glad of any feedback…

      • I second Don’s compliments :-)

        I’d also like to weight in regarding touch capability :-)

        I think that jqDock is a perfect tool for mobile design because it allows you to have more functionality or information without requiring more screen space. I also think it would be incredibly useful because it would allow sites which have implemented jqDock but which don’t have separate mobile interfaces to still be accessible on mobile devices, and taps into the growing trend of designing sites to be accessible on multiple devices.

  15. Thank you for your plugin! It works fine….on my local host though. It’s not showing up on my online website, it should be in the footer of the page. I’m using drupal 7 which jquery standard version is 1.4. The slider on the frontpage needs a higher version which is inserted through the drupal system. To prevent conflicts I’m using noConflict() in the script. The way it is now lets the cookie script and the slider script work fine but apparently this is not a solution for your dock that should be in the footer. Do you have any clue about why it is showing up on my local pc but not on the online server?

    Thanks again,

    Karin

    • Hi Karin
      Your live site is looking for jqdock (minified script) in /sites/all/themes/roderag/libraries/ … and not finding it!
      The solution would therefore appear to be, either

        upload the required jqdock script file to where Drupal is looking for it, or
        change where Drupal is looking for it to where it actually is
      • Thank you for your quick response wizzud! (was a couple of weeks on vacation so this reply took a while) The script was there but wasn’t found due to a small typo (small d where a capital D was required in the scriptname). I know better than to make such mistakes but every now and then tiny ones like this slip through and it can take losts of time to find out!

        Thank you again,

        Karin

  16. Thank you for creating an amazing plugin :-D

    I’m having a bit of trouble with positioning the dock with more than 5-6 icons. When the number of images increases, the horizontal dock isn’t centered, and I’m running into some layout and usability issues when modifying the positioning. Is there a better approach than what I’ve taken?

    I’m also trying to create permanent labels underneath the images. Is there a way to set the Label Position when using Permanent labels? If not, can you tell me how to extend the background so that the page doesn’t show through between the labels? Also, do you have any other recommendations for creating a smoother experience with this work around?

    /* The layout of my existing page margins */ 
    .page_size { padding: 10px 45px 0px 45px; font-family: Verdana,Arial,sans-serif; width: 740px;} 
     
    #page {position: absolute; left:-75px; padding:0;margin:0; width: 740px; }
     
    #menu {position:absolute; top:0px; left:0; width:100%; visibility:hidden; }
     
    /*...center the dock...*/
    #menu div.jqDockWrap {margin:0 auto;}
    /*...set the cursor, and give the dock a background and partial border...*/
    #menu img {cursor:pointer; }
    #menu div.jqDock {background-color:#ffffff; border:2px solid #cccccc; border-top:0 none; }
    /*label styling...*/
    div.jqDockLabel {font-size:10px; font-weight:bold; white-space:nowrap; text-align: center; color:#000000; cursor:pointer; margin:0px 1px;   
                     bottom:-70%; left:0; width:100%; height:90%; overflow:hidden;}
       
    /*silhouette (of the dock) styling...*/
    #jdock_opener {cursor:default;}
     
    .myLabel {position:relative;}
    .myLabel h4 {font-size:1em; line-height:1.25em; font-weight:bold; margin:1.5em 1px 0 1px; text-align:center;text-decoration:none; background-color: #ffffff;width: 100% }
     
    a:hover .myLabel h4 {font-size:1.1em; margin:3.6em 1px 0 1px;background-color: #ffffff;width: 100%}
      
    /* The layout of my existing page margins */ 
    .page_size { padding: 10px 45px 0px 45px; font-family: Verdana,Arial,sans-serif; width: 740px;} 
    
    #page {position: absolute; left:-75px; padding:0;margin:0; width: 740px; }
    
    #menu {position:absolute; top:0px; left:0; width:100%; visibility:hidden; }
    
    /*...center the dock...*/
    #menu div.jqDockWrap {margin:0 auto;}
    /*...set the cursor, and give the dock a background and partial border...*/
    #menu img {cursor:pointer; }
    #menu div.jqDock {background-color:#ffffff; border:2px solid #cccccc; border-top:0 none; }
    /*label styling...*/
    div.jqDockLabel {font-size:10px; font-weight:bold; white-space:nowrap; text-align: center; color:#000000; cursor:pointer; margin:0px 1px;   
                     bottom:-70%; left:0; width:100%; height:90%; overflow:hidden;}
       
    /*silhouette (of the dock) styling...*/
    #jdock_opener {cursor:default;}
    
    .myLabel {position:relative;}
    .myLabel h4 {font-size:1em; line-height:1.25em; font-weight:bold; margin:1.5em 1px 0 1px; text-align:center;text-decoration:none; background-color: #ffffff;width: 100% }
    
    a:hover .myLabel h4 {font-size:1.1em; margin:3.6em 1px 0 1px;background-color: #ffffff;width: 100%}
      
      <a></a> 
      <a></a>   
      <a></a>  
      <a></a>  
      <a></a>
      <a></a>
      <a></a>  
      <a></a>  
      <a></a>  
      <a></a>
      <a></a> 
      <a></a>   
      <a></a>  
      <a></a>  
      <a></a>
      <a></a>
      <a></a>  
      <a></a>  
      <a></a>  
      <a></a>
     jQuery(document).ready(function($){
        // set up a handler for the docksleep event...
      var evDockSleep = function(ev){ 
            var menu = $(this)
              , top = -1 * menu.height();
            if(ev){        
              menu.animate({top:top, opacity:0}, 800);
            }else{ 
              menu.css({top:top, opacity:0, visibility:'visible'});
            }
            //bind a one-off mousemove event to the silhouette child...
            $('#jdock_opener').one('mousemove', function(){        
                menu.trigger('docknudge');
                return false;
              });
          }  
        , evDockWake = function(){ 
            $(this).stop().animate(
                {opacity:1, top:0}
              , 800
              , function(){ $(this).css({filter:''}); }
              );
          } 
        , onDockReady = function(){ 
            var dock = $(this).bind('dockwake', evDockWake)
              .bind('docksleep', evDockSleep).find('.jqDock');
            //set silhouette child's width & height from the dock, and show parent...
            $('#jdock_opener').css({width:dock.width(), height:dock.height()})
              .parent().show();
            evDockSleep.call(this);       
            return false;       
          }  
        , dockOptions =
          { align: 'middle' 
          , idle: 10000 
          , onReady: onDockReady // handler declared above  
      , size: 60 
      , sizeMax: 200  
      , setLabel: function(t, i, el){         
              // I modified this  function because I'm not including any additional content       
              $('' + t + '')
                .appendTo($(el).show());
              return false;
              }
          };
      // ...and apply...
      $('#menu').jqDock(dockOptions);
    });
     jQuery(document).ready(function($){
        // set up a handler for the docksleep event...
      var evDockSleep = function(ev){ 
            var menu = $(this)
              , top = -1 * menu.height();
            if(ev){        
              menu.animate({top:top, opacity:0}, 800);
            }else{ 
              menu.css({top:top, opacity:0, visibility:'visible'});
            }
            //bind a one-off mousemove event to the silhouette child...
            $('#jdock_opener').one('mousemove', function(){        
                menu.trigger('docknudge');
                return false;
              });
          }  
        , evDockWake = function(){ 
            $(this).stop().animate(
                {opacity:1, top:0}
              , 800
              , function(){ $(this).css({filter:''}); }
              );
          } 
        , onDockReady = function(){ 
            var dock = $(this).bind('dockwake', evDockWake)
              .bind('docksleep', evDockSleep).find('.jqDock');
            //set silhouette child's width & height from the dock, and show parent...
            $('#jdock_opener').css({width:dock.width(), height:dock.height()})
              .parent().show();
            evDockSleep.call(this);       
            return false;       
          }  
        , dockOptions =
          { align: 'middle' 
          , idle: 10000 
          , onReady: onDockReady // handler declared above  
      , size: 60 
      , sizeMax: 200  
      , setLabel: function(t, i, el){         
              // I modified this  function because I'm not including any additional content       
              $('' + t + '')
                .appendTo($(el).show());
              return false;
              }
          };
      // ...and apply...
      $('#menu').jqDock(dockOptions);
    });
    • My apologies for not using the < code lang="" > attributes properly :-(

      • No problem, but I’m guessing there might be some HTML missing? Would yould mind posting the HTML again please? Since you have blocks of code, try using the < pre lang='html' >…< /pre > tag around it (instead of the code tag, which is really intended for inline code examples). Alternative values for lang are ‘css’ (for styles) and ‘js’ (for javascript).

        Actually, can you also check that what the comment is showing in the javascript setLabel function is accurate? Specifically, the 2 empty strings concated around t … I’m guessing there should be some html in those string?

        • You’re absolutely right :D I included the script in the < pre lang='html' >…< /pre > tags, so hopefully that will remain visible this time :-)

          Edit by Wizzud :
          To save some space, I’ve removed the code inserted here because – as has already been noted – it was no different to that included in the previous post. The Comments filter only allows certain tags through (understandably), even when surrounded with PRE or CODE tags. (And that includes recognisable HTML within javascript).

    • Chaya.
      This is going to be a bit difficult to solve in one pass because I don’t know exactly what you’re trying to achieve as the end effect, and I don’t have enough information to provide a definitive answer. However, let’s see if can’t confuse you further …

      Let’s take the number of icons first …
      You have 10 images, and 740px available space to fit them into. And you have set dock options of size:60 and maxSize:200, which, for a horizontal dock, are height constraints. First problem is that I have no information about the actual dimensions of those images so I can’t tell if they are likely to fit into a single row or not. If they are square, then ‘at rest’ they’ll take up 600px; if they are landscape then they’ll take up more space, portrait less. If we assume they’re square, then you’ve got 140px left for expansion. As you’re constraining maxSize to 200 then it’s a good bet that their actual height is not going to be less than that (otherwise why bother with the constraint). So, a single fully-expanded (square) image is going to be 200px wide, which is an extra 140px over the 600px already taken, which is the entirety of your available space. But since its neighbours are also likely to expand to some extent, the dock size is going to excede the 740px available to it, and at that point it will distort.
      But, as I’ve said, I don’t know the actual dimensions of your images so this may or may not be the case.

      Permanent labels …
      You’ve taken my first permanent labels example as a base, but I’m not sure that you want to use the labels in the same way that that example does? The example effectively uses the label text as the content of the menu items. However, because all your images are different I suspect that you merely want the labels to be permanently visible, and hanging just off the bottom of their related image?
      The first thing to do is change the div.jqDockLabel styling to position the label where you want it in relation to the image, which is presumably going to be bottom:0;, or top:100%;, or something close (div.jqDockLabel gets position:absolute; as an inline style). If you want to apply display styling (fonts, colours, etc) you can; if you want to apply constraint styling (width, overflow, etc) you can. But I would advise against constraining/setting height on this element : let its content – which is set by your setLabel option – determine height.
      Your setLabel function is appending div.myLabel – containing an h4 – to each div.jqDockLabel, and returning false. This is fine, and makes the label permanently visible. However, I would advise against using margins (the h4 in this case) unless you are absolutely certain where they’re going to collapse to, especially when you are applying background colour to the same element. It is generally safer and more predictable to pad the parent element if necessary (div.myLabel), and put background on that.
      Also, you have an added complication in that you have a :hover style set for the h4 that modifies font-size and (more importantly) margins, which means that the h4 will ‘jump around’ when its related image is moused over/out. Now there’s nothing wrong with having a :hover condition set, but you should ensure that the styling differences between on and off :hover don’t affect the position of the text, merely its presentation. I think that would solve your “smoother experience” issue.

      Hmmm, what else?
      Well, you’re positioning div#page 75px off to the left of its container, div.page_size, but I assume there’s a good reason for that.
      Also, you have incorporated my example code for having the dock initially hidden out of sight, and sliding it back in when another element (div#jqdock_opener) is hovered over : you need to be careful here because with the labels suspended off the bottom of the images and permanently visible, you are effectively increasing the height of the dock by the height of those labels. So you need to ensure that the dock is moved far enough to completely remove it from view (including the labels). However, I’m not sure that you actually even want that functionality, given that you don’t really have sufficient styling in place to make it work properly?

      I’ve had to be fairly general here, but if you can provide a few more details, and would still like my help, it might be easier to Contact Me and continue this conversation via email rather than using these Comments? (And an accessible web page, or fully functional Fiddle, would be useful?)

  17. Hi,

    I noticed that one of the examples that uses the submenu actually disables the href links… It keeps the links, but the click event is intercepted and the links no longer work.

    By removing the following lines it worked again.

    .find(‘a’).click(function(){
    $(this).toggleClass(‘clicked’);
    this.blur();
    return false;
    })

    Great plugin by the way!

    • Thank you, I’m glad you like jqDock!

      With regard to all my examples, I have tried to stress that they are literally what they say they are : examples!

      For my purposes, ie. as examples, there is seldom anywhere useful for any link to navigate to, and in fact any navigation away from the example would actually be detrimental to the visitor looking at it. Therefore nearly all my examples have some sort of click handler, usually just to provide some sort of visual feedback to acknowledge the click. The particular one you mention – submenus – is one of the few that have the click handler embedded in the example code (most use a handler in the included example.js file), though I have included plenty of comments in an effort to explain what the code is doing. I’m sorry if this causes anyone any problems, but that’s the nature of examples.

  18. jqDock worked like a charm in WordPress for me.. except in (surprise surprise) Internet Explorer. Turned out it was the comments tag that was breaking the site – the one in the code which I pasted into header.php:

    I learn’t something about IE and comments tags..

    Thanks for a great tool, Wizzud √
    much appreciated

  19. jqDock worked like a charm in WordPress for me.. except in (surprise surprise) Internet Explorer. Turned out it was the comments tag that was breaking the site – the one in the code which I pasted into header.php:
    ``

    I learn’t something about IE and comments tags..

    Thanks for a great tool, Wizzud √
    much appreciated

    ps. reposted with code in backticks

  20. Apologies, Wizzud.. the code I’m trying to include is the tag !– JQDOCK –!

  21. Hello. I’m working on the widget that displays a category of my eCommerce plugin wordpress. I have to display thumbnails of the categories, how can i add option display terms/taxonomy by name to the jqDock?
    eComerce uses post types, as well as tags and categories, i know that function i need to use is the_terms( $id, $taxonomy, $before, $sep, $after ); but i doesn’t know if i may change your original files, js and php, and i doesn’t know how to do that without re-editing your plugin on wordpress.
    Thank you for your help for advice.
    Your plugin is awesome, really great job.

    • I’m sorry but I didn’t write the jqDock Post Thumbs plugin for WordPress – that accolade goes to Shaun Scovil. Yes, his plugin uses my jqDock code, but the WordPress side – ie. the actual construction of the html, and deciding what images to pick up from where – is all his. However, it is a WP plugin and you are perfectly free to edit and modify whatever code (php or javascript) you need to in order to get it to work how you need it to. Just remember not to automatically update it if he releases a new version!

  22. The jqdock plugin indicates “Requires jQuery v1.7+”, and my site is running 1.8.3, so I guess I discovered a bug with jqDock (latest version of jquery appears OK). It seems in IE7/IE8, for the version of jquery running in my site now, setting the css property “backgroundColor” to transparent will result in a white background — I’m getting white background color for the wrapper divs around the images. For my fix, in jquery.jqdock.js (v2.0.2) I replaced line 970 as follows:

    BEFORE:
    vanillaClone = vanillaDiv.clone().css({margin:0, border:’0 none’, backgroundColor:’transparent’}),

    AFTER:
    vanillaClone = vanillaDiv.clone().css({margin:0, border:’0 none’}),

    perhaps this helps a few folks I saw asking similar questions on stackoverflow:

    http://stackoverflow.com/questions/14159573/jqdock-and-png-images-with-transparent-background

    • Thanks Jesse.
      Would you mind doing me a favour and trying this modified example in your IE7/8 browsers please? – jigsaw183. The only thing I have changed is that jQuery is fixed to v1.8.3 (instead of using ‘latest’), so it is still using jqdock v2.0.2. The images are transparent png’s (so that the jigsaw effect works), and the page has dark background.
      If you get any difference between IE7/8 and any other more modern browser (IE9/10, FF, Chrome, etc) could you grab a screenshot for me? I use IE10, but if I knock it back down to IE7/8 browser mode (using developer tools) I can’t see any difference.

      • Hi Wizzud,

        You’re correct, just changing the jquery version turned out not to be enough
        as your example demonstrates. Instead, it looks like I was experiencing the issue described here, related to jquery-ui:

        http://bugs.jqueryui.com/ticket/8914

        I made a little demo locally that has nothing but your dock, jquery 1.8.3, and jquery-ui 1.9.2 (http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js)

        So I guess this is a bug with an older version of another framework, not the jqDock itself.

        • Good! I realise it probably doesn’t help your particular problem very much, but I’m glad it’s not jqdock’s fault!
          Thank you for the testing.

          • Thanks for creating this awesome plugin.

            As far as my particular problem, I just figure I’ll remove the backgroundColor: “transparent” in my version of your plugin (as I’m not about to upgrade jquery-ui on this particular site). Is there any reason this plain-vanilla-div wrapper needs to have the background color set to transparent? It seems like that’s the browser’s default anyway, no?

            Otherwise maybe background: “none” could work? I suppose I could give that a shot too…

          • Try this? …
            .jqDockItem, .jqDockItem>div {background-color:transparent !important;}

  23. I want on click menu show div ..in this way diferanrt diferanrt div show hide..any idea???

    • Apply a click handler to your images – or their parent anchor if they have one – that determines which menu item was clicked and shows the relevant DIV while hiding any DIV which was previously shown as a result of clicking on a different menu item. This is straightforward jQuery stuff.

  24. I have used it in my personal webpage http://beautydishphotography.com/. It is working perfectly fine in local, however when I upload it to the server it stops working. Any idea?

    • Figured out it works when I use jquery.jqdock.js. What could be the possible reason?

      • @Jay
        I’m sorry but I’m a bit confused. Initially you seem to have a problem with running jqdock on a web host, when it works locally. Then you seem to have resolved the web host problem by using jquery.jqdock.js … but instead of what? What is the difference between what you were running locally and what you are now running on the web host?

        • Sorry for the late reply Wizzud. The ‘jquery.jqDock.min.js’ works perfectly fine in local and doesnt work from the server. When I changed the ‘jquery.jqDock.min.js’ to ‘jquery.jqdock.js’ it is running perfectly fine from the web host as well as local. I am using jquery 1.8.3. Please let me know if you need more information.

  25. How could I be so bad the file was there, got little file naming problem. However ‘index_judock.html’ is running fine in Chrome and FF, couldn’t check it in IE9 (don’t have that at my work place).

  26. Thanks for a great tool! Would it be possible to use %-values to make the plugin work in a responsive layout?

    • Apologies for the delayed response.
      My immediate knee-jerk reaction would be to say, No … because jqdock works by controlling the dimensions of the innermost elements – the images – and adjusts dimensions of outer (container) elements accordingly; percentages work in the opposite direction, in that the dimensions of inner elements are dependent on the dimensions of ancestor (outer) elements and at some point or other jqdock would lose control of the dimensions (to whatever element, or ancestor thereof, that jqdock is placed in).
      However, I can see that jqdock is currently totally un-responsive (Is that right, or should it be non-responsive? Or maybe even anti-responsive? Anyway …)
      Basically, I can see that I’m going to have to think (quite hard) about this, so I’m sorry but I can’t give you a definitive answer at present.

      • Thanks for the reply.
        I would think it’s not impossible to make jqDock responsive. The containing element (“jqDockWrap”) can get the “max-width”-value. Now comes the hard part (that should be computed automatically by a javascript function) – converting all values from pixels to %-values based on the max-width of the container element (e.g.: an image with a width of 30px in a jqDockWrap of max-width 340px would have a width of 30/340*100 = 8.824%). The jQuery animations can be run in percentages.

      • I, too, wonder how to make the dock responsive. I have it working and it looks great…until you try to view it on a mobile device.

        Has anyone figured out a way to fix this? If so, would you please share?

        Thanks! :)

  27. i am a student. i included dock menu in my web development project .
    After include dock menu jquery files. my datepicker jquery not woking properly(do not display calender when i click a textbox ).what i do?. Somebody help me….

    • Do you have a web-accessible page that demonstrates the problem, so that I can take a look?
      One thing to check : you have mentioned including the jqdock files, ie. implying more than one. There is only one jqdock file – either the minified or unminified version – so if implementing jqdock is requiring you to include more than one file (you should already have jQuery included if you are using datepicker, so that doesn’t count) then that might be your problem.

  28. I have created a simple web page and testing the functionality before I populate it with content. The main menu is jdock. It works fine on the local machine but does not work on line. The menu just does not appear.

    for a sample go to gregory.info/index2.html

    • Hi Jeff
      I assume that you have managed to fix whatever your problem was, because I can’t see anything wrong with the menu on that index2.html page that you provided? The menu appears exactly as expected.

      PS. I notice that you are using an un-minified and modified version of jqdock (you’ve set the inactivity default to 750). If that is the only change you’ve made to the source code, you could simply have set that as an option on initialisation of the dock. You would then have the option of using the minified version of jqdock (which is way smaller than the un-minified version) once you have completed any testing?

  29. how to use of Jqdock. This is installer or javascript code……

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">