[damian115]

Hi everyone I saw a jQuery dock similar to the one on OS X, and was wondering if I would be able to remove the property of it that magnifies the area that the users mouse hovers over.

The dock that I am talking about is : http://d2o0t5hpnwv4c...l-examples.html

Let me know if you need the code for it.

Thanks

[Kruithne]

Hello damian115,

I think you'll find the entire point of that jQuery plug-in is the zoom functionality of the icons, removing it would render the plug-in useless. What you are after would simply be a static DIV with some images inside it that link to pages. In regards to the text showing above the icons when you hover, that's not difficult either, take a look at the quick snippet below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<style type="text/css">
	.myBar
	{
		padding: 30px;
	}
	
	.myBarItem
	{
		display: inline;
		width: 32px;
		position: relative;
	}
	
	.myBarTooltip
	{
		position: absolute;
		top: -35px;
		display: none;
	}
</style>

<script type="text/javascript">
	$(document).ready(function()
	{
		$(document).on('mouseenter', '.myBarItem', function()
		{
			$(this).children('.myBarTooltip').show();
		});
		
		$(document).on('mouseleave', '.myBarItem', function()
		{
			$(this).children('.myBarTooltip').hide();
		});
	});
</script>

<div class="myBar">
	<div class="myBarItem">
		<div class="myBarTooltip">Test</div>
		<img src="http://placekitten.com/32/32"/>
	</div>
	<div class="myBarItem">
		<div class="myBarTooltip">Test</div>
		<img src="http://placekitten.com/32/32"/>
	</div>
	<div class="myBarItem">
		<div class="myBarTooltip">Test</div>
		<img src="http://placekitten.com/32/32"/>
	</div>
</div>

That is obviously a very rough example to show how easy it is to achieve that, there are a few things missing and is supposed to be a reference not something you should copy & paste into your application and expect to function.