Develop Reference

Where is this space in my div on mobile browser coming from?

So I have a weird space issue in one of my divs, but only when viewing on Android webkit browser 533.1 (newest versions of webkit android browsers don't have the issue). The issue doesn't appear anywhere else, not on desktop, newer mobile devices or browsers. Etc. Only old android stock browser.
Here is the web page. The div in question is the div with the phone number and address (toward bottom of screen, underneath facebook and twitter icons).
I figure it would be easier for you to go there and use firebug to look at the code, but if needed I can post some code here. There is just a ton of css (multiple media queries).
Here is the code for the div. The spacing occurs before the very first element in the div:
<footer class="hideForDesktop" id="ont_foot">
<div id="footer_div">
<p id="number">909.390.3092 </p>
<p> 1155 S. Wanamaker Ave, Ontario, CA 91761</p>
<div id="bottom-mob-nav">
<!-- navigation module -->
<nav id="ontario_nav2">
<ul>
<li class="here"><a title="Scandia Home" href="/ontario/index.php">Home</a></li>
<li><a title="Scandia Rates & Hours" href="/ontario/rates_hours.php">Rates & Hours</a></li>
<li><a title="Get Directions to Scandia" href="/ontario/directions.php">Directions</a></li>
<li><a title="Rides, Games, & Fun" href="/ontario/attractions.php">Attractions</a></li>
<li><a title="Throw Your Party at Scandia!" href="/ontario/parties.php">Parties</a></li>
<li class="show"><a title="Bring your group party to Scandia" href="/ontario/group_events.php">Group Events</a></li>
<li><a title="Educational tours at Scandia!" href="/ontario/education.php">Education</a></li>
</ul>
</nav>
</div>
<div id="end">
<p class="boring">© 2014 Scandia Family Fun Center</p>
<p class="boring">Prices, terms and conditions subject to change without notice. Some rides may be closed during inclement weather.</p>
<div id="otherLocs">
<ul>
<li class="grey">Ontario</li>
<li>Sacramento</li>
<li>Victorville</li>
</ul>
</div>
<div id="other">Other locations</div>
</div>
</div>
</footer>
I've tried setting the div#footer_div height to both auto and initial with no luck.
Screenshot:

So I found a fix, not sure if it's the best way, but it works. I validated a bunch of problems in the HTML, but that didn't get rid of it. I put borders around all the divs and found the div that was causing the gap. I then deleted all the content from the div and found that it still had height (equal to the size of the gap. So in the CSS I set the div height to 0. This got rid of the gap, then I just had to restyle a couple of things in my CSS to make everything look the way it was and it worked.
If you look at my original post, the div that was causing the problem was footer#ont_foot.

Phonegap (Cordova) Swipe Frameworks and Images

I'm testing a very simple page that swipes out the content within a phonegap app. I started with jquery mobile swipeleft and swiperight and it didn't work. So I switched over to dojo SwapView's and again, no luck. I stripped out all of content and when I only had text it worked great (for both jquery and dojo). As soon as I added any images both frameworks didn't recognize the swipe and wouldn't switch out the content. So I'm assuming it's a drawback to phonegap/cordova and images.
I thought maybe it was related to my css and positioning of the div's that the images were contained within. So i removed all css and again, the swipes weren't recognized and no content was swapped.
I searched the web and didn't see anyone else complaining about this issue. Anyone else run into this issue when adding images?
example with jquery:
<div data-role="page" id="page1">
<div data-role="content">
<p class="story">page1 content</p>
<div id="imagediv">
<img src="img/myimage.png" width="70%"/>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p class="story">content here
</p>
</div>
</div>
jquery swipe logic:
$(document).delegate('.ui-page', "swipeleft", function(){
var $nextPage = $(this).next('[data-role="page"]');
if ($nextPage.length > 0) {
$.mobile.changePage($nextPage, { transition: "slide" });
}
}).delegate('.ui-page', "swiperight", function(){
var $prevPage = $(this).prev('[data-role="page"]');
if ($prevPage .length > 0) {
$.mobile.changePage($prevPage, { transition: "slide", reverse : true });
}
});
Again, works just fine BEFORE I add images. Also works great in the browser (Chrome and Firefox). btw, i'm testing on android.

I think I figured out the issue... the image files were too large so it took too long for each page to be redrawn. By reducing the image sizes everything works as predicted. It's pretty annoying because I wanted to make an interactive app with animations but the animated gif files are too big for jquery to function. I wonder if this is a known limitation to phonegap apps.

keep the input box above the android device keyboard while typing

I created one page using HTML5, Bootstrap, CSS and Angular JS specially for Mobile. I tried to keep one form with one input field and one button (for posting message on the page), at footer which is fixed using CSS -
position: fixed;
right: 0;
bottom: 0;
left: 0;
margin-bottom: 0;
and this rules are applied on form's wrapper div.
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="row">
<a class="pull-right switch-venue" target="blank" ng-href="#" href="#">
<img alt="Switch Venue" height="25px" src="images/swithc-venue.png">
</a>
<div class="span12 powered-by">
Powered by <img alt="" title="" width="70px" src="images/footer_logo.png">
</div>
</div>
</div>
</div>
But here the problem is when I tried to access the page (with web address URL) on my mobile device Samsung Galaxy Y ST5360, and when I try to input some text inside the input text box, android device's keyboard is appearing and behind this the whole footer area (having form with input field and button) is hiding.
While this is working fine on some other Android device Samsung Galaxy S III, it is working fine, means the footer area (with form inside it) is not hiding behind the device keyboard while typing inside input text field.
Sorry, if I couldn't give the more specification about the problem. Please help for this hair pulling problem.
Thanks in advence.

How to code a scrollable list that works correctly on Android browsers? (HTML)

I have the following HTML, mostly generated on the fly using JS, as a dynamic popup that appears when you click in several points on a map.
<div class="bubble">
<span class="topPaisCont"></span>
<span class="globalContent">
<h1>ASIA</h1>
<div class="contPais">
<a href="#" target="_blank">
<img src="images/flags/asia.png" style="visibility: visible; "> Asia
</a>
<br>
<!-- A few more <a>s with the same structure -->
</div>
</span>
<a class="close"></a>
</div>
I'd post an image but it seems I can't since I'm a new user...
The scrollable list of links is rendered correctly in most PC browsers and also on the iPhone and iPad, where it can be scrolled swiping one or two fingers.
However, I can't make it work on Android, where it can't be scrolled down.
Can you help with this? Is it the way it's implemented?
I can post the CSS if needed.

How to size a content div to cover the entire content area in jQuery Mobile

I started a simple jQuery Mobile Page with a header and a content div. The content div should serve as a map container for openlayers. The map should fill up the entire screen, except for the header bar.
Sizing the content div with a width/height of 100% didn't work (nothing was displayed), so I'm looking for a CSS approach to pixel-size the div or a relative-size workaround.
Especially I like to know:
How can I account for screen orientation changes (landscape/portrait)?
How can I make my layout "height-elastic", i.e. resistant to the toggling of the browser's address bar?
Here is my markup so far:
<body>
<div data-role="page">
<div data-role="header">
<h1>My Map</h1>
</div>
<div id="mapcontainer" data-role="content">
<!-- OpenLayers Map goes here -->
</div>
</div>
</body>

OpenLayers listens for the window 'resize' event and automatically calls map.updateSize(). Nothing to do here.
In my case, without header, the following code works:
<div data-role="page" id="map">
<div id="olmap"></div>
</div>
#olmap, #map {
height: 100%;
width: 100%;
}

Have you tried just setting the width setting for both the content div and it's containing div, which I guess in your case would be page? My experience on mobile browsers is that setting both height and width will cause problems when the phone is rotated. That's limited to the iPhone, granted.

I didn't test it yet, but see if this works:
set fulscreen mode as described here: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html
and set #mapcontainer width and height to 100% (and put some content in it when testing)