i'm applying jquery sortable on list of divs below is my code
<div class="area_options">
<div class="area_top"><p>At the bar</p></div>
<div class="area_list"><p>Appetizers</p></div>
<div class="area_list"><p>Beverages</p></div>
<div class="area_list"><p>Cocktail</p></div>
</div>
I want to make area_top div fixed which is heading of container.And apply sortable on the base of are_list div only.
Now sortable working fine and are apply also on area_top div.
How i can make area_top div fixed?
Thanks
You need to set the option items of the sortable() to .area_list
The documentation of the property here says:
Specifies which items inside the element should be sortable.
EDIT: With your current html, the javascript would be like this :
$(".area_options").sortable({ items: ".area_list" });
Related
I have an element:
<td colspan="3" data-enhance="false">
<select id="CandidatesListBox" size="9" onchange="MoveToGeocode()" style="width: 100%" class="candidatesList" data-role="none"></select>
</td>
I want this element to have no jQuery Mobile styles. The problem is that I fill this item dynamically, and jQuery mobile will ignore all data-enhance="false" tags then adding dynamic elements through javascript. JQuery Mobile will also transform the control, so jQuery that would work on the item (.add(), for example) will not. I need to make a dynamic element with no jQuery mobile styles or elements. Is this possible?
Edit
I have also tried to disable all selects from using JQM, but get the same issue:
$(document).bind('mobileinit', function () {
$.mobile.keepNative = "select"; /* jQuery Mobile 1.4 and higher */
});
JQM adds styles and render them when you specify the JQM css file. Once it is called and unless you override the CSS by your own applying styles for a particular element cannot be stopped. Because JQM itself wrapps our elements with their elements. So as a solution get the element and remove additional class names added by JQM from the element. Also you will need to remove wrapping elements too.
I have two dynamic horizontal control groups of radio buttons:
<div class="categories-panel" id="sections-panel">
<fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
<!-- ko foreach: Sections -->
<input type="radio"
data-mini="true"
...
/>
<label data-bind="text:Name, attr:{'for':Id}"></label>
<!-- /ko -->
</fieldset>
</div>
The content of controlgroups is updated by knockoutjs. The markup is updated this way:
self.refreshCategoriesList = function() {
$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
$("#category-choice-fieldset").controlgroup();
};
The problem is: the controlgroups don't fit in one row until I turn of and turn on the display: inline-block property of .ui-controlgroup-controls div in debugger:
before display: inline-block refresh:
http://i890.photobucket.com/albums/ac105/cubius/screen-1.png
after display: inline-block refresh (desired view):
http://i890.photobucket.com/albums/ac105/cubius/screen-2.jpg
How to make jQM always paint my controlgroups in one row?
First of all, the way you select your control group is wrong in this line :
$("#category-choice-fieldset").controlgroup();
Mustnt it be
$("#section-choice-fieldset").controlgroup();
(Maybe a typo)
You could do this in any of the two ways :
Method 1
Works fine in my fiddle. I'd say you move the <script> tag from head to body because page events of jQM dont play well with KnockOut.js and KnockOut.js needs a DOM ready to work properly, AND DOM ready doesnt work well with jQM. So I guess its a vicious loop indeed.
Demo : http://jsfiddle.net/hungerpain/k7UR5/
Method 2
And you could try one more thing in your refreshCategoriesList method:
//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");
Refreshing the entire controls on the page - thats what trigger("create") does
Demo : http://jsfiddle.net/hungerpain/k7UR5/1/
If you are updating the control group (appending, modifying etc) , access the control group like this:
$("#my-controlgroup").controlgroup("container")["append"]($el);
You need to access the control group container. See my jsfiddle for modifying the control group:
http://jsfiddle.net/androdify/WAzs6/
I'm suing jquery ui draggable on a list of items that can be dropped on a .droppable list of other items. Here's a jsFiddle to show what I'm trying to do:
<div id="container">
<div id="left-pane" class="pane">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
</div>
<div id="right-pane" class="pane">
<div class="item">Item E</div>
<div class="item">Item F</div>
<div class="item">Item G</div>
<div class="item">Item H</div>
</div>
$('.item').draggable({
helper: 'clone',
appendTo: '#contentpane',
cursor: 'move'
});
$('.item').droppable();
The panes have a fixed height, and overflow-y: auto so that we can scroll inside to see hidden elements.
When dragging an element from a list to the other, the lists do not scroll since I use appendTo and the dragged item is not in the list. Is there a way to make the list 'scrollable' when I drag an item over? otherwise it is not possible to drop the item at the bottom of the list, let's say drop 'Item A' on 'Item H' on the fiddle example
Be able to use the scroll features from different container is really not easy to do.
I opended a topic on this subject. You will find an edit of the question with a functionnal workaround.
Check this related question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table
About your last remark, you could place your item at the boom of the list using the sortable property. http://jqueryui.com/sortable/
Well the only way I found to do it is to detect the position of the dragged element and scroll the droppable container, with a smooth effect so that it will scroll like doing it from the mouse wheel.
I am using jQuery UI to make selections. I'm having an ul-list that I made selectable. The li-items contains icons and texts. It seems that the selectable comment not only makes the li-items selectable, but also the elements in the li-items. This gives some unexpected results.
I tried to make an example in jsFiddle: http://jsfiddle.net/eJSGU/
If you click several times on the edges of the icon, you will see that there is sometimes something selected that is bigger than the li-block.
<li class="ui-widget-content">
<div class="img"><img src="http://bib.arts.kuleuven.be/bibliotheek/images/icon_facebook.jpg"></div>
<div class="lbl">Item 1<div>
</li>
Anyone an idea how I can avoid this?
I suggest to use the filter option of the selectable. In your case you want only the li elements to be selectable so you set filter: $('selector').children()'.
<script>
$(function() {
$( "#selectable li" ).selectable({
filter: $('#selectable').children('li')
});
});
</script>
Here is an updated fiddle.
I have some divs on my page that are made both resizable and draggable using jQuery UI. When I call html() on those divs, I get not only the content of the div, but also some extra content inserted by jQuery UI when I made them resizable:
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>
text() works for retrieving the current text, but when I try to set the content using $("selector").text("new text"), it replaces the jQuery UI code, making the div not resizable anymore.
How can I just get/set the text, not the jQuery UI resizable code?
You could try to make another div within that div which holds the content and has 100% width and height, then make the parent div resizable.