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.
Related
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 PhoneGap application that uses JQuery mobile to navigate between pages.
When I navigate from the main page to a page containing a Google map, the map shows only a single tile at a time in the top left corner like this:
What can be the reason for this ?
**
Source Code:
The following script is in the head of my page
<script>
$(document).on("pageinit", "#stores", function () {
var centerLocation = new google.maps.LatLng('57.77828', '14.17200');
var myOptions = {
center: centerLocation,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
callback: function () { alert('callback'); }
};
map_element = document.getElementById("map_canvas");
map = new google.maps.Map(map_element, myOptions);
var mapwidth = $(window).width();
var mapheight = $(window).height();
$("#map_canvas").height(mapheight);
$("#map_canvas").width(mapwidth);
google.maps.event.trigger(map, 'resize');
});
</script>
My Page is like this
<!-- Home -->
<div data-role="page" id="home">
.
.
.
</div>
<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>
I navigate from home to the maps page like this:
Stores
Update
after applying Gajotres solution the tiles become like this
intro
Newer versions of jQuery Mobile and Google Maps v3 are a little bit special.
Your first problem was using pageinit event to the the calculation. At that point you cant get a correct page height and width. So instead use pageshow, you will find it working in my example.
Before you show the map you need to resize its content DIV. This is because content div will resize according to available inner elements. So we need to fix this manually, through javascript or CSS. I already have a answer on that question: google map not full screen after upgrade to jquerymobile 1.2 but I can also show you a working example:
Working example
Working jsFiddle example: http://jsfiddle.net/Gajotres/GHZc8/ (Javascript solution, CSS solution can be found in a bottom link).
Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
Javascript
Here's a function used to calculate correct page height:
$('#map_canvas').css('height',getRealContentHeight());
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
Another solution
There's also another solution to this problem that only uses CSS and it can be found HERE. I prefer this solution cause it don't require javascript to correctly fix the map height.
CSS:
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
One last thing
Also if page width is still incorrect just set it to 100%:
$('#map_canvas').css('width', '100%');
I have had this issue for months banging my head against the wall trying to find a solution. Even setting the style properties for the content and map-canavas divs did not solve all the problems. google.maps.event.trigger(map, "resize") did not do it either. The map was full screen now but still centered in the top left. And if you called your initialize functions on every pageshow the map would reset back to its original position each time.
I was able to come up with this called on the pageshow event and solved all my problems!
$('map-page').on("pageshow", function() {
var latLng = map.getCenter();
google.maps.event.trigger(map,'resize');
map.setCenter(latLng);
});
CSS
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.ui-page { -webkit-backface-visibility: hidden; }
</style>
Here is my content and map-canvas div.
<div data-role="content" id="mapContent" style="padding:0;position:absolute;
top:40px;right:0px;bottom:60px;left:0px; ">
<div id="map-canvas" style="width:100%;" >
</div>
</div><!-- /Content -->
It gets the current center of the map, resizes the map to the current div, then sets the map center. This way, if the user navigates away from the page and comes back, the map does not lose its position.
Hope this helps.
Robert
My problem appears on the internal Android browser in combination with JQuery Mobile. When I reload the current page the content shrinks to fit text into the listview.
More in Detail:
The code works fine on IPhone, mobile Desktop Tools and Androids Firefox. However on the internal Android browser I have this weird issue with the code beneath. See my Edit below.
What I've tried so far:
I've played a lot with the viewport meta tag. Anyhow, I don't think that's the problem, because the content gets displayed correct on every other site in my app.
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
like these posts suggest:
JQuery Mobile Device Scaling
Full webpage and disabled zoom viewport meta tag for all mobile browsers
My Code:
<html>
<head>
<meta name="viewport" content="width=650">
<!-- CSS and Scripts-->
</head>
<body>
<!-- Page Wrapper -->
<div data-role="page">
<section data-role="content">
<h2>
Code Sample
</h2>
<div class="ui-grid-solo">
<p style="margin-bottom: 38px;">
A
B
C
</p>
</div>
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
</section>
</div>
</body>
</html>
Has anyone an idea, or did fight with a similar problem?
Edit:
I'm on to something, the problem appears to happen in this peace of code:
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
Normally the listView replaces to big text items with "dot dot dot" at the end so that they fit on the screen. In my case it still does that, but the text has way to many characters, before the shortening is happening. The result is, that everything scales down. How should I solve this?
Since I got no answers on this one, I post my fix:
Only on mobile safari browsers listView items don't seem to get shortened. Now I'm calling a function which does that manually on pageinit:
fixListView: function () {
var brokenAgent = "Safari";
var currentUserAgent = navigator.userAgent;
if (currentUserAgent.indexOf(brokenAgent) != -1) {
var listItemList = $('.long-text');
for (var i = 0; i < listItemList.length; i++) {
var text = listItemList[i].innerText;
if (text.length > 40) {
var newText = text.substr(0, 40);
listItemList[i].innerText = newText + "...";
}
}
}
}
Still not that happy with my fix, any ideas for improvement are welcomed!
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. :)
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>