I am working on creating pages for mobile devices with jQuery Mobile.
Here is the basic page template I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Page Title</h1>
</div>
<div data-role="content">
<div data-role="content" data-theme="a">
Page Content
</div>
</div>
</div>
</body>
</html>
When I try to view this on a mobile phone (Samsung Galaxy, iPhone, etc.) the page width is far too large (forcing scrolling on small resolution devices or very small text on larger resolution devices.)
Can anyone tell me what I am doing wrong?
Thank-you!
try adding this in the head
<head>
.....
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
also one <div data-role="content"> ... </div> is enough
You need to add a meta viewport tag to your head to set the page width to device width. It's covered in the blog posts at jquerymobile and updated docs:
jquerymobile.com/test/
I think the multiple data-role="content" are causing a styling issue. The Anatomy of a Page does not use multiple content data-role and the boiler plate template does not either.
It probably has something to do with your CSS. Check your <body>'s width and height.
For best results, you should use CSS media queries and check for screen resolution, thus having a different style depending on the user's screen.
For further reading:
http://www.w3.org/TR/css3-mediaqueries/
This might have something to do with <div data-role="content">.
Not sure you can have two of those on a page.
<div data-role="content">
<div data-role="content" data-theme="a">
Page Content
</div>
</div>
The docs don't suggest there could be more than one: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html
Related
I have a simple two page website developed using jQuery mobile framework. I had the need to use Datebox plugin for selection of times. Both pages of my website are in the same .php file separated by divs with data-role="page" appropriately.
My only problem is that if the datebox exists in the first page of the webpage, it loads properly, but in any other page, its icons are messed up.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
<header data-role="header" data-position="fixed">
<h1>Home</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
<div data-role="page" id="onoff">
<header data-role="header" data-position="fixed">
<h1>ONOFF</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
The following images show the issue. On page load, the first div with page-role="page" and id="index" is loaded and the datebox icon works as intended:
But if I navigate to the second page using the footer navbar ON/OFF tab, I get this weird icon placement:
Please help me figure out what is going wrong here.
Hmm, I'm not sure why this is but using local files instead of the CDN links in the head enabled me to use the datebox plugin across pages. The files were generated using the download builder found here:
http://dev.jtsage.com/DateBox/builder/
user3889963 hit the nail on the head.
Download the source files for JQM for Datebox and then call them directly within your head.
<script src="../jtsage-datebox.min.js" type="text/javascript"></script>
<link href="../jtsage-datebox.min.css" rel="stylesheet">
This previous question shows there is a problem with using the plugin via the CDN Jquery Mobile DateBox plugin only working when linked directly to page
Here is it working with the files installed directly.
Unique Naming is the problem.
Within both pages you are calling the datebox item by the same name, so only the first one gets styled correctly.
Just rename the second page as datebox2 this should fix the problem. As the label for searches for the first unique ID of "datebox" and styles that one.
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox2">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
I need to be able to choose when the jquery dialog opens up but nothing i seem to do works.
so far ive tried this
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
Open Dialog Popup
Test
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>But wait theres more!</h1>
</div>
<div data-role="main" class="ui-content">
<h2 style="text-align: center;">Would you like an exclusive offer?</h2>
Sounds Good!
No Thanks, Take me back..
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</div>
<script>
$(document).ready(function(){
console.log(document.body.scrollTop);
if(document.body.scrollTop === 0)
{
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
}
});
</script>
</body>
</html>
which works but when i change the if statement in the javascript it breaks also if i remove the anchor tag at the top it just doesnt show... jQuery mobile has me confused.
So anyway my question is how do manually make a dialog box show on the page, i would prefer it to show on the same page and not another page.
use this:
$("#myPopupDialog").addClass("ui-page-active ui-page ui-page-theme-a")
I am trying to build my first project for iOS using PhoneGap. I have picked up an example from this page:
http://www.codeproject.com/Articles/579532/Building-an-iPhone-App-using-jQuery-Mobile
And my code looks like this after changing reference to 1.4.1 ans 1.9:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Task Timer</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Edit
<h1>Task Timer-1</h1>
Add
</div>
<div data-role="content">
<ul id="taskList" data-role="listview">
<li onclick="alert(1)">Task 1</li>
<li onclick="alert(2)">Task 2</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
About
</div>
</div>
</body>
</html>
This page, if you copy to an html file will display formatted text. However when I copy the App to iPhone it displays simple text.
Can someone please tell me what I am doing wrong?
I think I have just solved the issue.
I made a reference to cordova.js in main html file. And as a precaution copied cordova.js to www folder. And the text started appearing formatted the JQM way.
I have a page with some nabars, and when the "My Activity" navbar is clicked I want it to do something on load, and currently for testing purposes, I am just trying to alert a message to screen on load, but since it is a js file being called I am not sure, what Jquery mobile load function to use?
here is my html for the page:
<html>
<head>
<title>My Activity</title>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.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>
<script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-id="pagetabs" data-theme="a" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Facebook</li>
<li>YouTube</li>
<li>My Activity</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"><h5>Social Stream</h5></div>
</div>
<script src="my_activity.js"></script>
</body>
</html>
and in my my_activity.js file I have tried different, page load functions. I tried the following, that only gets fired when you manually refresh the browser, doesn't get fired when you click on the navbar tab
$(document).on('pageinit', '[data-role="page"]', function(){
alert("hello");
});
Put this line:
<script src="my_activity.js"></script>
Inside a page div, like this:
<div data-role="page">
<div data-role="header" data-id="pagetabs" data-theme="a" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Facebook</li>
<li>YouTube</li>
<li>My Activity</li>
</ul>
</div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"><h5>Social Stream</h5></div>
<script src="my_activity.js"></script>
</div>
You are suffering from a classic jQuery Mobile problem. This topic is not discussed as a part of an official documentation so I will try to explain it to you.
When jQuery Mobile loads additional HTML pages it only loads page div (data-role="page"=, everything else is stripped. This is because HEAD already exist inside a DOM and another HEAD is not needs, same goes for a rest of the page.
If you want to find more about it take a look at my blog ARTICLE that discuss this topic. There you will find a better description plus few solutions with examples. Read it carefully.
I've added a reference to Jquery Mobile on my website (http://www.simpleprods.com) to get the events vmousedown, vmouseup and such. I only need those, though JQuery mobile annoyingly added some ugly, automatic loading message to my web page. It's 100% coming from the JQuery mobile. I only want vmousedown, vmouseup and vmousemove, I don't need any loading message and that orange box. I already found out how to cancel the message but the orange box just can't be rid of.
Anyone knows what to do? I will be glad if someone can tell me how to just get vmousedown, vmouseup and vmousemove without all the other stuff that JQuery mobile has...
You can rebuild jQuery Mobile framework to have only functionality you need.
Go to this site:
http://jquerymobile.com/download-builder/
select:
Virtual Mouse (vmouse) Bindings
after that just click Build My Download.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="jquery.mobile.custom.js"></script>
<script>
$(document).on('vmousedown', '[data-role="content"]', function(){
alert('asdas');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div><p></p>
<div data-role="content" style="height: 100px; width: 500px; background: #aabbcc;">
<div data-role="popup" id="initialpopup" data-overlay-theme="a" data-theme="a">Foobar</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
You only need to provide a jquery.mobile.custom.js file from builder tool.
Make sure you aren't including scripts inside the <body> tag. That can cause the loading tag to show up when it shouldn't.