Im working on a site that has a lot of forms. I have noticed that when you scroll/swipe the site on an iphone the page does not scroll if your finger is on an input field. To scroll you have to aim your finger on the body kind of.
Anyone having some ideas on what causes this strange behaviour?
Its just simple inputs wrapped in a form tag.
A workaround for this issue might be :
function setTextareaPointerEvents(value) {
var nodes = document.getElementsByTagName('textarea');
for(var i = 0; i < nodes.length; i++) {
nodes[i].style.pointerEvents = value;
}
}
document.addEventListener('DOMContentLoaded', function() {
setTextareaPointerEvents('none');
});
document.addEventListener('touchstart', function() {
setTextareaPointerEvents('auto');
});
document.addEventListener('touchmove', function() {
e.preventDefault();
setTextareaPointerEvents('none');
});
document.addEventListener('touchend', function() {
setTimeout(function() {
setTextareaPointerEvents('none');
}, 0);
});
This will make Mobile Safari (others not tested so far) ignore the textareas for scrolling but allows to set focus etc. as usual.
I am trying to create a jquery handle that when you slide it it moves another div inside a container. Following is my js
function handleSliderChange(e, ui)
{
console.log('1');
var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) },1000);
}
function handleSliderSlide(e, ui)
{
console.log('2');
var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 10);
}
$("#content-slider").slider({
animate: true,
slide: handleSliderSlide,
change: handleSliderChange
});
So when I click on the bar both handleSliderChange and handleSliderSlide are called, but when i drag the slider it works fine any solution ? I don't mind cancelling the click function from the slider i only need the drag anyways
I found the solution to that, the trick is to check prior to running the methods for what type of event is triggered. This is how i did it
sliderBar.slider({
start: checkType,
animate: options.animateSpeed,
slide: handleSliderSlide,
step: options.step,
change: handleSliderChange,
});
function checkType(e){
_isSlide = $(e.originalEvent.target).hasClass("ui-slider-handle");
}
$(".draggable").draggable({axis: 'x'});
<div class="draggable">
I am draggable to left side only, and not right or up or down, the axis : x controls me to prevent up or down dragging, but make me not right too. Thanks
I solved it saving the previous left offset and comparing it with the new left offset.
var previousOffset = null;
$( "#draggable" ).draggable({
axis: 'x',
drag: function(event,ui){
if(previousOffset == null)
previousOffset = ui.offset.left;
else{
if(previousOffset < ui.offset.left)
return false;
else
previousOffset = ui.offset.left;
}
}
});
Here's working: http://jsbin.com/ubine3/2
I needed the dialog to maintain its position fixed even if the page scrolled, so i used the
extension at http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010 but there's 2 problems with it:
it flickers in IE and Firefox on page scroll (in Safari/Chrome it's fine)
on closing and then reopening, it looses its stickyness and scrolls along with the page.
Here's the code i'm using for creating the dialog:
$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>')
.dialog({
autoOpen: true,
title: user_str,
height: 200,
stack: true,
sticky: true //uses ui dialog extension to keep it fixed
});
And here's the code i'm using for reopening it:
jQuery('#'+divpm_id).parent().css('display','block');
Suggestions/solutions?
Thanks
I tried some of the solutions posted here, but they don't work if the page has been scrolled prior to the dialog being opened. The problem is that it calculates the position without taking into account the scroll position, because the position is absolute during this calculation.
The solution I found was to set the dialog's parent's CSS to fixed PRIOR to opening the dialog.
$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');
This assumes that you have already initialized the dialog with autoOpen set to false.
Note, this does not work if the dialog is resizable. It must be initialized with resizing disabled in order for the position to remain fixed.
$('#my-dialog').dialog({ autoOpen: false, resizable: false });
Tested this thoroughly and have found no bugs so far.
I combined some suggested solutions to the following code.
Scrolling, moving and resizing works fine for me in Chrome, FF and IE9.
$(dlg).dialog({
create: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
},
resizeStop: function(event, ui) {
var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
(Math.floor(ui.position.top) - $(window).scrollTop())];
$(event.target).parent().css('position', 'fixed');
$(dlg).dialog('option','position',position);
}
});
Update:
If you want to make it default for all dialogs:
$.ui.dialog.prototype._oldinit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
$(this.element).parent().css('position', 'fixed');
$(this.element).dialog("option",{
resizeStop: function(event,ui) {
var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
(Math.floor(ui.position.top) - $(window).scrollTop())];
$(event.target).parent().css('position', 'fixed');
// $(event.target).parent().dialog('option','position',position);
// removed parent() according to hai's comment (I didn't test it)
$(event.target).dialog('option','position',position);
return true;
}
});
this._oldinit();
};
I could not get Scott's answer to work with jQuery UI 1.9.1. My solution is to reposition the dialog in a callback from the open event. First set the css position to fixed. Then position the dialog where you want it:
$('selector').dialog({
autoOpen: false,
open: function(event, ui) {
$(event.target).dialog('widget')
.css({ position: 'fixed' })
.position({ my: 'center', at: 'center', of: window });
},
resizable: false
});
Note: As noted in another answer, resizing the dialog will set its position to absolute again, so I've disabled resizable.
Bsed on Langdons's comment above, I tried the following, which works fine with jQuery-UI 1.10.0 and resizable dialogs:
$('#metadata').dialog(
{
create: function (event) {
$(event.target).parent().css('position', 'fixed');
},
resizeStart: function (event) {
$(event.target).parent().css('position', 'fixed');
},
resizeStop: function (event) {
$(event.target).parent().css('position', 'fixed');
}
});
try:
$(document).ready(function() {
$('#myDialog').dialog({dialogClass: "flora"});
$('.flora.ui-dialog').css({position:"fixed"});
)};
(from http://dev.jqueryui.com/ticket/2848)
Force your dialog box's position to be position:fixed using CSS
$('.selector').dialog({ dialogClass: 'myPosition' });
and define the myPosition css class as:
.myPosition {
position: fixed;
}
$("#myDilog").dialog({
create:function(){
$(this).parent().css({position:"fixed"});
}
});
I found that these answers didn't work for me but combining some of them did.
I used the create function to set the dialog as fixed so it didn't scroll the window down when the dialog was created.
create: function (event) {
$(event.target).parent().css('position', 'fixed')
}
Also I used the open function to make sure the dialog didn't disappear off the screen by changing the top value.
open: function(event, ui) {
$(event.target).parent().css('top', '30%')
}
This worked with autoOpen and resizable.
$('#myDialog').dialog({ dialogClass: "flora" });
$('.flora.ui-dialog').css({ top: "8px" });
this will keep the dialog on top position no matter were we have clicked.
$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});
Why use $(document).ready ? This might be a recent development, but it works fine now.
$( ".ui-dialog" ).css("position","fixed");
$( ".ui-dialog" ).css("top","10px");
put this code on open function of dialog
First, create your dialog. Something like this:
$("#dialog_id").dialog({
autoOpen : false,
modal : true,
width: "auto",
resizable: false,
show: 'fade',
hide: { effect:"drop",duration:400,direction:"up" },
position: top,
height: 'auto',
title: "My awesome dialog",
resizeStart: function(event, ui) {
positionDialog();
},
resizeStop: function(event, ui) {
positionDialog();
}
});
$("#dialog_id").dialog('open');
Then make it auto center with this:
function positionDialog (){
setInterval(function(){
if($("#dialog_id").dialog( "isOpen" )){
$("#dialog_id").dialog('option','position',$("#dialog_id").dialog( "option", "position" ));
}
},500);
}
//setInterval is for make it change position "smoothly"
//You can take it off and leave just the if clausule and its content inside the function positionDialog.
The solution is actually really simple. I don't know if this applied when the question was asked but it does now anyway.
//First a container/parent-div with fixed position is needed
var dialogContainer=document.body.appendChild(document.createElement("div"));
dialogContainer.style.position="fixed";
dialogContainer.style.top=dialogContainer.style.left="50%";//helps centering the window
//Now whenever a dialog is to be created do it something like this:
$(myDialogContent).dialog({
appendTo: dialogContainer,
position: {
at: 'center center',
of: dialogContainer
}
});
About "appendTo": http://api.jqueryui.com/dialog/#option-appendTo
About "position": http://api.jqueryui.com/position/
While similar to some of the other answers above, I've found that I had to do more than just position: fix the dialog, but I also had to position: static it's content to keep it attached to the dialog.
$('<div id="myDialog" class="myClass">myContent</div>')
.dialog(dialogOptions)
.parent()
.css({ position: 'fixed' })
.end()
.position({ my: 'center', at: 'center', of: window })
.css({ position: 'static' });
After this, I could call .dialog('open') any time I wanted and it would simply appear where I left it. I actually have this in a function that will return the existing dialog or create a new one as needed and then I just change the values of the dialog before .dialog('open') gets called.
As i wrote in my blog https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/
I've found a bug in “window” element or “dialog” element.
When you instantiate this widget, it go out of the main window browser, in particular in top and left position (when you drag o resize it).
To resolve this problem i’ve implemented this solution.
You can read the source code below:
$(dialog).window({
onMove: function(left, top) {
if (left < 0 || top < 0) {
left = (left < 0) ? 0 : left;
top = (top < 0) ? 0 : top;
$(this).window('move', {left: left, top: top});
}
},
onResize: function(width, height) {
var opt = $(this).window("options");
var top = opt.top;
var left = opt.left;
if (top < 0) {
top = (top < 0) ? 0 : top;
$(this).window('move', {left: left, top: top});
}
}
}).window("open");
The same code is for dialog:
$(dialog).dialog({
onMove: function(left, top) {
if (left < 0 || top < 0) {
left = (left < 0) ? 0 : left;
top = (top < 0) ? 0 : top;
$(this).dialog('move', {left: left, top: top});
}
},
onResize: function(width, height) {
var opt = $(this).window("options");
var top = opt.top;
var left = opt.left;
if (top < 0) {
top = (top < 0) ? 0 : top;
$(this).dialog('move', {left: left, top: top});
}
}
}).dialog("open");
Futhermore, when you call “$(this).window(“options”);” inside “onResize” method, and start your App,
you don’t see the window; so i must insert the “.window(“open”);” at the and of declaration of dialog.
I hope to help you.
is it possible to change the left position of a div after dropping it?
i'm trying to do that using this code but it's not working, can anybody help me...
thanks a million in advance :)
$(function () {
$("#task_1").draggable({ revert: 'invalid' });
$("#Lina").droppable({
drop: function (ev, ui) {
var pos = $("#task_1").position();
// kolla(pos.left);
if (pos.left < 0) {
alert(pos.left);
$("#task_1").position().left = 0;
}
else {
// do something else
}
}
});
});
Just a quick idea, have you tried:
$("#task_1").css("left","0");
If the outer drop-area has relative positioning (not sure, have to check) that should work.
Basically, you want the dropped div to shift to the very left of the drop area, right?
Update
You have it so that the position is changed when the condition is pos < 0. Since the div won't be in the drop-area if it's outside of it, I think you mean pos > 0. Also, why bother checking, if it's already 0, it just changes it to what it already is.
For instance:
$(function () {
$("#task_1").draggable({ revert: 'invalid' });
$("#Lina").droppable({
drop: function (ev, ui) {
this.position().left = 0;
}
});
});
Notice I also made it "this" since you are changing the selector.