Develop Reference

Jquery drag drop revert to original position and div on double click

I have drag-and-drop items, intended to be dragged from one div and dropped into another div. I capture the original position of each item in hidden fields when they are created.
I want to get the items to go back to the original div and location on dblclick, but they always relocate inside the drop target div.
Any ideas?
<div id="cardPiles">
<div id="D1" class="draggable" ondblclick="rev(this)">1</div>
<div id="D2" class="draggable" ondblclick="rev(this)">2</div>
<div id="D3" class="draggable" ondblclick="rev(this)">3</div>
<div id="D4" class="draggable" ondblclick="rev(this)">4</div>
<div id="D5" class="draggable" ondblclick="rev(this)">5</div>
<div id="D6" class="draggable" ondblclick="rev(this)">6</div>
</div>
function rev(me) {
var b = $(me).text();
var h = $('#H' + b).text();
var s = h.split(',');
var top = s[0];
var left =s[1];
$(me).parent().css({ position: 'relative' }); //tried absolute also
$(me).css({top:top,left:left,position:'absolute' });
}

Here is a possible answer. If it does not fit your use case, edit your post with more details.
Working Example: https://jsfiddle.net/Twisty/u1rd9dpg/6/
HTML
<div id="cardPiles">
<div id="D1" class="draggable ui-widget-content" data-origin="">1</div>
<div id="D2" class="draggable ui-widget-content" data-origin="">2</div>
<div id="D3" class="draggable ui-widget-content" data-origin="">3</div>
<div id="D4" class="draggable ui-widget-content" data-origin="">4</div>
<div id="D5" class="draggable ui-widget-content" data-origin="">5</div>
<div id="D6" class="draggable ui-widget-content" data-origin="">6</div>
</div>
<div id="cardDrop">
</div>
JQuery
function rev(me) {
console.log("DoubleClick Detected.");
var pos = me.data("origin");
console.log("Returning to: ", pos);
var $o = me.clone();
$o.draggable({
cursor: "move",
start: log
});
me.remove();
if ($("#cardPiles div").length == 0) {
$("#cardPiles").append($o);
return true;
}
$("#cardPiles .draggable").each(function(k, v) {
var txt = parseInt($(v).text());
if ($o.data("order") < txt) {
$(v).before($o);
return false;
} else {
$("#cardPiles").append($o);
}
});
}
function log(e, ui) {
var pos = ui.offset;
var $ob = $("#" + ui.helper.attr("id"));
pos.order = parseInt(ui.helper.text());
$ob.attr("data-top", pos.top);
$ob.attr("data-left", pos.left);
$ob.attr("data-order", pos.order);
$ob.attr("data-origin", [pos.top, pos.left, pos.order].join(","));
console.log("DragStart Position: ", pos);
console.log("Logged: " + [$ob.data("top"), $ob.data("left"), $ob.data("order")].join(","));
}
$(function() {
$(".draggable").draggable({
cursor: "move",
start: log
});
$("#cardDrop").on("dblclick", ".dropped", function() {
console.log("Origin found: ", $(this).data("origin"), $(this).data("top"));
rev($(this));
});
$("#cardDrop").droppable({
accept: "#cardPiles div",
activeClass: "ui-state-highlight",
drop: function(e, ui) {
var $drop = ui.draggable.clone();
console.log("Dropped. Origin: ", $drop.data("origin"));
$drop.removeAttr("style");
$drop.addClass("dropped");
$(this).append($drop);
ui.draggable.remove();
var c = $("#cardDrop div").length;
}
}).sortable({
revert: true
});
});
I'm not sure if you need to do this in CSS or not, but I went based on the order and let the CSS just define how they appear in the list.
When the drag starts, I log the origin details to various data attributes. This allows them to be retrieved later when there is an interaction with just that element.
When drop happens, I clone the original and then append the clone. Do not have to do this, yet for me, it helps me identify whats happening. Since it's no longer draggable, you could remove the class, but I just added dropped to be able to more easily catch the Double Click event.
When dblclick fires on our object, I clone it again, and re-append it back. Make it .draggable() again too. I hunt for the next item's number and fit it in underneath.
If the text within is not easy to order like that, I would add an order attribute or populate the data-order attribute. You can do this when it's dragged or read it from the ID... not sure what might work best for you.
You can do this over and over and drag all of them out of #cardPile if you like.

javascript draggable script tracking position

I am following this guide: http://draggabilly.desandro.com/
which I think is hard to understand and I can't seem to figure out what to add to track the positions of the elements I drag around. If you look on the site, you can see the last example where they do it. My example so far is this:
<div id="house_wall1">
<img src="xxx" class="draggie" style="position:relative;">
<img src="xxx" class="draggie" style="position:relative;">
<img src="xxx" class="draggie" style="position:relative;">
<!--Cypyrights and many thanks to http://desandro.mit-license.org for element movements -->
<?php if (login_check($mysqli) == true) : ?>
<p>Welcome <?php echo htmlentities($_SESSION['username']); ?>!</p>
<?php
echo $username;
?>
</div>
<script type="text/javascript" src="draggabilly.pkgd.min.js"></script>
<script>
( function() {
var container = document.querySelector('#house_wall1');
var elems = container.querySelectorAll('.draggie');
for ( var i=0, len = elems.length; i < len; i++ ) {
var elem = elems[i];
new Draggabilly( elem, {
containment: true
});
}
})();
function onDragMove( instance, event, pointer ) {
console.log( 'dragMove on ' + event.type +
pointer.pageX + ', ' + pointer.pageY +
' position at ' + instance.position.x + ', ' + instance.position.y );
}
// bind event listener
draggie.on( 'dragMove', onDragMove );
// un-bind event listener
draggie.off( 'dragMove', onDragMove );
// return true to trigger an event listener just once
draggie.once( 'dragMove', function() {
console.log('Draggabilly did move, just once');
});
This script makes it possible to move the images around but it does not track their positions yet even though I have tried adding it at the bottom of the script as you can see. Does anybody have an idea what can be wrong or whats needed? I'm fairly new at Jquery, Javascript. Many thanks.

Change your code to this, Works fine for me. You just need to use offset() methods to get the position of dragged element when it is getting dragged and position() method to get the co ordinates of the position where it got dropped.
HTML:
//include these files.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src=" http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<div id="container">
<img id="productid_1" src="Lionel Messi New Wallpaper 2012 07.jpg" class="item" alt="" title="" height="100px" width="100px"/>
<img id="productid_2" src="bienvenidos_a_uniformes_deportivos_monterrey_4_216235520.jpg" class="item" alt="" title="" height="100px" width="100px" />
<img id="productid_3" src="lionel-messi-wallpapers-hd.jpg" class="item" alt="" title="" height="100px" width="100px"/>
<?php if (login_check($mysqli) == true) : ?>
<p>Welcome <?php echo htmlentities($_SESSION['username']); ?>!</p>
<?php
echo $username;
?>
</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>
<ul>
<li id="posX"></li>
<li id="posY"></li>
</ul>
</body>
JQUERY:
<script>
$(document).ready(function(){
$(".item").draggable({
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
},
// Find original position of dragged image.
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
});
</script>
EDIT:
$(document).ready(function(){
$(".item").draggable({
containment: '#limit_div',
drag:function(){......
//where #limit_div will be parent div of the #container div.

How to make a hide and show navigation using jQuery/JavaScript?

I wanna make a three-level navigation on my navigation bar, with an array of always displaying starting levels, and two levels show or hide corresponding to the hovering of their parent elements.
I get a little confused since, you must hide the child level element when you move the mouse out of the element, but if you at the same time move to the children elements, you must show the elements which has already been hidden. This is weird, but I've tried a simple solution and it works fine for the 1st level. My solution was like this:
$(parent).mouseover (function() {
$(children).show();
});
$(parent).mouseout (function() {
$(children).hide();
});
$(child).mouseover (function() {
$(this).show();
});
$(child).mouseout (function() {
$(this).hide();
});
It works fine for the 1st level but doesn't work for the 2nd level. For example, the navigation hierachy looks like this:
- Fruit
- Apple
- Fuji
- Huangjin
- Pine
...
- Juice
...
When I move to the Fruit, all the fruits has been shown, and when I move to Apple, all fruits are still shown and the all kinds of apple are shown, but when I move to a specific kind like Fuji, all Fruits and the kinds are hidden.
I don't why.
By the way how to implement such a hide and show navigation bar? It seems that my "solution" hides and shows the children elements when I move to a child item, but it's weird. Are there any better solutions?
I think it may touch some deep issues about browser event.
The html:
<%# page language="java" import="java.util.*, cn.xxxx.customer.center.util.*" pageEncoding="utf-8"%>
<%
//不允许浏览器端或缓存服务器缓存当前页面信息。
response.setHeader( "Pragma", "no-cache" );
response.setDateHeader("Expires", 0);
response.addHeader( "Cache-Control", "no-cache" );//浏览器和缓存服务器都不应该缓存页面信息
response.addHeader( "Cache-Control", "no-store" );//请求和响应的信息都不应该被存储在对方的磁盘系统中；
response.addHeader( "Cache-Control", "must-revalidate" );//于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时；
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String docName = request.getParameter("name");
String docHtmlPath = Constants.docHtmlBase + docName + ".html";
String docStylePath = Constants.docHtmlBase + docName + ".style";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%= basePath %>">
<title><%= docName %></title>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1, keyword2, keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="style.css">
<jsp:include page="<%= docStylePath %>" flush="true" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<!-- <script type="text/javascript" src="jquery-1.10.2.js"></script> -->
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<!-- absolute positioned category&item divs -->
<div id="cate-div1" class="cate-wrapper" nav_div_id="nav-div1">
<div id="cate-item-div1-1" class="cate-item" doc_div_id="doc-div1-1">A</div>
<div id="cate-item-div1-2" class="cate-item" doc_div_id="doc-div1-2">B</div>
<div id="cate-item-div1-3" class="cate-item">C</div>
<div id="cate-item-div1-4" class="cate-item">D</div>
<div id="cate-item-div1-5" class="cate-item">E</div>
<div id="cate-item-div1-6" class="cate-item">F</div>
</div>
<div id="cate-div2" class="cate-wrapper" nav_div_id="nav-div2">
<div id="cate-item-div2-1" class="cate-item">飞机</div>
<div id="cate-item-div2-2" class="cate-item">导弹</div>
<div id="cate-item-div2-3" class="cate-item">舰船</div>
</div>
<div id="doc-div1-1" class="doc-wrapper" cat_item_div_id="cate-item-div1-1">
</div>
<div id="doc-div1-2" class="doc-wrapper" cat_item_div_id="cate-item-div1-2">
</div>
<!-- header -->
<div id="upper-wrapper">
<div id="header-wrapper">
<img id="logo-img" src="files/logo.png" />
<div id="header-text">资料库 </div>
<div id="nav-wrapper">
<img class="nav-bar" src="files/nav-bar.png" />
<a id="nav-div1" class="dropdown-nav-item" cate_div_id="cate-div1">项目</a>
<img class="nav-bar" src="files/nav-bar.png" />
<a id="nav-div2" class="dropdown-nav-item" cate_div_id="cate-div2">武器</a>
<img class="nav-bar" src="files/nav-bar.png" />
</div>
</div>
</div>
<!-- main content -->
<div id="main-wrapper">
<div id="content-wrapper">
<jsp:include page="<%= docHtmlPath %>" flush="true" />
</div>
</div>
</body>
</html>
the js:
jQuery.extend ({
initPage: function () {
$("#header-wrapper").width($("#content-wrapper").innerWidth());
},
calcCateDivHeight: function (divs) {
var h = 0;
for (var i = 0; i < divs.length; i ++) {
$(divs[i]).attr("accumHeight", h);
$(divs[i]).attr("seq", i);
h += divs[i].height;
}
}
});
$(document).ready (function () {
$.initPage();
$.calcCateDivHeight($("div#cate-div1 .cate-item"));
$.calcCateDivHeight($("div#cate-div2 .cate-item"));
$(window).resize (function () {
$.initPage();
});
$(".dropdown-nav-item").mouseover (function () {
// update the nav item background
$(this).css("background-color", "#2a2a2a");
// display the corresponding category div
var pos = $(this).offset();
pos.top += $(this).outerHeight();
var cate_div = $("#" + $(this).attr("cate_div_id"));
cate_div.css("left", pos.left);
cate_div.css("top", pos.top);
cate_div.attr("leftPos", pos.left);
cate_div.attr("topPos", pos.top);
cate_div.show("slow");
});
$(".dropdown-nav-item").mouseout (function () {
// update the nav item background
$(this).css("background-color", "inherit");
// hide the corresponding category div
var cate_div = $("#" + $(this).attr("cate_div_id"));
cate_div.hide();
});
$(".cate-wrapper").mouseover (function () {
$(this).show();
// update the nav item background
var nav_div = $("#" + $(this).attr("nav_div_id"));
$(nav_div).css("background-color", "#2a2a2a");
});
$(".cate-wrapper").mouseout (function () {
$(this).hide();
// update the nav item background
var nav_div = $("#" + $(this).attr("nav_div_id"));
$(nav_div).css("background-color", "inherit");
});
$(".cate-item").mouseover (function () {
// update the cate item background
$(this).css("background-color", "#080808");
var left = Number($(this).parent().attr("leftPos"));
left += $(this).parent().outerWidth();
var top = Number($(this).parent().attr("topPos"));
//top += $(this)[0].accumHeight;
top += 37 * $(this).attr("seq");
var doc_div = $("#" + $(this).attr("doc_div_id"));
doc_div.css("left", left);
doc_div.css("top", top);
doc_div.show();
});
$(".cate-item").mouseout (function () {
// update the cate item background
$(this).css("background-color", "inherit");
// hide the corresponding doc div
var doc_div = $("#" + $(this).attr("doc_div_id"));
doc_div.hide();
});
$(".doc-wrapper").mouseover (function () {
$(this).show();
// update the nav item background
var cat_item_div = $("#" + $(this).attr("cat_item_div_id"));
$(cat_item_div).css("background-color", "#080808");
// display the corresponding cat div
$(cat_item_div).parent().show();
// update the nav item background
var nav_div = $("#" + $(cat_item_div).parent().attr("nav_div_id"));
$(nav_div).css("background-color", "#2a2a2a");
});
$(".doc-wrapper").mouseout (function () {
$(this).hide();
// update the nav item background
var cat_item_div = $("#" + $(this).attr("cat_item_div_id"));
$(cat_item_div).css("background-color", "inherit");
// hide the corresponding cat div
$(cat_item_div).parent().hide();
// update the nav item background
var nav_div = $("#" + $(cat_item_div).parent().attr("nav_div_id"));
$(nav_div).css("background-color", "inherit");
});
});
Solved
The problem occurs not in the .html or .js file, but the .css file. I set a 1px border on the wrapper and that separate the mouse moving out and in. It's a little complicated but one thing is important, that in the Javascript/jQuery, when mouse move from a element to another, as long as they're STRICTLY beneath (not even 1px afar), the movein and moveout event will all be executed.

fiddle: http://jsfiddle.net/neuroflux/ssSnN/1/
css:
.child {
display: none;
}
HTML:
<div id="fruits">
<div class="roll" id="apple">APPLE
<div class="child">Fuji</div>
<div class="child">Huangjin</div>
<div class="child">Stuff</div>
</div>
<div class="roll" id="pine">PINE
<div class="child">Stuff</div>
<div class="child">Stuff</div>
<div class="child">Stuff</div>
</div>
Javascript:
$('.roll').on('mouseover', function() {
$('.child').hide();
$(this).children('.child').show();
}).on('mouseout', function() {
$('.child').hide();
})

You can use this
$(child).mouseover (function() {
$(this).find("li").show();
});
if it is ul li.
or
$(child).mouseover (function() {
$(this).children("li").show();
});

You can do like this:
Html:
<div id="fruits">
<div class="roll" id="apple">APPLE
<div class="child">Fuji
<div class="child2">abc</div>
<div class="child2">def</div>
</div>
<div class="child">Huangjin</div>
<div class="child">Stuff
<div class="child2">abc</div>
<div class="child2">def</div>
</div>
</div>
<div class="roll" id="pine">PINE
<div class="child">Stuff</div>
<div class="child">Stuff</div>
<div class="child">Stuff</div>
</div>
<div class="roll" id="juice">JUICE
<div class="child">Stuff2</div>
<div class="child">Stuff2</div>
<div class="child">Stuff2</div>
</div>
</div>
Css :
.child {
display: none;
}
* { padding: 6px; }
Javascript:
$(".roll").mouseover(function() {
$('.child').hide();
$(this).children('.child').show();
}).on('mouseout', function() {
$('.child').hide();
})
$(".child").mouseover(function() {
$('.child').hide();
$(this).children('.child2').show();
}).on('mouseout', function() {
$('.child2').hide();
})
Try it..

Add one or two pictures to the jQuery Slider

I need to add a jQuery slider to my website and I found this one met my requirement. But the slider just show 3 pictures, how to add one or two other pictures to the slider?
Demo: http://d.lanrentuku.com/down/js/jiaodiantu-883/
The html code
<div id="preview-slider">
<div id="preview-slide-1" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/01.jpg"></a></div>
<div class="preview-hide" id="preview-slide-2" style="display: block;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/02.jpg"></a></div>
<div class="preview-hide" id="preview-slide-3" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/03.jpg"></a></div>
<div id="preview-slider-line">
<ul id="preview-slider-holder">
<li class="preview-first">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im1" alt="" src="images/01.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 1</a></span></li>
<li class="preview-second">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im2" alt="" src="images/02.png" style="top: -15px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 2</a></span></li>
<li class="preview-third">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im3" alt="" src="images/03.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 3</a></span></li>
</ul>
</div>
</div>
The javascript code
(function($){
$(document).ready(function() {
var ready = true, position = 1, timer = null, domer = $('ul#preview-slider-holder > li');
var anima = function () {
if (!ready) {
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").each(function(){
if($(this).is(':animated')){
$(this).stop(true, true);
}
});
}
ready = false;
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").hide();
$('img', this).animate({"top": "-15px"}, 200);
$('#preview-slide-' + (position + 1)).fadeIn(600, function(){
ready = true;
});
$('img[id^="preview-thumbnail-im"]:not([id="preview-thumbnail-im' + (position+1) + '"])').stop(true, false).animate({'top': '0px'}, 200);
position = ++ position % 3;
};
timer = setInterval(function(){anima.apply(domer)}, 2000); // interval time
domer.mouseover(function () {
timer == null || clearInterval(timer);
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
anima.apply(this);
});
domer.mouseout(function () {
timer = setInterval(function(){anima.apply(domer)}, 2000);
});
});
})(jQuery);
I tried to add a li element , but it didn't work. I think I need to modify the javascript code. But I am not good at the programming, will someone tell how to do?

While I agree with DevlshOne, that many other quality sliders are out there. To answer the OP's question, you have to fix the code to not have hard-coded positions. Instead, I chose to use the index method present with jQuery.
Here is the jsFiddle that shows 4 images working (though I used the original code, so no actual images are displayed).
http://jsfiddle.net/a5yqx/
The key changes to the code are from:
position = ++ position % 3;
...
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
To:
position = ++position % domer.length;
...
position = $(this).index();
Since I don't have the CSS to accompany it, I'm not sure what else you'll need to keep your style up, but good luck.
Last note, I changed the image size from your default to 10x10 in order to see it on my screen in the fiddle.

How to zoom in a group of element using jqzoom

I'm using Jqzoom to provide zoom for a given image. These images are placed side by side and each one have the same size. I want to find a way to make the same zoom happen on all images in the same time.
Code # jsfiddle: http://jsfiddle.net/Fam43/23/
Sample IMG:
Sample HTML code:
<div>
<!-- Omitted stuff here -->
<a href="img1_big.png" class="zoom">
<img src="img1.png" width="100%" />
</a>
</div>
<div>
<!-- Omitted stuff here -->
<a href="img2_big.png" class="zoom">
<img src="img2.png" width="100%" />
</a>
</div>
<div>
<!-- Omitted stuff here -->
<a href="img3_big.png" class="zoom">
<img src="img3.png" width="100%" />
</a>
</div>
JQZoom function:
$('.zoom').jqzoom({
zoomType: 'innerzoom'
});

After having a think about the situation i came up with the folowing:
in jqZoom 2.3 in the first section there is an $.extend(obj. { and one of the members is init: in that function replace the section setting the mouse events with:
At the end of the mouseenter mouseover event:
$(".zoomPad", el).bind('mouseenter mouseover', function(event) {
// *snip
if (settings.linked && event.srcElement === this) {
$(settings.linked).not(el).find(".zoomPad").trigger('mouseover');
}
});
Change mouseleave function like so:
$(".zoomPad", el).bind('mouseleave', function(event, notSource) {
obj.deactivate();
if (settings.linked && !notSource) {
$(settings.linked).not(el).find(".zoomPad").trigger('mouseleave', [true]);
}
});
the mouse move function needs to have the parameters changed and the code at the beginning and end of the function added:
$(".zoomPad", el).bind('mousemove', function(e, thisx, thisy) {
if (thisx && thisy) {
e = $.extend(e, {
pageX: (thisx + this.offsetLeft),
pageY: (thisy + this.offsetTop)
});
}
// *snip*
if (settings.linked && !(thisx && thisy)) {
$(settings.linked).not(el).find(".zoomPad").trigger('mousemove', [e.pageX - this.offsetLeft, e.pageY - this.offsetTop]);
}
});
my example:
http://jsfiddle.net/7FQHt/
Integrated OP's example:
http://jsfiddle.net/Fam43/24/
You can even limit the linking to just one item: http://jsfiddle.net/Fam43/25/ OR http://jsfiddle.net/Fam43/26/
This might not make 100% sense to you and that is ok, just ask me a question. Some things make sense in my head and not yours.