In short: When You have document height > window height, scroll down and open dialog - You can not drag it in Firefox. Bug occured only in jQuery UI 1.10.x
How to reproduce:
jsfiddle:
http://jsfiddle.net/mefa/zrNNZ/15/
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Jquery UI FF dialog bug - jsFiddle demo by mefa</title>
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
<style type="text/css">
html {
font-size:12px;
}
body {
height: 2000px;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$(function() {
$( "#dialog-modal" ).dialog({
height: 150,
modal: true
});
});
});
</script>
</head>
<body>
<div title="Basic modal dialog" id="dialog-modal">
<p>Drag this dialog to bottom of document in Firefox</p>
<p>Bug only in jquery ui 1.10.x</p>
</div>
<p>Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>
Video: http://www.youtube.com/watch?v=_J8aepYHg4U
So, assume U have a Jquery UI Dialog, and tag <body> has vertical scroll (for example You have much content, big table for example). Assume Your window height is 800 px and document height is 2000 px; So U need to scroll down, to get all contents.
Then You scroll down, over the window height, for example to 1000px, open dialog. After that You can't correctly drag it into any other position, because it's jumps like a mad.
Ive recorded a demonstration, based on the original jquery ui examples, so no one can say I missed or corrupted something.
Only one thing Ive changed is body css attr "height", and set it to 2000px to simulate large document.
I appreciate any advice/fix.
this is a bug in jquery-ui version 1.10.3
You can fix this by including previous version :
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
Suddenly, Ive found a solution.
To fix this bug, You need only to add following CSS rule
.ui-dialog {
position: fixed;
}
But this also has side effects.
If part of dialog is out of window scope, then no vertical/horizontal scrollbars appeared, and You can't reach hidden part of dialog in any way.
Need to wait properly fix from Jquery UI team.
The real fix is to replace _convertPositionTo() and _generatePosition() in jquery.ui.draggable.js from those in the latest master (1.10.3 is official current release, so the fix should come out in 1.11) for those who run into it now and can't use those css hacks.
i have tried some thing for you
it is not the best but you can try it.. i hope
re place your code as
$(function() {
$( "#dialog-modal" ).dialog({
height: 150,
modal: true,
dragStop: function( event, ui ) {
$( "#dialog-modal" ).dialog({ position: 'center',draggable: true });
}
});
});
when you up the mouse click it will stick to center of your screen... as example i have keep it at center but you can keep it any where... just go through documentation.
Related
The below code draws a lager blue rectangle border around a close button. It only happens in Chrome. The chrome is Version 46.0.2490.86
I tried playing with CSS styling but didn't help. The below sample code is from jQuery.com site. I am a novice in area of HTML,CSS, and jQuery, so please provide detailed answer that would help me to resolve the issue. Thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Use this css code:
.ui-button:focus { outline:none !important }
I'm trying to disable page scrolling using
$('body').on('touchmove',function(e){e.preventDefault()});
In Safari everything works as expected but in fullscreen mode only input and textarea don't prevent scrolling and ignore any touch event. I think it started in iOS8.
Here's example:
<!doctype html>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name=viewport content='width=device-width'>
<body ontouchmove="event.preventDefault()">
<div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<input value='Input'><br>
<textarea>Textarea</textarea><br>
<div contentEditable=true>Editable div</div><br>
<button onclick='location.reload()'>Reload</button>
Am I missing something?
Is it possible to prevent scrolling on touching <input>?
Seems that touchevents in a standalone web-apps launched from homescreeen are back with iOS 8.1.3 :-)
I have a website which has elements outside the viewport, which I use for animations, they basically kick in , every time you scroll to a different section of the page.
The problem is you can scroll horizontally thus taking the website's content out of the viewport and having access to the element which shouldn't be seen (something like an element with {right:-660px;} which should be well out of sight till it's supposed to come into the viewport{right:100px} or something).
Have already tried
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
And
body,html{overflow-x:hidden!important}
I'm sure this is a problem which might have many losing sleep over, just like me.
Any help would be hugely appreciated.
As Mac's and on iOS, overflow-x:hidden on the body isn't as forgiving as it is on PCs. If you must have an element that has to appear offscreen, put it in a div that is not wider than the screen and has overflow:hidden on it.
E.g.
.overflow-div { max-width: 100%; position: relative; overflow: hidden; }
.my-animatable-element { position: absolute; right: -660px; }
<body>
<div class="overflow-div">
<div class="my-animatable-element"></div>
</div>
</body>
A link, or code, would really go a long way in helping you solve your problem.
Note: max-width:100% isn't necessary in my simplified example, but it might be in your specific case, which is why I put it in.
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<style type="text/css">
body {
overflow-x:hidden;
}
I had the same problem.
This is what worked for me:
div {
overflow:hidden;
}
I'm working with jQuery Mobile for the first time and I'm having trouble accomplishing what seems like a simple change to the icons on a collapsible set (accordion).
I want to change the icon for each of the headings on a collapsible set to an up arrow for the expanded state and a down arrow for the collapsed state.
I've created a Fiddle that seems to have the same problem with code that I pretty much copied directly from the jQuery mobile site and modified a little.
Any help or pointers on this would be much appreciated. Thanks!
The docs page you refered actually uses the latest Work in Progress version of jquery mobile.So this is a feature we can expect in future versions of JQM.In the current stable version,we will not be able to change the icon by means of specifying a data attribute.
Here is an eg: which uses the Work in Progress version of jqm - http://jsfiddle.net/AAYjF/
But it is advisable to use the stable version.So you can use the following code to acheive this:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
.ui-collapsible .ui-icon{
background-position: -180px 50%;/*Position of up icon in icon sprite*/
}
.ui-collapsible-collapsed .ui-icon{
background-position: -216px 50%;/*Position of down icon in icon sprite*/
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible" >
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
The logic is to use the background position of the down and up icons in the icon sprite for the collapsed and expanded icons
Demo : http://jsfiddle.net/6x8ew/
I'm sure you can improve upon this solution but here is a basic idea on one way to accomplish this without hacking into the JQM source.
$(document).on('pageinit',function(){
$('.ui-collapsible .ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-arrow-u');
$('[data-role=collapsible]')
.on('expand',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');
})
.on('collapse',function(){
$(this).find('.ui-icon').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
});
});
I am using jqm's collapsible events to switch to the appropriate icon.
See my working example.
I haven't done much with jQuery Mobile yet, so take it for what it's worth.
I think you need to put the attributes on the <div data-role="collapsible-set">, not on each data-role="collapsible". Obviously this would only work for all the children, and it wouldn't let you target individual children.
With jquery mobile version 1.4.0, you can accomplish this by having the following code in your CSS file
For custom right arrow
.ui-icon-arrow-r:after {
background: url("Path to your image file") no-repeat scroll 0px 0px transparent;
}
For custom down arrow
.ui-icon-arrow-d:after {
background: url("Path to your image file") no-repeat scroll 0px 0px transparent;
}
I need to open a popup window to a custom size. Using suggestions from jQuery mobile docs I can get the custom size to work when I load the page with ajax (in the same .html document). When I have a separate .html document, it doesn't load the custom width I specify.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<style>
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
max-width: 800px;
margin: 10% auto 15px auto;
}
</style>
</head>
<body>
<div data-role="page" id="popup">
<div data-role="content">
<a data-role="button" href="#" data-rel="back">back</a>
</div>
</div>
</body>
</html>
This is the code. If I link to it within the same file, and just use
popup
It works fine. You can see the css rules that jQuery Mobile says to add if you want to change the width (jQuery Mobile Dialog docs).
I answered my own question. I found that with the ajax loading, when the page is fetched it only gets the content from the target page. If I want to provide some custom CSS to be applied to the target page, I need to have it on the parent page (or the page that is calling the popup).