I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
Related
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...
Hello friends i m using angularjs with jquery mobile in my app and done routing with mobileangular adapter javascript that will handle routing (jquery-mobile-angular-adapter-standalone.js).
i have used angularjs for data binding , underscorejs for data processing and routing for my dynamic template. My app work well with routing in forward direction but when i use
back button which to not carry back to my previous page. my url shown in address bar is the same that of previous page but page do not display with previous data
i m placing all my code below
index.html
<!doctype html>
<html lang="en" ng-app="work">
<head>
<meta charset="utf-8">
s
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css"/>
<script src="js/components/jquery-mobile-angular-adapter-standalone.js" type="text/javascript"></script>
<script src="js/components/angular-resource.min.js" type="text/javascript"></script>
<script src="js/components/underscore-min.js" type="text/javascript"></script>
<script src="js/app/controllers.js"></script>
<script src="js/app/services.js"></script>
<script src="js/app/app.js"></script>
</head>
<body>
<div data-role="page">
</div>
</body>
</html>
html use to display da
showMenuView.html
<div id="menu-list" data-role="page" ng-controller="showMenuController">
<div data-role="header">
Back
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li ng-repeat="menuItem in mainMenuItems">
{{menuItem.name}}
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<p>Total {{mainMenuItems.length}} menu item</p>
</div>
</div>
Controller.js
'use strict';
function showMenuController($scope, $location, Data, $routeParams) {
Data.query(function(data) {
$scope.foo = data;
$scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:$routeParams.parent});
});
$scope.selectMenuItem = function (id) {
$scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:id});
}
}
service.js
angular.module('dataservices', ['ngResource']).
factory('Data', function($resource){
return $resource('data/data.json', {}, {
query: {method:'GET',isArray:false}
});
});
app.js
angular.module('work', ['dataservices'])
.config(['$locationProvider','$routeProvider', function($locationProvider,$routeProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
//.when('/showMenu', {parent:'none',templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
.when('/showMenu/:parent', {templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
.otherwise({redirectTo: '/showMenu/none'})
;
}]);
pls help me ,thanks in advance
I have not worked on it myself, but while exploring on whether JQM and angular can work together I stumbled upon this page.
http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/
he makes a good point (i.e. both angular and JQM uses and manipulates the url) that appears to be valid in your case also. he suggests to let JQM do this. I think you can also use different special character to process url i.e. angular uses ! and JQM uses # or something like that.
I am trying to create a very simple phone gap application for iOS. I am using query mobile. the problem is, that i can't get javascript event to fire on button click.
Code i have now:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p>Show alert</p>
</div>
</div>
</body>
</html>
I tried multiple solutions to fix my problem, but none of them works. When have button with # in href, it doesn't event change the color on click. When i add url, it changes color. But it never call javascript function.
Another problem is, that document.addEventListener("deviceready", onDeviceReady, false); works only in the index page. If i press button in initial page which redirects to another page, OnDeviceReady function is never called.
Anybody has any ideas?
onDeviceReady() is only called once (when the device (ie Cordova) is ready). You'll want $(document).on('pageinit', '#pageid', function() { }); for something to fire every time the page is navigated to.
In the body tag you need to add tag and the onBodyLoad() function in the javascript should be like:
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
I am a total noob with phone gap and query mobile, so i made a stupid mistake. Problem is, that it loads not whole page, when i click on button, but only body part. This means, that it uses only javascript which is in the first page. And that was my problem. Now i have putted all javascript into separate file (all javascript for both files) and it works.
Try the following with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
$(function() {
$("#my_link").click(function() {
showAlert();
});
});
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p><a id="my_link" href="#" data-role="button">Show alert</a></p>
</div>
</div>
</body>
</html>
Hope this helps. Let me know about your results.
Even though i had z-index set higher for the md-button it still wouldn't click on iOS. It clicked fine on Android. I had to set a parent container in my case the <md-subheader> to z-index: -1; then it worked.
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>
What am I doing wrong here? I'm trying to get started with jQuery UI tabs.
Right now it's not working.
I thought I'd use the Google version so that it would be cached.
I'd like to find where Google has ui.tabs.js as well.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
$("#myTabs").tabs();
});
</script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
</head>
<body>
<ul id="myTabs">
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be shown when its tab is clicked.</div>
</body>
</html>
You need to enclose all the tabs in the same continer:
<div id="myTabs">
<ul>
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be shown when its tab is clicked.</div>
</div>