Hi.
I have a web site that contains jquery tabs and one tab consists of a sortable jquery.
Although the sortable works induviduallay it doesnt work when it is put into the tabs. Is there a solution of that?
My tab code is as follows.
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/check_form.js"></script>
<script type="text/javascript" src="javascripts/ThickBox.js"></script>
<script type="text/javascript" src="javascripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="javascripts/jquery.ui.tabs.demo.js"></script>
<ul class="nav-content">
<li class="current first-li"><a href="tab1.php">Tabs-1</a></li>
<li><a href="tab2.php" ><span>Tabs-2</span></a></li>
<li><a href="tab3.php" ><span>Tabs-3</span></a></li>
</ul>
<script type="text/javascript">
$(function() {
$(".nav-content").tabs(
{
// CSS classes
selectedClass: 'current',
spinner: '',
select: function(ui) {
//$(".nav-content").hide();
$(".loading").show();
},
show: function(ui) {
$(".loading").hide();
//$(".nav-content").show();
}
}
);
});
</script>
-------
and the sorting code is as follows:
<link rel="stylesheet" href="files/jquery.ui.all.css">
<script src="files/jquery-1.6.2.js"></script>
<script src="files/jquery.ui.core.js"></script>
<script src="files/jquery.ui.widget.js"></script>
<script src="files/jquery.ui.mouse.js"></script>
<script src="files/jquery.ui.sortable.js"></script>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
<div class="demo">
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
The tabs and sortable is in the following link if it helps.
www.kolaydil.com/sortable/tab1.php (the sortable here is working)www.kolaydil.com/sortable (Here it is not working)