I am new to web dev and android and am trying to develop a web app with phone gap and also using jquery mobile for that.
I am trying to view and display my webpage within the mobile screen with headers and footers also added through jquery code.
The code which i have written to display the webpage does display for eg http://www.msn.com but when i give for eg http://46.137.... (obviously thats a incomplete address) it does not work . Bytheway the alert is shown in both the cases. Below is the code
<div id="cnt" data-role="content">
<script>
$("#cnt").load("http://46.137....", function() {
alert('Load was performed.');
});
</script>
<!-- <iframe src="http://46.137...."></iframe> -->
</div><!-- /content -->
Hey #LivingThing try like this,
...
<div id="video1" data-role="content">
<iframe id="cnt" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
...
<script>
function l() {
document.getElementById('cnt').src = "http://www.cnn.com/US/index.html"
}
$(window).load(function() {
l()
alert('Load was performed.');
});
</script>
All this into <div data-role="page">
I hope this helps. :)
Related
I am working on building an mobile application on apache cordova. I am using the latest version 9.0.0 (cordova-lib#9.0.1).
I have created the index.html
The code works great on cordova browser. But it do not run on android device. I have not checked the emulator, because my system do not support emulators (you can say hardware acceleration fails).
So I install the apk on my android phone. But the app do not work.
Here is my code:-
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/swipe.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>Swipe Left</h1>
</div>
<div data-role="content">
<p>Swipe Left to get to the next page.</p>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<h1>Swipe Right</h1>
</div>
<div data-role="content">
<p>Swipe Right to get to the next page.</p>
</div>
</div>
</body>
</html>
Below is my swipe.js
$(document).delegate("#firstpage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#secondpage", {
});
});
})
$(document).delegate("#secondpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#firstpage", {
});
});
});
Could any one would suggest how to achieve the page swipe in apache cordova.
What I want?
I want to go to next page(or div) by swiping my fingers on the mobile screen.
I have done searching all the web, but the code works in browser but not on android device.
Any help would be appreciated.
You should debug the app running on the phone with Chrome Device Inspector.
Anyway, try moving your JS and CSS resources to your local path in order to embed them with the app, probably their download is being blocked due to security policies.
I'm developing my first phonegap application. I am trying to get some datas from a web server and then show them in the collapsible list. However, I couldn't add datas to list dynamically. Additionally, the list structure is shown in web page but i couldn't see anything on the android emulator. I just see black page on it. How can solve these problems? Can anyone help about that? Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<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.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"
></script>
</head>
<body>
jQuery Mobile Collapsibles
<div id = "outer" data-role="content">
<div id="list" data-role="collapsible-set">
<div id="first" data-role="collapsible">
<h3>Güvenlik</h3>
<p id="guvenlik">I'm the expanded content.</p>
</div>
<div id="second" data-role="collapsible">
<h3>Sağlık</h3>
<p id="saglik">I'm the expanded content.</p>
</div>
<div id="third" data-role="collapsible">
<h3>Diğer Servisler</h3>
<p id="diger">I'm the expanded content.</p>
</div>
</div>
<button id="Sorgula">Sorgula</button>
</div>
<script>
$(document).ready(function()
{
...
});
</script>
</body>
</html>
You can insert items from list like I did, or you can just write it as inside the each function.
The find call at the end is just to close them when it ends.
$.each(list, function(index, value) {
$("#container").append('<div data-role="collapsible" data-iconpos="right" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child ui-last-child">'+
'<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">'+value.name+
'<ul data-role="listview">'+some_li_list+'</ul>'+
'</div>');
});
$('#container').find('div[data-role=collapsible]').collapsible();
I am using mobile Jquery, phonegap to develop a mobile application.
Upon selectioin of item, I am generating a new dynamic page;
with data-role="page" and id="bar"
So my code becomes like this.
<script type="text/javascript" >
function showCategory( urlObj, options )
{
var alphaName = urlObj.hash.replace( /.*aplha=/, "" ),
var $page = $('<div data-role="page" id="bar">
<div data-role="content"> <a href="#bar?aplha='+previous+'>'+previous+'</a>
<img src="img/alphabets/'+alphaName+'.png" onclick="playAudio('+alphaName+')" />
'+next+'
</div> <div data-role="footer" data-position= "fixed"> <h4>
Back to Categories</h4> </div> </div>');
}
</script>
I have tried almost everything to get the alert on alphaName on onclick=playAudio but all in vian. I know the problem is in giving qoutes, but somewhow I cannot figure the right way.
If anyone could help please
Try "on" bind method
As of Jquery 1.7+ the better approach is to use on method.
$(document).on('click', 'img', function ()
{
alert('image is clicked')
});
Thanks
AB
I have a Jquery Mobile Dialog box as written below:
<div data-role="dialog" id="styles" data-theme="a">
<div data-role="header" class="header">
<h1>Styles</h1>
</div>
<!-- /header -->
<div data-role="content" data-scroll="true" data-theme="a">
<div class="scroll">
<ul data-role="listview" id="mylist">
</ul>
</div>
</div>
<!-- /content -->
<div data-role="footer" class="footermodal">
<h1>↕ Please Scroll ↕</h1>
</div>
<!-- /footer -->
</div>
The ul content needs to be scrollable. In ios it is. Also in Android 4+ is is. But in Android 2.2.2 the content will not scroll. I have tried adding:
data-scroll="true"
Doesn't work. There is no style on it what so ever except for a height at this minute in time, and of course the jquery mobile 'theme' but i have removed that and it still doesn't scroll:
.scroll{
height:320px;
overflow: scroll;
}
I do no understand why it is not scrolling in Android 2.2.2. Does anyone know of this problem, have a solution or any help what so ever? Its driving me crazy. :/
have a look at http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
All android versions before 3.0 are bugged with overflow:scroll or auto (bug info).
From the article from Chris Barr and for thoses using jQuery here is a quick fix :
function touchScroll(selector){
var scrollStartPos = 0;
$(selector).live('touchstart', function(event) {
event.preventDefault();
scrollStartPos = this.scrollTop + event.originalEvent.touches[0].pageY;
});
$(selector).live('touchmove', function(event) {
event.preventDefault();
this.scrollTop = scrollStartPos - event.originalEvent.touches[0].pageY;
});
}
and then if using modernizr :
if (Modernizr.touch) {
touchScroll($('.myScrollableContent'))
}
but it's not ideal because all touch-able devices will have this.
Or, if you use Phonegap you can do (somewhere after phonegap inited):
if (window.device && device.platform=="Android" && parseInt(device.version) < 3){
touchScroll($('.myScrollableContent'))
}
This is an issue with android < 3 and ios < 5.
Simple start is to add overthrowjs and the "overthrow" class to your scrollable content.
Then you can look into iscroll or other polyfilers.
I'm developing an app for Android using Phonegap and JQuery. One of the tasks is to dynamically add some content to the list. In the first time, when I add a first element and call .listview() everything seems to be fine, but when I add some content, its styles doesn't work properly, and listview('refresh') and other commands don't help at all. I'm using jquery mobile 1.0a1. Here is the code for two buttons:
$("#nextDay").click(function(){
$("#SheduleList").append('<li><h3 class="ui-li-heading">ololo1</h3></li>');
$('#SheduleList').listview('refresh');
});
$("#prevDay").click(function(){
$("#SheduleList").append('<li><h3 class="ui-li-heading">ololo</h3></li>');
$("#SheduleList").listview();
});
The first Button is "prevButton". Here is some HTML:
<body onload="init();">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Расписание группы 04-322</h1>
<h1 id=hday>День недели</h1>
</div>
<div data-role="content" data-theme="b">
<ul id="SheduleList">
</ul>
<button id="nextDay">Следующий день</button>
<button id="prevDay">Предыдущий день</button>
</div>
</div>
</body>
You are not alone.
This seems to work the best for me:
refresh = function (selector)
{
try
{
//this may throw an exception:
// call methods on listview prior to initialization; attempted to call method 'refresh'
$(selector).listview('refresh');
}
catch (e)
{
}
}
refresh("#SheduleList");
Add data-role="listview" in your <ul> in HTML.
<ul id="SheduleList" data-role="listview" data-inset="true"></ul>