i have used nested frames,
<!DOCTYPE html>
<html>
<head>
</head>
<frameset rows="200px,500px">
<frame src="topBar.html" > <!-- top frame -->
<frameset cols="30%,70%">
<frame src="leftBar.php" noresize /> <!-- left frame-->
<frame src="rightBar.php" name="rightBar" id="rightBar" frameborder="yes" style="overflow:scroll"/> <!-- left frame--> <!-- right frame-->
</frameset>
</frameset>
</html>
the rightBar.php is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<link href="style/jquery.mobile.scrollview.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile.scrollview.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
$('#page').scroll();
var data = 'cat=drinks' ;
$.ajax
(
{
url:'rgh.php',
type: "POST",
data:data,
success: function (data)
{
$("#loadContent").html(data);
}
}
)
$(".closeBtn").click(function(){
$(".QTPopup").css('display', 'none');
})
});
</script>
</head>
<body>
<div data-role="page" id="page" data-rel="dialog" data-transition="pop">
<div data-role="content" data-position="fixed">
<ul data-role="listview" id="loadContent" data-filter="true" data-scroll="true">
</ul>
</div>
</div>
</body>
</html>
when user clicks the leftBar.php 's options it reflects on rightBar.php and shows the content dynamically, the browser shows the Scroll Bar only for rightBar frame which is fine on PC, but it is not showing on Android device, it shows whole scroll bar to webview, i need only rightBar frame to show scroll-bar in Android webview ? so can anyone help me ?
Related
In a nutshell, I've built an app using HTML/CSS/JS and Phonegap. It's still in testing phase. I have all my app's images saved in Google Cloud Storage (GCS). I have image tags (divs) within my app that needs to pull those images from GCS to the specific div. However, this method of just adding the direct URL only seems to work on iOS devices. What I need to know is, what is the correct method of pulling those images from GCS to my app so that it works on all platforms (iOS, Android, BlackBerry etc)? Do I need to add a line of code in the head of my index.html or does it have something to do with the config.xml? I've been looking for answers on the net, but nothing could give me clear-cut results that works across all platforms.
I'm still fairly new to the whole "app building game", please be gentle.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"/>
<title>App Name</title>
<link href="simple-flat.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1 /jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="General.css" rel="stylesheet" type="text/css"/>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/raleway:n1:default.js" type="text/javascript></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("offline", onOffline, false);
}
function onOffline() {
navigator.notification.alert('Please check your internet connection', function()
{ },'Connection Failure','OK');
window.location = "index.html#offline";
}
</script>
</head>
<body onload="onLoad()">
<div id="cultures" data-role="page" data-theme="a" >
<div data-role="header" id="header" data-theme="a" data-position="fixed">
<h1>Headline</h1>
<div id="image" data-theme="c">
<img src="http://commondatastorage.googleapis.com/about_namibia%2FHimba.jpg" width="100%"/></div>
<div class="headline_bar"><h3>Cultures</h3></div>
</div>
<div data-role="content">
<p>Some copy goes here.</p>
</div>
<div data-role="footer" id="footer" class="ui-bar" data-position="fixed">
</div>
</div>
</body>
</html>
i have created a web app using query mobile and html5 and currently, none of my JS executes in the application.
JS is enabled on Android WebView as Jquery mobile can execute the JS for the library but does not work on an android device.
It works fine on the iOS simulator and on the web browser so i am wondering if there is some kind of hidden settings/implementation i need to handle for android?
here is the error i receive from an onClick event on a simple dialog html that is outputted using phone gap
07-15 09:25:00.621: E/Web Console(2992): Uncaught ReferenceError: uploadTrue is not defined at file:///android_asset/www/itemDetailCarHire.html:2
Here is the itemDetailCarHire html that launches the dialog that executes the onClick.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
<script src="src/script/itemDetailCarHire.js"></script>
<link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" />
<script src="src/jquery.ui.datepicker.js"></script>
<script src="src/jquery.ui.datepicker.mobile.js"></script>
</head>
<body>
<div data-role="page" id="fields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="claimProfileListView" data-inset="true" data-scroll="true">
<h3>Original Receipt:</h3>
<div data-role="fieldcontain"> Upload Reciept </div>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save Claim Item</li>
</ul>
</div>
</div>
</div>
</body>
</html>
When a user clicks the Original receipt component, it will correctly display the dialog called uploadRecieptDialog.html and the code for that is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b" data-position="fixed" >
<h1>Upload Reciept</h1>
</div>
<div data-role="content">
<p>Click the button below to select and upload your Reciept</p>
<h3><a onclick="uploadTrue();" data-role="button" data-theme="c" >upload Reciept</a></h3>
<div data-role="footer" data-position="fixed" data-theme="b" >
</div>
</div>
</div>
</body>
</html>
Here is the updateDetailCarHire.JS
function uploadTrue(){
alert("upload true");
//load previous page
history.back(-1); return false;
alert("UPLOADED");
}
A simple JS as you can see that displays an alert message and goes back to previous screen. on iOS simulator and chrome/safari desktop web browser, it works!
I'm guessing your Javascript isn't executing because cordova is having a problem with your history command.
Check here: in Cordova 1.8.1 - Android history.back() not working
And possibly: Why is javascript:history.go(-1); not working on mobile devices?
Try using history.back();
EDIT: I don't see updateDetailCarHire.JS being included on any of those HTML pages.
I have a problem with AJax/Json petitions with PhoneGap. I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cartelera</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="cordova-2.0.0.js">
</script>
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<script src="my.js">
</script>
<script>
$(document).ready(function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 1 </a></li>');
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 2 </a></li>');
$('#cargaDiv').html('<img src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/images/ajax-loader.gif" /> Cargando...'); // Loading message
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
})
</script>
</head>
<body>
<div data-role="page" id="cartelerafinestrat">
<div data-role="header">
Atras
<h1>IMF Finestrat</h1>
</div>
<div id="cargaDiv">
</div>
<div id="cartelera">
<ul id="ulCartelera" data-role="listview" class="ui-listview" data-theme="d" data_dividertheme="b">
</ul>
</div>
</div>
</body>
</html>
</pre>
I have added in config.xml (/res/xml/) my domain ("http://www.cinesimf.com/*") in the phonegap whitelist.
If I try the code in a navigator in my pc, it works OK, but in Android aplication nevers load.
Your problem depends on a general webkit (and modern browsers) issue.
If you want to do a json request to a cross-domain server you have to modify your manifest file on Android or your plist file non Iphone, inserting the allowed domains where you want to get your data.
You could also do a jsonp request to avoid manifests updates:
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php?callback=?",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
You can have a good explanation about jsonp there: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
I am using JQM 1.1.0 and Cordova 1.5.0.
I have code like this
<!DOCTYPE HTML>
<html>
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.5.0.js"></script>
<!-- Adding jQuery mobile and jQuery scripts & CSS -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet"
href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="css/colors.css">
<script type="text/javascript">
$("#page1").live("pageinit", function(e) {
console.log("pageinit1");
}
$("#page2").live("pageinit", function(e) {
console.log("pageinit2");
}
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content"></div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content"></div>
</div>
</body>
This code is working fine for Android. but in iOS,as soon as the page loads then the pageinit event of page1 doesnt get fired and later on if i changepage to page2 then everything is fine.. Why is this happening?
am not so sure about that but as i know live function has changed in JQ1.7.x and now you will have to use the on() function which has small changes to the way you code your code ..
I just need to write my javaScript functions after data-role="page" to make it working...
I created an app in HTML/CSS. It works fine in the iPhone. Now I'm porting it to Android using PhoneGap in Eclipse. I have used this page to get my starting point: phonegap / phonegap-android-eclipse-quickstart When I follow that tutorial and open it in my eLocity, it starts up correctly, opening the index.html as the home page.
My new index.html page, which replaces the one used in tutorial above, is full of normal HTML <a href="1000.html"> links within <li></li> lists which take you to HTML pages elsewhere in the same folder (www) or the next folder (Chapters/1000.html). But when I start it up in my eLocity tablet, the links won't fire. The <li> area just turns blue as they should, but the pages don't change.
Why would an ordinary HTML link not work? I'm not getting any error messages in Eclipse.
Here's the beginning of index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="minimum-scale=1.0, width=device-width, user-scalable=no" name="viewport">
<link href="Chapters/hymns-style.css" rel="stylesheet" type="text/css">
<link href="Chapters/style.css" rel="stylesheet" type="text/css">
<title>Husting Pocket Hymnal</title>
</head>
<body style="background-color:#00aaff">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<!-- <script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", function() {
alert('initialized');
}, true);
</script>
-->
<div id="content">
<span class="graytitle">Husting Pocket Hymnal</span>
<ul class="pageitem">
<li class="menu">
<span class="name">Hymns A</span>
</li>
<li class="menu">
<span class="name">Hymns B</span>
</li>
Here's the beginning of a page it goes to. ** All of these HTML links work: **
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
<link href="hymns-style.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Hymns A</title>
</head>
<body>
<div id="content">
<span class="graytitle">Hymns A</span>
<br>
<ul class="pageitem">
<li class="menu">
<span class="name"><a href="0300.html">
A debtor to mercy alone
<span class="detailbutton"></span></span></a>
</li>
<li class="menu">
<span class="name"><a href="0301.html">
A lamp in the night, a song in time of sorrow
<span class="detailbutton"></span></span></a>
</li>
Try ...
If that works then it could be a bug / edge case with how the URL handling works at this line: https://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/DroidGap.java#L1028
I found the problem. I can tap on the text and go to the link, but tapping elsewhere on the cell did not work. This is because I had removed the arrow png that belongs at the far right. If the a href tag enclosed the text and that arrow, then the link worked across the entire cell.