I am using the below code to display menu in a native popup form, when user clicks on menu icon on header part, but it simply the shows a blank page with a loader. Please anyone see what is the wrong in the below code
<!DOCTYPE HTML>
<html>
<head>
<title>IRetail</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Toast-Plugin.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ScanditSDK.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.3.2.min.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0rc1.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript">
/*function success(result) {
var barcode = result[0];
//var symbology = result[1];
document.getElementById("product_id").value = barcode;
$('#product_id').keyup();
}
function failure(error) {
alert("Failed: " + error);
}
function scanBarcode() {
cordova.exec(success, failure, "ScanditSDK", "scan",
["y5TRWAxOEeKeEGfJ+mo2k17YexeY5gnQXlsZD8bHHPY",
{"beep": true,
"1DScanning": true,
"2DScanning": true,
"scanningHotspot": "0.5/0.5",
"vibrate": true}]);
}*/
/*function showHint() {
//alert("Please meet the cash counter to know about offer");
Toast.longshow("Please meet the cash counter to know about offer");
}*/
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<header data-role="header">
<h1>Xlogix</h1>
Menu
<div data-role='popup' id='mainMenu' data-theme='d'>
<ul data-role='listview' data-inset='true' style='min-width:210px;' data-theme='d'>
<li data-role='divider' data-theme='a'>Choose an action</li>
<li data-icon='false'><a href='#' onclick='addQty()'>Add Quantity</a></li>
<li data-icon='false'>Delete</li>
</ul>
</div>
</header>
<article data-role="content" id="product_list">
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Scan</li>
<li>Manual</li>
<li>Checkout</li>
<li>Cancel</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Related
I create a App which Phonegap on IOS, where I need to play sounds for specified actions.
To play the sound from a url works fine, but not from a local source. I tried different things.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sisMedia.css"/>
<link rel="stylesheet" href="css/sisMedia_custom.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jqm_custom.js"></script>
<script src="js/jquery-validation/jquery.validate.min.js"></script>
<title>Einlasskontrolle</title>
</head>
<body>
<div data-role="header" id="header" data-position="fixed" data-theme="a">
<h1>Audiotest</h1>
</div><!-- /header -->
<div data-role="page" data-title="Einlasskontrolle">
<div role="main" class="ui-content">
<button onclick="playAudio('audio/ok.mp3')">Play</button>
<button onclick="playAudio('audio/ok.mp3',true)">Play</button>
<button onclick="playAudio('https://test.sistecs.de/sismedia/files/admin/downloads/ok.mp3')">Play</button>
<script>
function playAudio(src, absolute) {
if (absolute == true) {
src = getPhoneGapPath() + src;
}
if (device.platform == 'Android') {
src = 'file://' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('error ' + e.message);
}
function getPhoneGapPath() {
var path = window.location.pathname;
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
path = path.substr(path, path.length - sizefilename);
return path;
}
</script>
</div>
</div>
<div data-role="footer" id="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Scan</li>
<li>Setup</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Can you help me?
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="reviewsPage">
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
});
});
</script>
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("mobileinit", function() {
});
$(document).bind('pageshow', '#twitterPage', function(event, ui) {
$(document).on('click', '[data-rel=back]', function() {
$.mobile.changePage('index.html');
});
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
Home
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
Here I have link when the link is clicked tweet.html file will be called. But when I clicked the back button I will be directed to the previous page without any error. But second time onwards when I click the back button I will be directed to the previous page and comes to the current page again.
$("#mybtn").unbind();`
unbind event will prevent this
I replace a listview item in a jQuery mobile page based on some condition (date of the month, whatever) and I appear to be able to apply the styling only partially. The example below formats the new listview item partially correct, the link is missing its styling. What I am missing here?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../js/jquery.mobile-1.4.0-beta.1.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.0-beta.1.min.js"></script>
<script type="text/javascript">
$(document).delegate("#index", "pageinit", function() {
var newItem;
if (false) {
newItem = $("#templ1")[0].innerHTML
} else {
newItem = $("#templ2")[0].innerHTML
}
$("#item1")[0].innerHTML = newItem;
$("#item1").parent().listview("refresh");
});
</script>
<meta charset="utf-8">
</head>
<body>
<div data-role="page" id="index">
<script id="templ1" type="text/template">
<li id="item1">item1 templ1</li>
</script>
<script id="templ2" type="text/template">
<li id="item1">item1 templ2</li>
</script>
<div data-role="header" data-position="fixed">
<h1>test</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">divider 1</li>
<li id="item1">item1</li>
</ul>
</div>
</div>
</body>
</html>
I'm trying to create a slide out panel for my navigation for an ios app using phonegap. The problems occur when I get to the page below and the JSON starts loading. First of all I get this error in the console of xcode:
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
After all the images load, my css3 transition is really choppy, even though it runs smoothly on every other page. What I'm wondering is if the AJAX script is constantly going out and trying to retrieve those images that have errors. Therefore I have an unending script that is causing ios to run choppy. Is there a way to close the script after it retrieves the images or do you have another idea on how to fix this? Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><div><img src="img/home-icon-white.png" /></div>Home</li>
<li class="where"><div><img src="img/where-icon-gray.png" /></div>Where</li>
<li class="series"><div><img src="img/watch-icon-gray.png" /></div>Series</li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>
The html below generates a google map. However, when I hover over the map, the cursor does not change from an arrow to a hand like the one in the jquery mobile example http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map. I am testing on Safari under the iPhone user agent.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/googlemaps.js" type="text/javascript"></script>
</head>
<body>
<div class="container" id="container">
<div class="page" data-role="page">
<header data-role="header" data-position="inline" data-theme="b" data-position="fixed"></header>
<div data-role="content">
<div id="map" class="gmaps4rails_map"></div>
</div>
<footer data-role="footer" data-theme="b">
</footer>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.center_latitude = "37.7668452";
Gmaps.map.map_options.center_longitude = "-122.2537803";
Gmaps.map.map_options.disableDefaultUI = true;
Gmaps.map.map_options.draggable = true;
Gmaps.map.initialize();
Gmaps.map.markers = [{"title":"Test","lat":"37.7668452","lng":"-122.2537803"}];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
</div>
</div>
</body>
</html>
What is the code missing and/or is Google-Maps-for-Rails mobile enabled?
Thanks!
Google-Maps-for-Rails is mobile enabled. The map that appears on mobile is an image and can't be dragged on a desktop safari browser.