link in sortable()
link in sortable()
Hi there,
I have setup a list that is sortable, and this works amazingly well.
In each of the <li> tags in the sortable element, I would like to have
a link that will display all the li element (currently I am not
showing all the content at once.)
I have created a copy of what I am trying to achieve. As you will be
able to see elements 1 through to 4 are sortable (but not resizable)
and the other 4 I have added contain the resizing functionality I
require.
Could anyone offer a workaround (I presume it to be a nested issue?!?)
or solution please? I am very new to jQuery so any help would be
greatly appreciated!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function showNow(what){
//$("#myList").sortable("disable").
$("#sub"+what).show("slow");
}
$(document).ready(function(){
$("#myList").sortable({});
$(".hidden").hide();
});
</script>
<style>ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-
size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
<script src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.base.js"></
script>
<script src="http://dev.jquery.com/view/tags/ui/1.5b2/
ui.sortable.js"></script>
<ul id="myList">
<li><div>Item 1 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('1')">clicky</a></div><div
class="hidden" id="sub1">Some more content</div></li>
<li><div>Item 2 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('2')">clicky</a></div><div
class="hidden" id="sub2">Some more content</div></li>
<li><div>Item 3 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('3')">clicky</a></div><div
class="hidden" id="sub3">Some more content</div></li>
<li><div>Item 4 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('4')">clicky</a></div><div
class="hidden" id="sub4">Some more content</div></li>
</ul>
<ul>
<li><div>Item 5 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('5')">clicky</a></div><div
class="hidden" id="sub5">Some more content</div></li>
<li><div>Item 6 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('6')">clicky</a></div><div
class="hidden" id="sub6">Some more content</div></li>
<li><div>Item 7 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('7')">clicky</a></div><div
class="hidden" id="sub7">Some more content</div></li>
<li><div>Item 8 <a style="cursor:pointer; cursor:hand;text-
decoration:underline;" onclick="showNow('8')">clicky</a></div><div
class="hidden" id="sub8">Some more content</div></li>
</ul>
</body>
</html>
Thanks!
Taff