Develop Reference

my JQuery .click() function wont work with the android chrome browser

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>

Only Corner Of Image Link Is Clickable In Bootstrap Responsive View

I'm at a loss here. Viewing my image gallery from the desktop everything works like a charm. However when I view it from my phone to test the responsiveness my image links are only clickable in the top right corner. I changed the resolution of my browser(desktop) and got the same results. All of my CSS for the gallery is standard bootstrap CSS.
Here is a visual of the approximate area that I can click in responsive view:
And when I inspect my source code my hyperlink covers my image:
And the markup of my image links:
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="http://example.com/h/500/w/800/a/c/thumb/img/gallery/18FT_Wide_Oil_Filters_2014/18_wide_oil_3.jpg" data-toggle="lightbox" data-gallery="18FT Wide Oil Filters 2014" data-title="18FT Wide Oil Filters 2014">
<img class="img-responsive img-protected" src="http://example.com/h/250/w/400/a/c/thumb/img/gallery/18FT_Wide_Oil_Filters_2014/18_wide_oil_3.jpg" alt="18FT Wide Oil Filters 2014">
</a>
</div>
Here is a Bootply of my entire gallery page. If you resize the page to where there are only 2 images on each column then you will get the same result I am getting.

change your this div
<div class="col-lg-12">
<h4 class="page-header"><span class="glyphicon glyphicon-picture"></span> Wind Tower Hubs 2014</h4>
</div>
to
<div class="col-xs-12 thumb">
<h4 class="page-header"><span class="glyphicon glyphicon-picture"></span> Wind Tower Hubs 2014</h4>
</div>

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.

PhoneGap JQuery mobile data-transition slide giving me fade

I'm trying to do a slide transition but all I see is a fade. Slide works on a Chrome browser but it does not work when loaded onto the phone.
<body onload="onLoad()">
<div data-role="page" id="index">
<div class="fixed-top-bar" data-role="header">Title1</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
<li>List</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
<div data-role="page" id="second">
<div class="fixed-top-bar" data-role="header">Title2</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
</body>
There is the body of my html. currently do not have any custom js. Anyone know why I'm not seeing a slide transition?
Edit: I am having this problem on an Android 2.3.6 device. Motorola Atrix 4G to be exact.
Edit: I tried playing around with other transitions other than slide. None of them seem to work. It only gives me a fade.
Edit: I tested my code on iOS and it seems to work just fine. Not sure why it isn't working on Android.

I missed out one very important piece of information on the JQuery Mobile website.
To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).
That pretty much answers the question...

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.