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.
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 help. I am just a beginner in writing web pages, so I hope my question isnt silly. The problem is, that my page doesnt load on a first attempt on a mobile device. (On desktop PC it works normally). I will give you a little background, what steps I made before this problem happened.
I have created websites with lightbox script loading at the start of the page. (I have adjusted the script to work in lower resolutions on mobile phones first) It made it work not properly, when it was opened on a mobile device. The windows were not fitting well on the screen etc..
I have solved this by putting the script at the end of html body. The lightbox works well now, but the page with the gallery doesnt open on a first attempt. I have to refresh the page and then the page appears normally and works without problems.
I have been searching for possible solution to this problem through the whole web, but with no success.
I am attaching my code (I have avoided some metatags, paragraphs with text, navigating toolbar etc. to shorten it and make it easier for you to read it and decode the problem.
I will be glad for any help I can get. :) Thanks a lot. Please, let me know on my e-mail, when answered or a problem with my question.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>...</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="canonical" href="http://www.merryberry.eu/galerie.html">
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="stylesheetmobil.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div class="Body">
<div class="header">
<div class="menu">
<nav id="primary_nav_wrap"> </nav>
</div>
</div>
<div class="picture">
<img src="Images/barvenidekorace.jpg" style="width: 100%; height: auto;">
</div>
<div class="text"></div>
<div class="footer"></div>
</div>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</body>
</html>
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 have an index.html with an href button to another page to display a pie chart, but when i click on the button the chart doesn't appear, then if i refresh the page the chart appears.
here is the html page .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>the Stats</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
</div><!-- /header -->
<div data-role="content">
<img id='img' src="HSV-logo.png" width=150 />
</div> <!--/content -->
<div class="content-primary">
<ul data-role="listview">
<li><img src="images/gf.png" alt="France" class="ui-li-icon">France </li>
<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain </li>
<li><img src="images/gbl.png" alt="Belgium" class="ui-li-icon">Belgium </li> </ul>
</div>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
</html>
here is the code of the linked page for the pie chart .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HybridStatsViewer</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<!--link rel="stylesheet" href="demo-print.css"media="print"-->
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
<script src="raphael.js"></script>
<script src="pie-10.js"></script>
<script src="moteur.js"></script>
</head>
<body onload="moteur();">
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
Back
</div><!-- /header -->
<div id ="holder">
</div>
<a id="bt" href="France-30.html" data-mini="true" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Slide</a>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
You didn't post your javascript code but I think I know what is your problem.
All jQuery plugins that work with page height and width (in your case pie chart) MUST be initialized through pageshow event. This is because jQuery Mobile pages has correct height only at that point. So if page height is 0 plugin will initialize but with height set to 0.
So if you are doing it during the document ready or any other page event, switch your pie chart plugin initialization to pageshow evenet.
If you don't know what pageshow event is take a look at my other detailed answer: jQuery Mobile: document ready vs page events
EDIT :
I have fixed your problem.
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
Read more about it in my other answer other answer: Why I have to put all the script to index.html in jquery mobile
Add the below code inside pie chart page and remove onload="moteur();" function.
<script>
$(document).on('pageshow', '[data-role=page]', function () {
moteur();
});
</script>
Any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the head of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume head scripts are only expected to execute once per browsing session.
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
Another approach for page-specific scripting would be to include scripts at the end of the body element when no data-role=page element is defined, or inside the first data-role=page element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a data-role="page" element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.
Check our this link for complete details.....
http://demos.jquerymobile.com/1.2.0-beta.1/docs/pages/page-scripting.html
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