Blog

Home > Javascript  > Create a Apple OSX style dock with jQuery using the Resize on Approach plugin

Sometimes it’s the little things that make the difference in user interfaces. A seemingly minor change can have a massive effect on the look and feel.

It is easy in jQuery to make an object expand in size on hover: simply attach an animate effect to a hover event. However, this doesn’t result in a nice effect. The hover feels clunky awkward. Instead I wanted the icons to expand to meet the mouse as I moved towards it, giving a nice smooth effect.

So I did the obvious thing and wrote a plugin!

This plugin measures the distance between the mouse pointer and the expanding element. If the mouse is closer to the image than a certain trigger distance, the image will expand by an amount related to the distance between the mouse and the element, creating a nice expanding effect.

When working on one image, this plugin is not very impressive, but when applied to multiple images, the effect really shines. Here for example I have used the plugin to create a apple OSX style dock bar.

To get the elements to align with the bottom, I have put all the images in a div that is absolutely positioned using the bottom attribute.

Download

Version 1.0 (released 21/05/10) Β  Β jquery.resizeOnApproach.1.0.zip

Using the Plugin

To use the plugin use the following code

$('.imgToAffect').resizeOnApproach(settings);

where settings is a map of the following properties

  • elementDefault (default 35) : the default size to set the element the effect is applied to.
  • elementClosest (default 55) : the maximum size the element will expand to.
  • triggerDistance: (default 200) : the distance from the mouse at which the image will start to resize.

Here is the code I used to create the apple style dock bar

<script>// <![CDATA[
$(document).ready(function(){
        $('.mac-dock img').resizeOnApproach();
        });
// ]]></script>
<div style="position: relative; height: 130px; border: solid;">
<div class="mac-dock"></div>
style="text-align:center;
position:absolute;
bottom:30px;width:100%;"&gt;
<img src="icon1.png" alt="" />
<img src="icon2.png" alt="" />
<img src="icon3.png" alt="" />
<img src="icon4.png" alt="" />
<img src="icon5.png" alt="" />
<img src="icon6.png" alt="" /></div>

If you want any more help using this plugin, please let me know and I’ll do my best to help – and any more requests for plugins, please let me know!

41 Comments

  • Dennis Foley

    Reply
    June 10, 2010at1:07 pm

    Just curious if the routine only works with the img tag or any others, i was trying to use a asp:imagebutton so i can use my existing code for my menu choices

  • Rubzy

    Reply
    September 5, 2010at6:43 am

    Can i use this with an object? [i have used some swf as obects in ASP.net] need helP!

  • aGuy

    Reply
    September 12, 2010at1:50 pm

    The example snippet’s function name should be resizeOnApproach, not expandOnApproach, I think.

  • Daniel

    Reply
    September 17, 2010at8:29 am

    Hi
    Im completely new to web design and im trying to make my own site to sell some tshirts. I cant quite figure out how to enable the plugin. I can grasp the bar creation but im just not sure how to reference the jquery engine ?
    Would appreciate any help you could give

    Daniel

  • January 28, 2011at5:26 pm

    dude… thank you so much for this plugin… I will be using it alot… you are the best dude…

  • Tom Raines

    Reply
    March 16, 2011at2:11 am

    Maybe I did something wrong, I’m having a tough time getting this dock to work.

  • psyafter

    Reply
    March 22, 2011at5:47 pm

    very cool plugin.
    there is a small issue..
    when you do calculations you use this.height and this.width and it’s not work for me.
    I was changed the plugin (replaced it with $(this).width() and $(this).height() and it’s work perfect.

    thanks for this amazing plugin.

  • Bcknsty

    Reply
    April 26, 2011at3:15 pm

    I just started learning JQuery and what do you mean with put it in a map ? Copy/paste it in a js file and put in a map called maceffect so that the code will look like this ?

    $(‘.imgToAffect’).resizeOnApproach(maceffect);

      • Bcknsty

        Reply
        April 29, 2011at12:44 pm

        Ah thnx

  • Bruno

    Reply
    May 16, 2011at1:45 pm

    Hi Alex, first of all, awesome work. I wanted to ask you if i may use part of your distToSqEdge function for a plugin im working on? Kind regards, Bruno

  • Thomas

    Reply
    June 22, 2011at3:33 am

    Are any changes need to run on html5? I removed the “type=text/javascript” think this is why it would not work for me. I downloaded the the js min file and linked it correctly because I can view the file in firebug. I am using the exact code from the top minus the one line change previously stated. Where did I go wrong? I would appreciate any help as I really like this effect and would like to use it. Thanks for any help!

  • Thomas

    Reply
    June 22, 2011at6:08 pm

    I am trying to build here: [link removed] Any help you could provide would be appreciated

      • Thomas

        Reply
        June 22, 2011at8:31 pm

        Thank you so much, dumb mistake, sorry for that. this is a very cool

  • Niraj

    Reply
    August 29, 2011at2:13 pm

    Hello

    I used your code in my HTML but it’s not working so please give me solutions for that.

    Thanks
    Niraj

  • Mathias

    Reply
    August 30, 2011at5:32 am

    I haven’t done any performance measurements, but on my slow machine resizeOnApproach seems quite slow. This might be due to that it registers for the mousemove event at the document level…
    So I modified it to accept a ‘sensitiveRegion’ param. (This can be anything jQuery does accept as well.)
    Just add ‘sensitiveRegion’: document to config var and replace the line $(document).mousemove(… with $(config.sensitiveRegion).mousemove(….

    Hope it helps somebody.
    Thanks to Alex for providing this nice plugin.

      • Mathias

        Reply
        September 6, 2011at5:10 pm

        Why not include my suggestions and update the demo/docs?
        Another option might be to register the listener at each image’s first ancestor which is a block element.

  • steven Jones

    Reply
    September 6, 2011at11:37 pm

    What about aligning things vertically instead of horizontally. Is that possible for this plugin?

  • danielhonrade

    Reply
    September 22, 2011at8:49 am

    Hi,
    I am creating a drupal navigation module, can I use this as contrib to my module, is this gpl license?

  • AA

    Reply
    March 1, 2012at9:37 am

    Is it possible to use this with css background images?
    If so – how would you use jquery to target them?

      • AA

        Reply
        March 2, 2012at6:30 am

        I haven’t tried it yet, but could something like this work without being painful or is there something I haven’t considered.

  • Howard

    Reply
    March 23, 2012at6:50 pm

    This is an awesome plug-in and I’m using it as a navigation bar within some online classes I post for the school I work for. I have it working perfectly, however I would like to see the alt text of each image fade in and out as you move your mouse over each image and I’m unable to make this happen. My JS skills are limited and would much appreciate someones help.

    Thank you for putting together such a great plug-in.

  • Eng. X

    Reply
    February 21, 2013at5:35 pm

    Hi
    I am trying to embed your code in my website but its not working! here is my code:

    $(document).ready(function(){
    $(‘.navigator li’).resizeOnApproach();
    });

    .navigator {
    display:block;
    list-style-type:none;
    width:800px;
    height:100px;
    background:#6197E9;
    margin:0 auto;
    padding:0;
    }

    .navigator li{
    display:inline-block;
    }
    .next {
    display:block;
    text-decoration:none;
    margin:0 auto;

    width:60px;
    height:20px;
    color:#FEFEFE;
    background:#FF8000;
    }
    .previous {
    display:block;
    text-decoration:none;
    margin:0 auto;

    width:60px;
    height:20px;
    color:#FEFEFE;
    background:#FF8000;
    }




    Please help.
    thanks

  • Eng. X

    Reply
    February 21, 2013at5:39 pm

    ok my code is not corecctly submitted in the post..
    basically i included javascript at header, and put the following code after:

    $(document).ready(function(){
    $(β€˜.navigator li’).resizeOnApproach();
    });

    then i did my css.. its not showing anything in my website.. any suggestions ?

  • Roshan

    Reply
    May 27, 2013at7:49 pm

    Hi, Alex, i’m trying apply your effect one of my friend’s website, implement was fine, but all the images on my container looks way small.they are not in actual size, any idea what’s going wrong.

  • GeorgeP

    Reply
    July 2, 2013at9:17 am

    Alex, thank you very much for this wonderful dock!

    I’m glad I read the comments of the css-dock-menu and found the link to your site.

    About a week ago I installed the css-dock-menu from NDesign Studio AND the latest Fancybox. However, the jquery of that application affected the Fancybox and did not allow it to work. I spent days (and nights) trying to find a solution but in vain.

    I now installed your dock menu, made a few very small changes and it works perfectly well together with Fancybox. I also found out that your menu is a lot faster than NDesign Studio’s and, once more, I wish to express my thanks.

    I can not give you a link at the moment because I implemented it on a test page on my local server but I will come back in the next couple of days with a link for you and others to see how it looks and functions.

    Have a nice day and kind regards from Athens, Greece.

    George

  • Akash

    Reply
    June 24, 2014at1:51 pm

    Please may i know
    How to increase default icon size

Post a Comment