It seems like jQuery mobile is appending a loading message at the start up page. I really don't know what's going on but consider the following simple snippet:
<!DOCTYPE html>
<html>
<head>
<title>sadFace</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<h1>;__;</h1>
</body>
</html>
I even have to scroll down to see the loading message. So I thought it might happen cause I'm not following the typical jQuery mobile page anatomy but:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>;_;</h1>
</div><!-- /header -->
<div data-role="content">
<p>Same shit, different page.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>need cookies :C</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
the same. I'm totally stunned by this behaviour. I also test jQuery1.0rc2 with the same result even though I started my project from last week and it looks fine. What the hell is going on <.<
Looking up in jQuery Mobile' js I think this initializePage: function() is responsible for the message. I could comment out
//cue page loading message
$.mobile.showPageLoadingMsg();
or set autoInitializePage: false but I rather prefer a solution which is not involving a modified jQuery file (unless it's a bug).
You have to add the CSS too, then it will be fine:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
In detail:
It always puts the following HTML at the bottom of your body:
<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>
This is the relevant CSS (so maybe you can play with it yourself if you want)
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
The function showPageLoadingMsg adds the CSS class '.ui loading' to the HTML tag and then it becomes visible
You can stop the autoInitializePage by using the below BEFORE you load the jquery-mobile library
jQuery(document).on("mobileinit", function() {
jQuery.mobile.autoInitializePage = false;
});
More info here: http://api.jquerymobile.com/global-config/
Add this to the top of your JS file
$.mobile.autoInitializePage = false;
I had this problem the word 'loading' was constant at the end (bottom) of the site and it sucks/bad.
I solved it like this: in google chrome, in inspect hover word 'loading', copy element. I created a style and as an attribute: display:none!important;
It's:
body > div.ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
display: none !important;
}
Related
I've written this to a html page and the output is like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div style="margin: 0 auto; width:100%; height:1200px;">
<object type="text/html" data="http://www.live24sports.com"
style="width:100%; height:100%; margin:1%;">
</object>
</div>
<div style="margin: 0 auto; width:100%; height:1200px;">
<object type="text/html" data="http://paste.hgcommunity.net"
style="width:100%; height:100%; margin:1%;">
</object>
</div>
</body>
</html>
i think you want to get data attribute. you can use the below method to get any attribute.
if you can use jquery
$('object').attr('data');
or with plain javascript
document.querySelector('object').getAttribute("data");
edit
since you have multiple objects you can use
document.querySelectorAll('object')
to get a list of all objects and then use a loop to getAttribute('data'); on each item.
Trying to make a dialog box in jquerymobile 1.4.5 a larger width. According to an example AND the directions on http://demos.jquerymobile.com/1.4.5/pages-dialog/
I think this should work (but it doesn't seem to). I copied their example and then overrode the .ui-dialog-contain attribute as documented. I'm using a Mac/Chrome to render the page. And I have seen this post before, but I can't get anyone's solution to work. I think some of that might be because of old versions of jquerymobile.
.ui-dialog-contain {
max-width: 200px;
}
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog example - jQuery Mobile Demos</title>
<link href="favicon.ico" rel="shortcut icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<style type="text/css"> {
.ui-dialog-contain {
max-width: 1500px;
}
}
</style>
</head>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
If iframe is in the page with div which has position fixed and in iframe there is some element with position fixed, iframe will disappear after typing in some input/textarea field in iframe.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="position: fixed; width: 250px; height: 250px; top: 0px; right: 0px; border: solid 2px red;">
<iframe src="iframe.html" style="width: 250px; height: 250px;"></iframe>
</div>
</body>
</html>
iframe.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="position: fixed">
<input type="text" placeholder="type here" /><br>
start typing above in iPad and after 1st char this iframe will be moved to the left side and after 2nd char it will completely dissapear
(tested on iPad 2; iOS 9.0.2; Safari 601.1)
</div>
</body>
</html>
demo: http://goo.gl/W0VDbh
Do you have idea how to fix it? Note: positions fixed can not be removed/replaced, in index.html can not add global styles - just for div and its children elements.
The fixed header will not stay at the top of the page for me. It sits on top of a page that has several number inputs that were added via javascript. As the user fills out these inputs the header disappears as expected. However, the header will reapear in the middle of the page if the user taps out of the text boxes. The user has to tap twice to get it to move back to the top of the page.
/Edit
Here is another piece of important info. This is happening when I use the next button to move to the next text box as I fill in the information.
I have create a jsfiddle example of my page at http://jsfiddle.net/7PZPy/1/ . It won't show you the bug, but it should give you a good idea of what the page is about.
*/
This is a phonegap application running on iPhones and iPads. I am using JQM 1.3.1.
My research has caused me to try using the jquery full page mode and a fix position via CSS. I have also tried removing everything that was not inside of the h1 tags. Alas, the header moves up and down the page as long as the data position is set to fixed. My html is below. Please help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" href="css/ims-theme.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-migrate.js"></script>
<script type="text/javascript" src="js/jquerymobile.js"></script>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/WaitingDialog.js"></script>
<script type="text/javascript" src="js/UniqueIdentifier.js"></script>
<script type="text/javascript" src="js/iti.js"></script>
<title>IMS Field Support</title>
</head>
<body>
<div data-role="page" id="invPage">
<script type="text/javascript" src="js/inventory.js"></script>
<div data-role="header" data-position="fixed">
<h1>Inventory</h1>
<div id="divAlert" style="display:none">
<a href="resolve.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true" class="ui-btn-right" >Alert</a>
</div>
</div>
<div id="inventoryContent" data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> Inventory</li>
<li>Technician</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</body>
</html>
The data-position="fixed" is used to make those smartphone-like headers that disapear with some clicks on body or some other events i dont care,
for what you want, you can just style your header with css with something like:
#myheader{
position: fixed !important;
width:100%;
top: 0px;
}
Works like a charm
PS: The !important overwrites any jquerymobile attempt to change position attribute, it may not be needed
Had you tried to also include the all three attributes to your header?
It works for me with all these specified:
data-position="fixed"
data-tap-toggle="false"
data-update-page-padding ="false"
Here is the code:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>
Hope this help!
In my case, I fixed this bug by removing "top: 0" for my "position: fixed"
And it's fix! Weird I know...
Couldn't find anyone having the same issue (search results usually return ridiculous coding errors with jquery and css, but that's not the case here.
Problem:
I have with classes 'active', and 'inactive'.
On inactive - the list item will have a background image 1
on active - hte list item will have background image 2
<ul>
<li class="active"><a></a></li>
<li class="inactive"><a></a></li>
</ul>
On click, it's supposed to switch them right... example code:
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
With JQUERY MOBILE this code doesn't work, I've tried adding the class first, then removing... also tried toggleclass for the active.
If I removing jquery mobile from being included, it works perfectly.
Add jquery mobile library back in, doesn't work.
Not a css problem.
Upon inspection with firebug, it seems removing classes works find, it's when it tries to add it?
This works:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<style type="text/css">
.inactive {color:red;}
.active {color:blue;}
</style>
<script>
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
$('ul li.active>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('active').addClass('inactive');
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>index.html</h1>
</div><!-- /header -->
<div data-role="content">
<ul>
<li class="active"><a>One</a></li>
<li class="inactive"><a>Two</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>