Develop Reference

Replace image in mobile apps

I am using Phonegap/cordova.
I have
<img id="clothes" src="pictures/white.jpg" width="100%" >
and I have div colors
<a href="#FE4C04" style="text-decoration:none;">
<div style="width:16%;height:20%;background-color:#FE4C04;margin:2%;float:left;">&nbsp</div>
</a>
<a href="#1498C8" style="text-decoration:none;">
<div style="width:16%;height:20%;background-color:#1498C8;margin:2%;float:left;">&nbsp</div>
</a>
jQuery code:
$(document).ready(function(){
$("[href='#FE4C04']").click(function(){
$('#clothes').attr('src','aa.jpg');
});
$("[href='#1498C8']").click(function(){
$('#clothes').attr('src','ab.jpg');
});
I want to click div color and then change image. This code works on desktop browser but if I try on device (e.g. Android), the image doesn't change.
I have tried many ways, but wasn't able to resolve this issue.

Android / iPhone href link not firing - focus rectangle appearing instead

I am having a problem on android and iPhone versions of HTML5 site using responsive layout.
links are not firing unless I hold down on them for 1 second.
Otherwise they act as if a hover event was taking place.
Example code:
<div class="homepageCarDiv">
<div class="note">
<div class="imgDiv">
**<img src="_imgup/19/thumbnail/Imagen_2.jpg" alt="">**
</div>
<h3>MITSUBISHI ASX<br>ASX 200 DI-D CHALLENGE 4WD (2010)</h3>
<h4>16.500€</h4>
<div class="verDet">
<p>**Ver Detalle**</p>
</div>
<div class="cornerImage">
<img src="images/fold.png" alt="">
</div>
</div>
</div>
Code can be seen at http://20coches.com/index.php.
It works correctly on iPad and desktop.
I am at a loss.

This issue was related to responsive divs and focus rectangles being pushed out of the viewport.
Other sources on the internet suggest that javascript calculations of the dynamic element width causes a silent mouse fail on hover, which results in the link not firing.
I just got tired of beating my head against the VDU, and managed to work around the issue - by clearing every div from its neighbour.

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.

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.