I have draggable object in the page, and it has snap setting for the region.
<div class="drag-bound">
<div id="obj"></div>
</div>
$('#obj').draggable({
snap: ".drag-bound",
snapTolerance: 5
})
So now if $('#obj') is dragged near the border of ".drag-bound", it gets snapped there.
The problem is I want $('#obj') is snapped to the center of the ".drag-bound", too.
Is there any good idea how to make it happen?
Should I make custom code inside of drag event handler?
Is there any good and easy option inside of it?
Alright, so far from my investigation, there seems not to be a good option to accomplish my purpose.
I have made custom code inside of drag event handler like following:
fn.branding.$resizable.draggable({
snap: ".resize-bound",
snapTolerance: 5,
drag: function(event, ui) {
var ui_w = ui.helper.width();
var ui_h = ui.helper.height();
var margin = $(this).draggable("option", "snapTolerance");
/////////////////////////////////////////////////////////
// do custom snapping here
//
if (!(Math.abs((ui.position.left + (ui_w)/2) - (fn.branding.modal_preview_width/2)) > 2 * margin)) {
ui.position.left = Math.round((fn.branding.modal_preview_width - ui_w)/2);
}
if (!(Math.abs((ui.position.top + (ui_h)/2) - (fn.branding.modal_preview_height/2)) > 2 * margin)) {
ui.position.top = Math.round((fn.branding.modal_preview_height - ui_h)/2);
}
});
Related
I would like to activate the "swiperight" function only for the area marked in green.
I it possible to define a non-swipeable area?
There is more than one possible solution, to achieve what You asked for.
The swipe, swipeleft and swiperight are custom jQuery Mobile events. JQM is attaching to these events a custom structure which contain the start and stop coordinates of the original touch events.
First of all, if You want to handle the swipe by yourself, You need to tell this to the framework:
Skip the built-in panel swipe handler:
<div data-role="panel" id="myPanel" data-swipe-close="false">
After that, to open or close the panel, You can simply check either the coordinates of the touchstart, touchend or both (up to You to decide this).
Custom handling of the touch events:
$('body').on('swiperight', function (e) {
var startX = e.swipestart.coords[0],
stopX = e.swipestop.coords[0];
if(startX < 100) {
$('#myPanel').panel('open');
}
});
$('body').on('swipeleft', function (e) {
var startX = e.swipestart.coords[0],
stopX = e.swipestop.coords[0];
if(stopX < 100) {
$('#myPanel').panel('close');
}
});
If You want a more systematic approach, You may also check the some of the relevant panel options:
var data = $('#myPanel').data("mobile-panel"),
display = data.options.display, /* Panel Type: reveal, push, overlay */
position = data.options.position; /* Panel position: left, right */
and fine-tune the swipe actions (or whatever You want) accordingly.
I'm trying to figure out how to enable visitors to drag to rotate a 3D div using .draggable(). Currently the div rotates but also moves vertically and horizontally making the process touchy and unpredictable. I would like the origin of the div to stay fixed, and the "dragging" to only affect the rotation, so users can "spin" the div around to see the other sides.
here is link to the codepen: http://codepen.io/armandhammer8/pen/IiBga
$('.anime').draggable({
drag: function(event, ui){
var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
$(this).css({
'transform': rotateCSS,
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
Thanks in advance!
The div element is a little house:
I want to be able to spin it around
The built in functionality of draggable is giving you the problems.
It's not so hard to get the functionality by yourself and stop using draggable.
Javascript:
var offset = 0, startX;
var elem = document.getElementById("element");
$('.draggable').on('mousedown', function (e) {
startX = e.pageX - offset;
})
.on('mouseup', function() {
startX = null;
})
.on('mousemove', function (e) {
if(startX) {
offset = e.pageX - startX;
elem.style['-webkit-transform'] = 'rotateY(' + offset + 'deg)';
}
});
demo
The following example is probably the easiest way to try and explain the effect I'm trying to achieve:
http://jsfiddle.net/qSscJ/2/
Code:
$(function() {
$('#handle').click(function() {
$('#box').toggle('slide', { direction: 'right' });
});
});
Click on the blue handle to make the entire red box collapse. How do I keep the blue handle visible after the box is collapsed (while keeping the handle anchored to the edge of the box)? I'm open to other jQuery UI APIs to achieve this effect.
You could do just animate the width directly so the element doesn't get marked as hidden at the end of the animation:
$(function() {
$('#handle').click(function() {
$('#box').animate({width: "0px"}, 1000);
});
});
But, it would be much better to change the design so that the blue tab was not contained within the box you're closing like here: http://jsfiddle.net/jfriend00/gKQrv/.
$(function() {
$('#handle').click(function() {
var box = $('#box');
var targetWidth = box.width() > 0 ? 0 : 150;
box.animate({width: targetWidth + "px"}, 1000);
});
});
Is it possible to change top and left positions (get current values and change them) of jQuery UI datepicker. Please note that i need to change position, not set margin as it is in other examples.
Sure it is. As there's always only one datepicker active, you can select active datepicker with:
var $datepicker = $('#ui-datepicker-div');
and change its position:
$datepicker.css({
top: 10,
left: 10
});
EDIT
Whoah, tricky one. If you set top or left position in beforeShow, it gets overriden again by datepicker plugin. You have to put css changes in a setTimeout:
$("#datepicker").datepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: 100,
left: 200
});
}, 0);
}
});
DEMO: http://jsfiddle.net/BWfwf/4/
Explanation about setTimeout(function () {}, 0): Why is setTimeout(fn, 0) sometimes useful?
If you get really stuck you can edit your jquery-ui-[version].custom.js. The function that controls the position where the calender will appear is:
_findPos: function(obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
return [position.left, position.top];
},
I have some custom code that uses a CSS3 transformation to zoom the page in or out based on its width. This throws out the screen coordinates that the calendar widget relies on. I added some custom code to the _findPos to detect and handle the zoom level. Modified code looks like this:
_findPos: function(obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
/* Custom Code for Zoom */
var zoomLevel = 1;
var minW = 1024;
if ($(window).width() > minW)
{ zoomLevel = $(window).width() / minW;}
return [position.left, position.top/zoomLevel];
},
May be an old question, but ran into the problem myself just today and could not get other suggestions to work. Fixed it alternatively (using .click(function(){}) and wanted to add my two cents.
I have an input field with the id sDate which, when clicked, displays the datepicker.
What I did to solve the problem was add a click routine to the #sDate field.
$('#sDate').click(function(){ //CHANGE sDate TO THE ID OF YOUR INPUT FIELD
var pTop = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING
var pLeft = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING
$('#ui-datepicker-div').css({'left':pLeft, 'top':pTop});
});
your solution works provided you run it after calling the datepicker in the code, I tried calling it before but it didn't work, so I tried to understand how it worked for you.
I have adapted the datepicker in the context of an input field which is fixed at the top of the page to scroll. The datepicker was lost ...
Here is my example code for adaptation in a context of datepicker which becomes dynamically fixed:
Example found on w3schools.com: https://www.w3schools.com/howto/howto_js_sticky_header.asp
HTML:
<div class="padding-16 center" id="resa_nav">
<div style="margin: 24px 0 0;">
<label for="date_selector"
class="text-gray">Choose a date</label>
<input type="text" id="date_selector" name="date_selector" class="padding-small">
</div>
</div>
CSS:
.sticky {
position: fixed;
top: 0;
width: inherit;
background: white;
box-shadow: 0px 0px 7px 4px #69696969;
}
JS:
// init datepicker
$('#date_selector').datepicker();
// When the user scrolls the page, execute myFunction
window.onscroll = function() { myFunction() };
// Get the header
var header = document.getElementById('resa_nav');
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
// set block sticky
header.classList.add('sticky');
// adjust datepicker position
// attach a namespace for unbind click later in "non-sticky" context
$('#date_selector').on('click.sticked', function(){
var top = '10px';
var left = '10px';
$('#ui-datepicker-div').css({'left': left, 'top': top});
});
}
else {
// remove sticky
header.classList.remove('sticky');
// unbind the second event 'click' for retrieve the
// default of settings in "non-sticky" context
$('#date_selector').off('click.sticked');
}
}
// END FUNCTION
hope to help!
just add css as below for datepicker
.datepicker {
top: -150px;
/* adjust value as per requirement. if not work try with addin !important*/
}
I am using the jquery-ui draggable component with jquery.gantt here. I could do enable drag on the items easily by $('.ganttRed').draggable() but the problem with this is that once we start scrolling the graph left to right using the slider below, the elements that are moved remain where they are instead of scrolling with the graph.
I looked through the source and from my understanding the margin-left is being changed during the scrolling; but jquery-ui uses the left attribute and in the presence of left the element keeps its position. My CSS knowledge ends just about there so if any of you are willing to provide any suggestions on how this can be fixed; I will greatly appreciate it.
I have a created a fiddle demonstrating the problem at: http://jsfiddle.net/Y2cxa/. In order to see the behavior I am speaking about:
Scroll the graph (either with your mouse wheel or the slider at the bottom); things should look and behave as expected.
Move any of the magenta(-ish) bars around and then scroll.
Again, thank you for your time and any assistance will be greatly appreciated.
Best regards
You have probably solved this or done something else by now but since I needed this aswell i solved it.
Got a solution for you here:
http://jsfiddle.net/Y2cxa/18/
First I simply copied the left value to margin-left and then removed the left value completely, however this led to some strange numbers.
To solve this I compared the start value of left with the final value of left and applied the same difference in pixels to margin-left!
Simply replace:
$('.ganttRed').draggable({axis:'x'});
with:
$('.ganttRed').draggable({
axis:'x',
start: function(event, ui) {
$(this).data("startx",$(this).offset().left);
},
stop: function(event, ui) {
var change = $(this).offset().left - $(this).data("startx");
var value = $(this).css('margin-left');
value = value.split("px");
value = parseInt(value[0]) + change;
$(this).css('margin-left', value);
$(this).css('left', '');
}
});
I believe below is a better solution and I am using it in my application
For vertical and horizonal dragging
$('.ganttRed').draggable(
{
start: function (event, ui) {
$(this).data("startx", $(this).css('left').split("px")[0]);
$(this).data("starty", $(this).css('top').split("px")[0]);
},
stop: function (event, ui) {
var left = parseInt($(this).css('left').split("px")[0]);
var changex = left - parseInt($(this).data("startx"));
var top = parseInt($(this).css('top').split("px")[0]);
top -= top % 24;
$(this).css('top', top);
var changey = top - parseInt($(this).data("starty"));
}
});
changex, changey will be used in calculation while updating in database
For horizontal resizing
$(".ganttRed").resizable({ handles: 'e, w' });