i have a simple nested UL's and i need to make only main UL sortable not the sub UL
example
<ul class="blocks-list" id="sortme">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-tags">Server</li>
<li class="tag-user">You</li>
</ul>
</li>
<ul class="mini-blocks-list">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
when i used this Jquery Code
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
it made both UL blocks-list and mini-blocks-list sortable
what i need is only to make blocks-list LI's sortable not both UL's
It seems a limitation in jQuery sortable, you could try this plugin or this one if you don't find out a pure jQuery solution.
You can use the sortable items option to filter exactly what you need and to keep other items from being sortable. For example items: "> li". docs
Related
http://jsfiddle.net/bcAH2/5/
i am working on a simple project there are 12 objects that are sort able using jquery ui
how can i add link behind each block and enable it so if i double click it the link open in new tab
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default four">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
and the jquery function obviously
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
You can add the URLs to each li element as follows (see here for details on HTML5 custom attributes):
<ul id="sortable">
<li class="ui-state-default" data-href="http://www.google.co.uk">1</li>
<li class="ui-state-default" data-href="http://www.bbc.co.uk">2</li>
<li class="ui-state-default" data-href="http://www.yahoo.co.uk">3</li>
...
Then use the .dblclick() function in jQuery to capture the double click event, retrieve the URL behind the block and navigate to the URL:
$( "#sortable li" ).dblclick(function() {
window.open( $(this).attr('href') );
});
See here for a Fiddle
I want to show a footer that contains a list with links, but when i add the links, the "li" becomes a button. How can i fix it?
Some code:
<div data-role="footer">
<ul data-role="listview">
<li>
<span>Google</span>
</li>
</ul>
</div>
Thanks!
Change your ul to data-role="none" , like this:
<div data-role="footer">
<ul data-role="none">
<li>
<span>Google</span>
</li>
</ul>
</div>
UPDATE:
You could try the following to get your desired style for the li while making it work like a link:
<ul data-role="listview">
<li style="cursor:pointer" onclick="window.location.href='http://www.google.com/'">Google</li>
</ul>
Markup:
<ul>
<li>
<ul id="ratx">
<li>Location</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Services</li>
<li class="bar"><span></span></li>
<li class="value">5</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Facilities</li>
<li class="bar"><span></span></li>
<li class="value">3</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Room Cleanliness</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Value for Money</li>
<li class="bar"><span></span></li>
<li class="value">1</li>
</ul>
</li>
</ul>
I want to represent User Ratings dynamically using JQuery so I made a function like this,
jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;
/* compute ratings */
$("li.bar span").css("width", barval);
});
Now, when I alert barval I get all 5 values but when I try to apply the "compute ratings" line, all it does is apply the last value that it finds. How should I go about this?
Sorry if the question is a confusing. I am not quite sure how to phrase everything.
The problem is that, while interating through each elements it find, it is applying a common value to all li.bar span. You should represent a single element, you are trying to apply to.
$(this).children("li.bar span").css("width", barval);
Update
Here is a working Demo
The snippet that worked was
$(this).find("li.bar").children("span").css("width", barVal );
Also, I changed the display property of the span to display: inline-block;
You are setting the css for all the elements in the set $("li.bar span"). So at the end, they all have the same width of the last parsed value.
Without seeing you markup, it's difficult to propose you a code solution though.
A quick sketch of my situation is:
<ul id="selectable">
<li class="table" id="header-row">
<ul class="row">
...
</ul>
</li>
<li class="table">
<ul class="row">
...
</ul>
</li>
...
</ul>
How do I disable li#header-row from being selectable?
You can use the filter option to include (or with :not, exclude) options
$("#selectable").selectable({
filter: ":not(#header-row)"
});
JSFiddle: http://jsfiddle.net/M7pmU/
Guys i have the following UL elements. The nested UL(nestsort) items are sortable in the IE browser Version 7 , but the drag movement seems wired ,while it works smooth in firefox.Please click on this link http://jsfiddle.net/Ds7ds/1/ from IE , the code is in jsfiddle.
<ul id="sortable">
<li>
<p> item 1</p>
<ul id="nestsort">
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
$("#sortable").sortable();
$("#nestsort").sortable();
This should work for you :
$( "#sortable" ).sortable({
cancel: "#nestsort"
});
$("#nestsort").sortable();
Wish you luck.