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