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%;"> <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!
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
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!
Rubzy
Can i use this with an object? [i have used some swf as obects in ASP.net] need helP!
aGuy
The example snippet’s function name should be resizeOnApproach, not expandOnApproach, I think.
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
Alex Taylor
If you are new to jquery, I suggest you start here:
http://docs.jquery.com/Tutorials
It will point you in the right direction
Mark Kumar
dude… thank you so much for this plugin… I will be using it alot… you are the best dude…
Tom Raines
Maybe I did something wrong, I’m having a tough time getting this dock to work.
Alex Taylor
What’s your problem?
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.
Alex Taylor
Thanks for that. Just out of interest, which browser did this.height, etc. not work for?
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);
Alex Taylor
Sorry – what you need to do is something like this:
$(‘.imgToAffect’).resizeOnApproach({elementDefault:50,elementClosest :55});
Bcknsty
Ah thnx
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
Alex Taylor
Help yourself – It’s pretty much just trig anyway 😉
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.
Thomas
I am trying to build here: [link removed] 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….
Thomas
Thank you so much, dumb mistake, sorry for that. this is a very cool
Niraj
Hello
I used your code in my HTML but it’s not working so please give me solutions for that.
Thanks
Niraj
Alex Taylor
Can you please explain you problem?
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.
Alex Taylor
I will at some point… Am a little busy at the moment, but I’ll do it some point soon 😉
steven Jones
What about aligning things vertically instead of horizontally. Is that possible for this plugin?
Alex Taylor
There’s no problems doing that at all, just change the css.
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.
AA
Is it possible to use this with css background images?
If so – how would you use jquery to target them?
Alex Taylor
As the script stands, it will not work with css background images – resizing background images is a bit of a pain!
AA
I haven’t tried it yet, but could something like this work without being painful or is there something I haven’t considered.
Alex Taylor
It should do….
Howard
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
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
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
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
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
Please may i know
How to increase default icon size