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 type="text/javascript">
        <!--
        $(document).ready(function(){
        $('.mac-dock img').resizeOnApproach();
        });
        -->
    </script>
    <div style="position:relative;height:130px;border:solid;">
        <div class="mac-dock"
			style="text-align:center;
                        position:absolute;
			bottom:30px;width:100%;">
                        <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>
    </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!


If you liked this article you might like to read the follow-up article, Nice link colour fades using jQuery.

About Alex Taylor

Roslin Design specialises in web design in Edinburgh. We offer competitively priced website design, and website hosting services. Roslin also provides web management services.
This entry was posted in jQuery and tagged , , , , , .
Bookmark the permalink.

36 Comments

  1. Dennis Foley

    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

  2. Alex Taylor

    It will sort of work with tags other than the img tag…

    At the moment I only change the width of the selected object rather than both the width and height. This will cause an image to scale as they do in the demo, but will cause a div for example just to stretch sideways, which gives an “interesting” effect.

    The code could however be quite easily modified to work for other objects. If the object is square, simply the height of the object at the point in the code as the width is set. I actually started implementing this, but stopped because I didn’t need it myself.

    If the object is a rectangle, it is a bit more tricky. In this case the scaling factor for both sides would have to be calculated.

    If people are interested I could look at doing this in the future – let me know if you want this feature!

  3. Rubzy

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

  4. Herman van der Maas

    Nice plugin! I wrote an Apple Dock jQuery script too, with slightly different functionality. My menu slides into the screen on mouseover.
    See the demo (the little menu attached to the bottom of the browser) at http://www.waywayway.nl/bin/. And the steps for using it on your website at http://www.waywayway.nl/bin/handig-en-leuk/tutorials/apple-dock-osx-menu-with-jquery/.

  5. aGuy

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

  6. Daniel

    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

  7. Mark Kumar

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

  8. Tom Raines

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

  9. psyafter

    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.

  10. Bcknsty

    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);

  11. Bruno

    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

  12. Thomas

    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!

    • Alex Taylor

      It should work fine on HTML5. Do you have a demo page you are having trouble with? I’d be happy to have a quick look.

  13. Thomas

    I am trying to build here: http://thecollegetailgaters.com/html5/ Any help you could provide would be appreciated

    • Alex Taylor

      Looks like you are referencing the $ variable before you have declared it. I suggest moving the jQuery reference to above the code that loads the dock, or vice versa….

  14. Niraj

    Hello

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

  15. Mathias

    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.

    • Alex Taylor

      Yes – looking for the mousemove on a document level is inefficient – what you are suggesting is much better in practise – the main reason I didn’t talk about it in the demo was that it was easier not to! I might look at making the overall plugin more efficient if there is a request for it….

      • Mathias

        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.

  16. steven Jones

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

  17. danielhonrade

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

    • Alex Taylor

      Hi,

      At the moment I haven’t really attached a license to it. I’m happy for it to be used under the GPL however, and I will make the terms and conditions clearer in a update very soon. If you can give us attribution for the code as well it would be appreciated.

  18. AA

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

Leave a Reply

Your email address will not be published. Required fields are marked *

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