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.
Related
I have buttons that reveal nav links on click that dont work on my mobile chrome browser (I use a google pixel 2) I also have firefox mobile and it works fine there. it also works fine on the simulated phone sizes on my computer browsers.
here's my HTML
<div class="nav">
<button class="nav_btn nav1_trig"><p>WORK</p></button>
<div class="navItem nav1_pop external_links">
<a class="proj_1_trig" title="" href="#"> link </a>
<a class="proj_2_trig" title="" href="#"> link</a>
</div>
</div>
the <button class="nav_btn nav1_trig"><p>WORK</p></button> is supposed to reveal the links below when clicked.
here's my Jquery
$(".nav1_trig").click(function(){
$(".nav1_pop").toggle(300);});
I've tried switching to .on('click', function(){ and .on('click touchstart', function(){
as well along with a bunch of other random fixes like giving the button the "button" type, turning it into a regular link, all with no results.
I also have a div with just a link in it that executes essentially the same code when clicked or tapped that works just FINE on my mobile chrome browser. What am I doing wrong here?
here's that div with the link that works fine on mobile chrome:
<div class="myInfo" id="about">
<a class="about_trig" title="" ><span>about me</span></a>
</div>
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;"> </div>
</a>
<a href="#1498C8" style="text-decoration:none;">
<div style="width:16%;height:20%;background-color:#1498C8;margin:2%;float:left;"> </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.
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.
I am using Phonegap with JQuery-mobile, I have a popup with a lot of text in it, it scrolls fine on iOS, but when I test on various Android versions, the scroll just doesn't work. It seems the popup is not listening to the scrolling events.
Here is a example of my setup, not exactly the same because I am using Backbone view to handle the loading of everything, but the final html should be similar.
my code setup more or less is like
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div id="scrollable_div">
<div id="inner">
<ul>
.....
....
</ul>
</div>
</div>
</div>
<div data-role="footer">...</div>
</div>
<div id="popup_wrapper">popup is loaded into this div programmatically and called popup</div>
http://jsfiddle.net/VRwLX/
What if you try forcing a height to popup? Seems like Android is not being aware of the popup's size.
[data-role="popup"] {
position: relative; // the parent container probably needs a position context also.
height: 90%; //just not to block the full screen - it is a popup :)
overflow-y: scroll;
}
Worked on my JellyBean Android stock browser, should behave similarly on Phonegap's webview.
If the above doesn't work, delete the position: relative and replace the height by a 'real' value (pixels) instead of a relative value.
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.