I apologize that I have a very surface level understanding on Jquery and I just cant seem to find the right keywords to google the answer, or perhaps there just isnt.
Basically my developers are working on this website which uses Jquery sortable. I have products which I draw from a database on the left and placeholders on the right. the workflow can be seen in the picture workflow. I have products which I can drag and drop to the basket. For the products, I can scroll through the pages and drag and drop anytime. However, I now need to create another "basket". Which requires me to switch between the basket anytime, possibly with a "next" and "prev" button. My developers was explaining to me that they are unable to do it because,
the position of the items in my basket is important, i.e. first box will always be item 1, second box will always be item 2, and so on. (items will be displayed later according to the numbered boxes )
they need to refresh the page in order to switch basket due to point (1).
refreshing the page might cause the values for the products to reset, i.e. if I scrolled through the pages and I switch basket, I will end up back at product page 1, which means i have to scroll through the pages again.
May I know if that is the limitations of jquery sortable? or is there something that they will be able to do in order to create another "basket" and able to scroll the "basket" without refreshing the page? Is there anything else which I can use for this issue?
EDIT: here is the script!
<script>
$(function () {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
update: function (event, ui) {
var licont = $("#sortable2 .ProItem").length;
},
stop: function (event, ui) {
if (event.target.id == 'sortable1' && ui.item[0].title != "") {
$(".proli:last").remove();
}
//console.log(ui.item.index());
$("#sortable2 li").each(function(i,o){
$(this).find('h4').html(i+1);
})
}
}).disableSelection();
});
</script>
your help is greatly appreciated!! thanks!
Related
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
I am working on a tool based on jQuery UI draggable functionality.
I have a number of boxes in the left column of the table. When they are dragged in yellow area, I would expect the remaining divs to move upwards to fill the space left by the box that was moved.
But it's not happening. Why?
It is pretty difficult to test but from my knowledge on the question here is a possible cause/solution to this.
The droppable plugin does not remove the dragged element from its original markup position, it is visually moved to the droppable element (with some option allowing to accept to drop certain elements or not, events, etc).
The elements have a position: relative css rule, which represents the "normal flow" for elements (in the order they appear in the markup). So even if the element is visually placed elsewhere on the page with css, its place in the markup is still the same and it is still taking the space it normally should.
This fiddle illustrate what i'm trying to explain :-)
By looking at the source code form the "working website", they actually remove the dragged element from the original draggable list and re-create it in the droppable list !
When they define the .droppable() they do this:
h.droppable({
tolerance: "intersect",
accept: ".card",
greedy: true,
drop: function (a, b) {
card = b.draggable;
putCardIntoStack(card, c)
}
});
On the drop event, they call putCardIntoStack(card, c) passing the currently dragged element as the card parameter. Within this method, they remove the original "card" (a.remove()) and re-create it in the dropzone (newcard = createCard();):
function putCardIntoStack(a, b) {
progressVal = $('#progBarRd').width();
card_idDOM = a.attr('id');
card_idDB = card_idDOM.substr(IDPREFIX_CARD.length, card_idDOM.length - IDPREFIX_CARD.length);
stack_idDB = b.substr(IDPREFIX_STACK.length, b.length - IDPREFIX_STACK.length);
$.ajax({
url: URL_DRAGDROPAJAX,
type: 'POST',
data: 'action=movecard&cardid=' + card_idDB + '&tostack=' + stack_idDB + '&prog=' + progressVal
});
// 'a' is the card
// they extract the id/content from the dragged card
cardId = a.attr('id');
cardLabel = a.text();
// they remove the card from the DOM
a.remove();
// they create a new card with the extracted info
newcard = createCard(cardId, cardLabel);
newcard.addClass('stackcard');
// and append it to the dropzone
$('#' + b).removeClass("empty").find('.stackDrop').append(newcard);
globalcheck()
}
jQuery UI does a similar thing on the droppable demo page. On the drop event, they call a function deleteImage() which removes the dragged image from the original markup and appends it to the drop zone.
I hope I'm clear enough :-)
I also hope I'm right, it is pretty difficult to test quickly but it makes sense :-)
This is my accordion: http://muso-syndicate.com/accordion/index9.htm - N.B. only currently styled for SF, FF, doesn't currently work in IE
If you select a 2nd category header once another one has been opened, it doesn't re-focus on the new header. By example, click on 'Classical' then scroll down and select 'Jazz', it doesn't automatically scroll back up to the top of the 2nd category.
Ideally, I'd like to add a 'scrollTo' function to '.bind' to the jQuery UI library. However, I have tried various solutions suggested on StackOverflow but none seem to work for me!
As the categories will vary in height as more content is added, I'd prefer not to use a solution that uses a fixed pixel scrollTo solution as this will require constant altering as new content is added to each category.
Any suggestions would be greatly appreciated as several folk seem to be scratching their heads on this one!
UPDATE:
I've got much closer to a solution for this but still requires some tweaking to stop the focus occasionally scrolling past the category header. Please see code below:
$(function() {
$( "#categories" ).accordion({
collapsible: true,
autoHeight: false,
active: -1,
change: function(event, ui)
{
$("#categories").bind("accordionchange", function(event, ui)
{
$("#categories").animate({scrollTop: $(ui.newHeader).offset().top}, 1);
});
},
});
});
I am using jQuery draggable/droppable to drag (divs) from one list to another. Both lists have a fixed number of list items, and the list items themselves and can either be empty or already contain a div.
I am dragging a div to a list item. If the list item already contains a div then I would like that div to be pushed down to the list item below it - so as to make way for the div I am dragging. I can do this with the "over" event in droppable. But I would like this to happen only after the user has paused there for a cetain period of time, say 0.5 second. How can I do this?
Also, if the user decides not to drop then I would like the displaced item to come back to its original position. Again, what would be the easiest of accomplishing that?
Thanks for your help
William
I just happen to be doing something similar. In my case, I am using the treeTable plugin. I want to expand a collapsed tree if it is hovered for some amount of time. Here is what I have so far. I just happen to be working on this today. Note the use of a timeout to delay the operation.
var timeout = null;
var clear = function() {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
}
$(".selector").droppable({
over: function(e, ui) {
if (! $(this).is("expanded")) {
clear();
timeout = setTimeout(function() {
$(this).expand();
timeout = null;
}, 1000);
}
}
, out: clear
, drop: function(e, ui) {
clear();
...
}
});
I'm still having a problem with this. After one branch gets expanded, the rows below it get pushed down to make room for the expanded branch. I haven't dropped yet and so I go hover over the first new element in the expanded branch. The problem is that this element does not get the hoverClass, the first element that got pushed down below the new branch gets it. It is like jquery doesn't figure out that it got moved down. I imagine that you are likely to encounter this problem given what you've described.
I was on jquery-1.4.2 but then I updated to jquery-1.6.4 to see if that would fix the problem. Both versions exhibit the same behavior. Also, I tested this in Chrome 14.0.835.202, Opera 11.52, Firefox 3.6.23 and IE7.0.5730.13. It happens the same way in all of them. So, either jquery has a bug or I've done something to cause this.
About your second question. I'm not sure I completely understand what you're going after. Are you looking for the