1 Replies - 1193 Views - Last Post: 02 November 2012 - 03:14 AM

#1 damian115  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 05-September 12

Modifying a jQuery Dock

Posted 05 September 2012 - 03:31 PM

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

Is This A Good Question/Topic? 0
  • +

Replies To: Modifying a jQuery Dock

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Modifying a jQuery Dock

Posted 02 November 2012 - 03:14 AM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1