Can i customize caroufredsel to support dragging? something like this http://jsfiddle.net/DRVpe/
The only problem with this is it doesn't loop infinitely when you start dragging it. It should join or loop seamlessly when you move it up or down.
$(function() {
$('#foo0').carouFredSel({
circular: 'true',
infinite: 'true',
direction: 'up',
scroll : {
items: 1,
duration: 1500,
easing: 'linear',
pauseOnHover: 'immediate',
},
auto : {
pauseDuration : 0,
},
});
$( "#foo0" ).draggable({ axis: "y" });
});
If these ain't not possible are there plugins that does what i want?
Thank You!
Related
I would like a datepicker like the one found here:
datepicker example
I am using the jquery ui datepicker with much success. I am showing 2 months at a time just like the one in the link but I would like it to animate with a slide when I click the next/prev month buttons.
I have tried this but it animates the entire datepicker, i.e. the entire datepicker slides out then back in again.
onChangeMonthYear: (year, month, inst): void => {
$('.ui-datepicker')
.hide('slide', { direction: 'right' }, 300)
.show('slide', { direction: 'left' }, 300);
}
here is a fiddle:
fiddle
SOLVED thanks to AB Udhay. I removed the onChangeMonthYear function and put this in the contructor(using TypeScript):
$(document).on('click', '.ui-datepicker-next', () => {
$('.ui-datepicker-calendar')
.hide('slide', { direction: 'left' }, 200)
.show('slide', { direction: 'right' }, 200);
});
$(document).on('click', '.ui-datepicker-prev', () => {
$('.ui-datepicker-calendar')
.hide('slide', { direction: 'right' }, 200)
.show('slide', { direction: 'left' }, 200);
});
"onChangeMonthYear" method will trigger after the date and month has changed. So you do something like this on click of the buttons.
Updated Fiddle
$(document).on('click', '.ui-datepicker-next', function () {
$(".ui-datepicker-title>span").hide().show(300);
$(".ui-datepicker-calendar").hide('slide', { direction: 'right' }, 300).show('slide', { direction: 'left' }, 300)
})
$(document).on('click', '.ui-datepicker-prev', function () {
$(".ui-datepicker-title>span").hide().show(300);
$(".ui-datepicker-calendar").hide('slide', { direction: 'left' }, 300).show('slide', { direction: 'right' }, 300)
})
I have a Jquery UI dialog and I close it by having it sized to zero and moving its position as in:
$('#myDialog').dialog({
...
beforeClose: function() {
$("#myDialog").dialog("widget").animate({
'position': 'absolute',
'left': '1250px',
'top': '20px',
'height': '0px',
'width': '0px'
}, 600);
},
...
This works fine but not if the window is resized because the goal is to have it move towards another element. I tried the following, but it does not work:
beforeClose: function() {
$("#myDialog").dialog("widget")
.animate({'height': '0px','width': '0px'},400)
.animate({'position': { my: "right top", at:"left bottom",
of: "#myButton" }},400);
},
This does resize the dialog to zero but the positioning does not work at all.
Can you suggest any way to do this?
I want to disable sorting of items when item is dragged. Only after the drop has been completed the items must sort accordingly.
$( "#sortable" ).sortable({
tolerance: 'pointer',
revert: 'invalid',
forceHelperSize: true,
scroll: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
helper: 'clone',
containment: 'parent',
cursor: 'move',
distance: 5,
opacity: 0.3,
});
link:jsfiddle
One way to do it would be to micromanage placeholder position during the different events. It causes a problem with revert, but there's probably a way to resolve this somehow. And the behavior might not be exactly exactly the same, but again, a little tweak and it could be there. Anyway, my suggestion:
$(function () {
$("#sortable").sortable({
tolerance: 'pointer',
//revert: 'invalid',
forceHelperSize: true,
scroll: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
helper: 'clone',
containment: 'window',
cursor: 'move',
distance: 5,
opacity: 1,
start: function (event, ui) {
place_prev = ui.placeholder.prev();//get position when selecting item
},
change: function (event, ui) {
place_pos = ui.placeholder.index(); //each change you gather where the placeholder is going
place_prev.after(ui.placeholder);//then you place it back where it started
},
beforeStop: function (event, ui) {
$('li').eq(place_pos).after(ui.item);//before stopping you place item where it was on last change event
},
});
});
http://jsfiddle.net/2mxw14vv/3/
here's a jsfiddle of what I'm trying to do
http://jsfiddle.net/YSBGu/
$( ".dragcomp" ).draggable({
cursorAt: {
left: 0
},
zIndex: 300,
revert: "invalid",
helper: "clone",
distance: 10
});
You'll notice that when trying to drag the divs in the left column to the middle section it stays trapped in the left one and just scrolls it. Is someone able to help me solve this issue?
You can specify the appendTo option to reparent the helper element under an ancestor of your pane structure (for instance the <body> element itself):
$(".dragcomp").draggable({
appendTo: "body",
cursorAt: {
left: 0
},
zIndex: 300,
revert: "invalid",
helper: "clone",
distance: 10
});
You will find an updated fiddle here.
I have multiple DropZone defined, each dropZone need to keep at least one draggable object.
When the user try to move the last item from a dropZone, I need to warn the user, that the last item cannot be moved and cancel the move action. I read that the ui.render was accessible on the receive event, although it's always empty.
I would need to access the original draggable parent (the dropZone it come from) and calculate the count of draggable children. When the count is now 0, I would cancel the move action so that the dragged block return to it's original position.
Something like:
function SortableReceiveDrag(event, ui) {
if ($(ui.sender).find("div.dragableBlock").length <= 0) {
$(ui.sender).sortable('cancel');
}
}
And my binding is as following:
var templateContent = $("#templatectn");
contentDropZones = templateContent.find('div.ContentZone.dropZone');
contentDropZones.sortable({
accept: 'div.dragableBlock',
connectWith: 'div.ContentZone.dropZone',
appendTo: "parent",
axis: false,
containment: 'document',
cursor: 'move',
cursorAt: false,
dropOnEmpty: true,
forceHelperSize: true,
forcePlaceholderSize: true,
iframeFix: true,
items: 'div.dragableBlock',
greedy: true,
grid: false,
helper: "clone",
opacity: 0.45,
placeholder: 'ui-block-placeholder',
revert: false,
scroll: true,
scrollSensitivity: 20,
scrollSpeed: 20,
scope: "default",
tolerance: "pointer",
zIndex: 2700,
start: function (event, ui) { SortableStartDrag(event, ui); },
stop: function (event, ui) { SortableStopDrag(event, ui); },
receive: function (event, ui) { SortableReceiveDrag(event, ui); },
change: SortableChange
});
contentDropZones.disableSelection();
Any idea why this doesn't work?
Thanks,
Francois