I am setting up an app with JqueryMobile. Whenever I click on my navigation the next page appears on top of the current page for a second and then disappears and then the transition starts and the next page appears. Is this a known problem that anyone else is having and if so, how can I fix it. I know there's an issue with flashing transitions but I don't think this is the same. I'm using un-altered jquerymobile docs. Below is my code:
https://gist.github.com/2401211
Your complaint/issue is a common one. The transitions can be especially hideous on an android 2.x devices. Here is a quote form their blog
We did a ton of work leading up to 1.0 to make our transitions as
smooth as possible, but there were two significant things that turned
out to very difficult: the need to scroll the page between transitions
and Android’s poor animation performance. Source
That being said my suggestion would be to update to the JQM version 1.1.0 final.
Use this to get started
<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.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Try this fix:
.ui-page {
-webkit-backface-visibility: hidden;
}
This may be an issue with using the same ID. Check to make sure your ID is different on each of your pages. That's what it sounds like to me
I've been facing with this problem several times, and just when I was going to suicide, found that the problem was in some custom CSS classes, and I've fixed it!
For example, I had in my body declaration:
body{
margin: 0px;
}
Remove margin, and voilá! Something was fixed!
In other app, I found at a custom wrapper class declaration:
.wrapper{
<blabla>
position:absolute;
<blabla>
}
Of course, this "Absolute" forces the engine to render the page at the absolute position, and then, initiates the transition.
So, how to fix your issue?
I recommend that you remark all your .css file, and start testing class by class, try the transition, and when the transition fails, there you have the "disturbing" class.
Try it, and let us know if it fixes the issues to you!
Related
When navigating with $.mobile.changePage("#page2"); I realized that jQM adds 1-3px gap under the header on the next page.
When calling the photolibrary with Cordova to select a photo, the gap will disappear, but I don't need the camera plugin, I want the gap not to appear in the first place.
(I am not talking about the white gap that gets added to the bottom when calling camera plugin - and can be resolved by changing the self web view in MainViewController under viewWillAppear - or any other of the gap issues I found).
The gap I am talking about is between header and ui-content.
I have been working with jQM before and the versions I used in past projects have not caused any similar problem.
I am using jQM 1.4.2, JQuery 1.11.0 and Cordova 3.1.0.
Here are 2 images, I changed to colors to make the problem more obvious.
darkgray -> header
red -> ui-page background
blue -> first (and only) DIV element in ui-content
1 image: no gap - this is if the page is the INDEX page
2 image: this is when the page is page 2 and gets navigated to with changePage
Between header and first DIV in content you can see a gap.
I have commented out every single line of code, except the basic structure and those to color the elements. Plus, the page WILL appear without gap IF it is the MAIN page. However, if I have a different main page and tap on a div which calls $.mobile.changePage("#page2"); the second page will be shown with a gap between header and content.
edit - UPDATE:
I created a clean project just to reproduce this issue. I don't know how to resolve it and if I can't fix this I can't continue with any project, because this happens in every Project with jQM 1.4.2:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<link rel="stylesheet" href="jquery.mobile-1.4.2.css" />
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
<script>
$(document).on('tap', '#gotop2', function(event){
event.preventDefault();
//$.mobile.changePage('#p2');
$.mobile.pageContainer.pagecontainer("change", "#p2")
});
</script>
</head>
<body>
<div data-role="page" id="p1">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 1</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="gotop2">go to page2</div>
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 2</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="blueblock" style="height:20px; width:100%; background-color:#22272c; background-color:blue; padding:0px !important; margin:0px !important;"></div>
</div>
</div>
</body>
Don't forget to include jQ or jQM in the folder.
If you call "/index.html" in you browser and navigate to the second page you will see the gap.
If you call "/index.html#p2" directly in the browser there won't be any gap.
Looking for a workaround to get around this or if there is a better way to resolve the issue I am open to adjusting the code..
Here is the situation:
If I do not use a doctype then the bars icon is appearing just fine within a controlgroup, however as soon as I add the doctype then it seems to flip to the plus icon instead.
The only change is adding the doctype to the top of the file and the icon flips from bars to plus.
Doesn't matter if it is jQuery Mobile 1.3.1 or 1.3.2, having the same results
Has anyone encountered this or found a way around it? I really want the bars icon to be displayed and am trying to avoid not using the doctype declaration so the code can validate properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#import url('include/jquery.mobile-1.3.2.min.css');
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" />
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="ui-body">
Test
</div>
</div>
</div>
</body>
</html>
EDIT: Same issue occurs with the GRID icon
This is just a typo. Replace
data-icon="Bars"
with
data-icon="bars"
And your'e good to go. You have to follow the exact case when it comes to images. The full set can be found here : http://api.jquerymobile.com/icons/
Here's a demo : http://jsfiddle.net/hungerpain/cpRh2/1/
I am trying to accomplish a simple slide in popup animation in jquery mobile. I tested this on the desktop browser (chrome and firefox) and works fine. But in mobile i get the following results on pressing the button:
The popup comes in fine but creates a white space to the right of the screen which is visible if the user slides to the right. Dismissing the popup removes this white space. This only happens if the popup is triggered using "slide" transition. Does anyone know the reason for this behavior.
I can manually resize the window but I am not sure what event fires after the popup is done sliding in.
(I had images to show this but I don't have 10 rep so I cannot post them :( )
Does anyone know why this is happening. I am testing with Droid Razr Maxx (running Jelly Bean). I have tested with chrome, firefox and the default browser on the device. They all produce the same result. Here is my code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
Pop Up
<div data-role="popup" id="pop" data-overlay-theme="a">
<p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
</div>
</div>
</body>
</html>
Upon further research, I found out that this issue was fixed in the latest version of jquery mobile (1.4) which is still in alpha phase.
http://jsbin.com/edeluh/32
Why does .hide() not work on elements within an jquery ui accordion? It does work before the call to $("#accordion").accordion(), but not afterwards. The .show() method works fine before and after. The .toggle() method works half (only the show part).
<html>
<head>
<link href="jquery-ui-1.9.1.custom/css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet">
<script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script>
<script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<script>
$(function()
{
//$("#inside").hide("fade"); /* <-- this does work */
$("#accordion").accordion();
$("#inside").hide("fade"); /* <-- but this doesn't */
});
</script>
</head>
<body>
<div id="accordion">
<h3>Page 1</h3>
<div id="page1">Blah</div>
<h3>Page 2</h3>
<div id="page2">
<div id="inside">Blah too</div>
</div>
</div>
</body>
</html>
Please explain not only how to solve it in another way, but more importantly why it doesn't work this way.
Based on the fact that calling hide() without the "fade" parameter, actually works (see here), I would say it has to do with the way that fade is implemented. The fade effect might be depending on the fact that the element is visible, since when you use hide("fade") when the div is showing it works (see here).
This happens because of accordion's use of hide. The first time a panel is shown, the contents are shown as well, even if they were previously hidden, so if the panel is not open when you hide the contents, they will appear when you first select that panel. See juan.facorro's explanation as it provides a correct explanation as to what's not working.
Here's one possible start of a workaround by showing the panel containing #inside initially, hiding it, then showing the first panel instead: http://jsfiddle.net/cjc343/KuJJm/2/
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;
}