So, I am facing this issue in which my react website performs differently on Android and iOS device.
while on home page, **sometime **main content has large padding and on reload it works fine. Tho I'm not facing any issue on Android and windows device.
Also, the work page doesn't load images properly.
Commercial/ Home Page Code: (I'm using tailwind CSS)
import React from "react";
import { Link } from "react-router-dom";
import Vimeo from "#u-wave/react-vimeo";
const Commercial = () => {
return (
<div className="md:px-36 lg:px-52 xl:px-72">
<Vimeo
className="my-5"
video="https://vimeo.com/770677194"
responsive
></Vimeo>
<div className="hidden md:block text-xl font-bold">
<h3 className="mx-auto text-black font-bristone">Quick Links</h3>
<div className="conntainer grid gap-x-2 mx-auto md:my-5 grid-cols-3 bg-auto">
<Link to="/work">
<img src="/img/quicklinks/PC_WORK.jpg" alt="" />
</Link>
<Link to="/axiompost">
<img src="/img/quicklinks/PC_AXIOM POST.jpg" alt="" />
</Link>
<Link to="/aboutme">
<img className="img1" src="\img\quicklinks\PC_ABOUTME.jpg" alt="" />
</Link>
</div>
</div>
<div className="container block md:hidden text-lg font-bold px-5 py-0">
<h5 className="mt-6 text-black font-bristone">Quick Links</h5>
<div className="conntainer grid gap-x-2 my-5 grid-cols-3 bg-auto">
<Link to="/work">
<img src="/img/quicklinks/MOBILE_WORK.jpg" alt="" />
</Link>
<Link to="/axiompost">
<img src="/img/quicklinks/MOBILE_AXIOM_POST.jpg" alt="" />
</Link>
<Link to="/aboutme">
<img
className="img1"
src="\img\quicklinks\MOBILE_ABOUTME.jpg"
alt=""
/>
</Link>
</div>
</div>
</div>
);
};
export default Commercial;
**Work Page Code: **
<Link
to={`/work/${id}`}
className="relative flex justify-center cursor-pointer items-center group"
>
<div class="relative">
{/* src={require("../Data/img/axiompost/AXIOM-POST_BLOCK_01.jpg")} */}
<img src={mimg} class="aspect-video object-cover" alt="..." />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 group-hover:opacity-70 transition duration-300 ease-in-out group-hover:bg-teal-700"></div>
</div>
<div className="absolute opacity-0 group-hover:opacity-100 z-10 text-white text-center">
<div className="hidden md:block text-xs tracking-wide translate-y-11 duration-100 group-hover:translate-y-0 font-bristone">
{title.slice(0, 20).toUpperCase()}
</div>
<div className="hidden md:block text-xs tracking-wide translate-y-11 duration-100 group-hover:translate-y-0 font-">
{category.toUpperCase()}
</div>
</div>
</Link>
I tried searching for the solution but couldn't find one so had to post this.
Screenshots: Homepage issue
Workpage issue
It should look like the one in Android version as it was showing same when I checked responsiveness on desktop.
Related
While the page is loading in application, it takes a few seconds for framework libraries and CSS to load and i gets a noticeable blip.How to prevent this from happening ?
I had tried on Android virtual device running os version 2.2. I had also tried it on actual device running os version 4.1.
.html file:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Accordfintech</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/Accordfintech.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
<style>
.col_M{margin:5px 7px 0 7px;}
</style>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Accord Fintech'" style="background-color: #10537b; color: black">
<img src="images/Accord.png" align="left" style="margin: 8px 0px 0px 8px">
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.RoundRectList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'About Us',moveTo:'abview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/about_us.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Software',moveTo:'swview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/software_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Database',moveTo:'dbview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/Database_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Products',moveTo:'prview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/products_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Research',moveTo:'resview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Research_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Contact Us',moveTo:'cuview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Contact_us.png"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="abview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'About Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>Accord Fintech Pvt. Ltd.</strong> is an ISO 9001:2008 certified company, set up by a team of professionals with competencies in Financial content, software development and database design using a variety of platforms, technologies and financial domain knowledge.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="swview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Software',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>We can offer you a typically 'made - to - order' solution, based on your requirements.</p>
<p>We are well versed with website development, intranet and extranet solutions.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="dbview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Database',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>The Database of Accord Fintech is the absolute solution for all financial analysis requirements, comprising listed companies traded on India's major stock exchanges.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="prview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Products',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>ACCORD</strong> offers a wide range of products and solutions designed specially for enterprises and small businesses across a variety of industries.
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="resview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Research',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>We are a professionally managed growing research house providing intelligence on every aspect of Indian business, finance and markets.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="cuview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Contact Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>Customer Support contacts:</strong></p><br/>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Accordfintech.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Snapshots:
After splash screen it displays the inner content:
After completely loading the package and css files :
However this happens just for a fraction of seconds but how can i avoid this?
Did you put "visibility: hidden" on your body element? You need to put it (and remove the "display: none" that some worklight versions are adding) and Dojo Mobile will make sure to remove it when it is ready to display the screen.
Hi all I have the following code
<script type="text/javascript" src="/js/jquery-2.0.0.min.js"></script>
<script src="/js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
but for some reason in Chrome and on any android it just crashes the page and at the bottom I just get a "Loading" message
does anyone know why?
thanks
Solution
Don't use jQuery 2.0 with jQuery mobile 1.3.1
jQuery Mobile is locked to a certain jQuery version range. Use only jQuery 1.7 up to 1.9.X
And you have several errors in your live example.
CSS should be initialized before js files and your HTML tag was missing. Also DIV containing the page must have data-role="page" attribute.
EDIT :
Your final code should look like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Packer Forbes Communications</title>
</head>
<body>
<div id="pageHead" data-role="page">
<div id="logo"><img src="images/packerForbesLogo.jpg" width="226" height="106" alt="Packer Forbes" /></div>
<div id="socMedia"><img src="/images/socIconPM.jpg" width="35" height="40" alt="PMLive" /><img src="/images/socIconIN.jpg" width="35" height="40" alt="LinkedIn" /><img src="/images/socIconTW.jpg" width="35" height="40" alt="Twitter" /><img src="/images/socIconYT.jpg" width="35" height="40" alt="YouTube" /></div>
<div id="mainNav" role="navigation">
Show navigation
Hide navigation
<ul id="nav" class="clearfix">
<li>Home</li>
<li>What We Do
<ul>
<li>Market Access</li>
<li class="navIndent">Case Studies</li>
<li>Public Relations</li>
<li class="navIndent">Case Studies</li>
<li>Medical Education</li>
<li class="navIndent">Case Studies</li>
<li>Digital</li>
<li class="navIndent">Case Studies</li>
</ul>
</li>
<li>About Us
<ul>
<li>Awards</li>
<li>The Team</li>
<li>Life at Packer Forbes</li>
<li>Our Values</li>
</ul>
</li>
<li>Clients</li>
<li>News</li>
<li>Careers
<ul>
<li>Training</li>
<li>Internships</li>
<li>Benefits</li>
<li>Current Vacancies</li>
</ul>
</li>
<li>Contact</li>
<li>Download Centre</li>
</ul>
</div>
<div id="mainBanner"><img src="images/twentyBanner.gif" alt="We Are Twenty!" width="400" height="80" border="0" class="homeBanner" /></div>
</div>
<div id="mainBody">
<div id="contentWrapper">
<p class="brandStrip"> </p>
<div id="mainColumn">
<!--<h1>Who We Are</h1>-->
<h2>What We Do</h2>
<div id="marketAccess"> <img src="images/marketAccess.jpg" width="160" height="160" alt="Market Access" />
<h3>Market Access</h3>
</div>
<div id="communications"> <img src="images/communications.jpg" width="160" height="160" alt="Communications" />
<h3>Public Relations</h3>
</div>
<div id="medicalEducation"> <img src="images/medicalEducation.jpg" width="160" height="160" alt="Medical Education" />
<h3>Medical Education</h3>
</div>
<div id="digital"><img src="images/digital.jpg" width="160" height="160" alt="Digital" />
<h3>Digital</h3>
</div>
<p class="firstParaHome">Packer Forbes is an award-winning independent healthcare communications consultancy, specialising in medical communications. Our integrated approach ensures that our clients benefit from a compelling fusion of bespoke market access, public relations, medical education and digital communications approaches, all built on insight developed from years of experience.</p>
<p class="dividerLong"><span class="dividerLongMore">Find Out More»</span></p>
<p class="mobileindexorgslogos">
<img src="images/logoHCA.jpg" width="102" height="109" alt="HCA" />
<img src="images/logoEMIG.jpg" width="102" height="109" alt="EMIG" />
<img src="images/logoIIP.jpg" width="121" height="109" alt="IIP" />
<img src="images/abpi_new.jpg" width="102" height="109" alt="IIP" />
<div class="mobileclear"></div>
</p>
</div>
<div id="sideColumn"></div>
<p class="brandStrip"> </p>
</div>
</div>
<div id="pageFoot">
<ul>
<li>1.09 Harbour Yard, Chelsea Harbour, London, SW10 0XD</li>
<li>t: +44 (0)20 7036 8550</li>
<li>f: +44 (0)20 7036 8569</li>
<li>e: healthmail#packerforbes.com</li>
<li>cookie policy</li>
</ul>
<p>Registered office: Packer Forbes Communications Ltd, 1.09 Harbour Yard, Chelsea Harbour, SW10 0XD Registered number: 3753460 </p>
</div>
</body>
</html>
If you are using JQM 1.3.1, you can use this 2 script files.
jQuery JavaScript Library v1.9.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.js
jQuery Mobile 1.3.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.mobile.min.js
Loading message error
If you want to hide this message, try to use this as soon as on load.
$(document).ready(function() {
$('.ui-loader').hide();
});
I have found a weird behavior that is in all versions of cordova after 2.0.0 ( as in cordova-2.0.0.jar )
This is in a html/css/jQuery/jQueryMobile mobile app on a HTC One X phone. The problem is that the hardware back button goes back to the last data-role=page that the user viewed instead of just closing the soft-keyboard. (LogCat log is below)
My question is: What can I do, using the latest version of the cordova API, so that the hardware back button just closes the keyboard, and does not go back to my most recent data-role=page?
The use case is:
HTC One X phone
open the app; it opens on page_1
tap a footer button to go to page_3
click a footer button to go back to page_1
tap in an input box (the soft keyboard comes up)
tap the hardware back button
The soft keyboard closes and the app goes to page_3
on cordova versions 1.9.0 and 2.0.0 the soft keyboard closes and the app stays on page_1
all versions after 2.0.0 do it.
I can't use the older version because they have issues with the Samsung Galaxy 3
The following html performs exactly as I have described.
<!DOCTYPE html>
<html>
<head>
<title>GFE Tool</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="scripts/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="scripts/themeswf2.css" />
<link rel="stylesheet" href="scripts/jquery.mobile.simpledialog.min.css" />
<link rel="stylesheet" href="scripts/css_gfe.css" />
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile.simpledialog2.min.js" type="text/javascript">
</script>
<script src="scripts/using_timios_ws.js" type="text/javascript" ></script>
<script src="scripts/jsrender.js" type="text/javascript"></script>
</head>
<body>
<section id="page_1" data-role="page" data-theme="a">
<header data-role="header" data-position='fixed'>
<div class="standard_table our_header" >
<span><img src="images/LogoWhite.png" width="187" height="61" alt="Timios logo"/></span>
<span class="setup_gear" style="height: 61px;background-color:#4d4d4d;">
<a id='the_gear' href="#setup_page">
<img src="images/geargray.png" width='61' height="61" alt="Set Up"/></a>
</span>
</div>
</header>
<div data-role="content" class="content">
<div >
<table class='standard_table'>
<tr><td><div class='page_title' >Enter Property Data</div>
<div class='page_title' id='div_welcome_user'></div>
</td>
</tr>
</table>
</div>
<input type="number" />
</div>
<div data-role="footer" data-position='fixed' align="center">
<a id='get_results_2' href="#" >
<div class="one_line_footer_button" >Get Closing Costs</div>
</a>
<a href="#page_3" id='CmdGoToNews' >
<div class="one_line_footer_button" >New at Our Company</div>
</a>
</div>
</div>
</section>
<section id="page_3" data-role="page" data-theme="f">
<header data-role="header" data-position='fixed'>
<div class="standard_table our_header" >
<a href="#page_1" >
<span><img src="images/LogoWhite.png" width="187" height="61" alt="HEADER IMAGE"/></span>
</a>
<span class="setup_gear" style="height: 61px;background-color:#4d4d4d;">
<a id="the_gear_3" href="#setup_page"><img src="images/geargray.png" width="61" height="61" alt="Set Up"/></a>
</span>
</div>
</header>
<div data-role="content" class="content">
<div id='divNews' class="about_us" style="padding-left: 5px; padding-right: 5px; ">
This is where New at our company goes.
</div>
</div>
<div data-role="footer" data-position='fixed' align="center" class='our_footer'>
<a id="NewAccountSetup" href="#setup_page" >
<div class="two_line_footer_button">New Account<br>Sign Up</div>
</a>
<a id='ClientSetup' href="#setup_page" >
<div class="two_line_footer_button">Client<br>Sign In</div>
</a>
<a href="#page_1" >
<div class='two_line_footer_button'>
<img src='images/home_icon_white_36.jpg' />
</div>
</a>
</div>
</section>
</body>
NOTE: I am not using PhoneGap Build. I am creating the exec in eclipse.
The LogCat log (below) starts w the moment I hit the hardware back-button. It shows that CordovaWebView is tracking my "browser history" - The URL at index: 0 is ... The log when I use the older versions of the cordova jar does not show these lines.
04-13 16:15:54.964: D/SoftKeyboardDetect(32763): Ignore this event
04-13 16:15:55.124: D/CordovaWebView(32763): The URL at index: 0is file:///android_asset/www/gfe_one.html
04-13 16:15:55.124: D/CordovaWebView(32763): The URL at index: 1is file:///android_asset/www/gfe_one.html#page_3
04-13 16:15:55.124: D/CordovaWebView(32763): The URL at index: 2is file:///android_asset/www/gfe_one.html#/android_asset/www/gfe_one.html
04-13 16:15:55.124: D/SoftKeyboardDetect(32763): Ignore this event
04-13 16:15:55.164: D/Cordova(32763): onPageFinished(file:///android_asset/www/gfe_one.html#page_3)
04-13 16:15:55.164: D/Cordova(32763): Trying to fire onNativeReady
04-13 16:15:55.164: D/DroidGap(32763): onMessage(onNativeReady,null)
04-13 16:15:55.164: D/DroidGap(32763): onMessage(onPageFinished,file:///android_asset/www/gfe_one.html#page_3)
04-13 16:15:56.475: I/Adreno200-EGLSUB(32763): <ConfigWindowMatch:1991>: Format RGBA_8888.
Open your res/xml/config.xml file and look for:
<preference name="useBrowserHistory" value="false" />
You may want to play with the value of useBrowserHistory to return to the old way the back button worked.
#Nanashi wrote: you need to add an event handler for back button once phonegap/cordova is loaded. Please refer this stackoverflow.com/questions/14207690/stop-exit-on-back-button-android-in-phonegap-build
NOTE: in my js function that now handles the hardware back button, I just did return;
The examples do other things or have // do stuff here
I have been going around and around and around, trying to apply as many different solutions as possible, trying to solve this problem by myself. The fact is that I cannot!
I am developing a very simple app in HTML5 on Adobe PhoneGap. The app is only a list of links that the user should click and access to the respective websites. Problem? The problem is that the websites are opening on the app and not on the browser. I already tryed everything I knew... Set target _blank, applied this solution, this one, this one and this one. I've been googling also, but the results are exactly the same: no solution for my problem.
There must be something that I am doing wrong, and right now I don't think I have the discernment to see what it is! And it is driving me crazy... Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Northern Landscape APP</title>
<meta name="description" content="Northern Landscape APP - With this APP you can keep up with the latest news of our group: Features, Group Messages, new magazine issues and more!" />
<meta name="author" content="LFS" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$('.link').live('tap', function() {
url = $(this).attr("rel");
loadURL(url);
});
function loadURL(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
</head>
<body>
<div id="contentor">
<header>
</header>
<nav>
<div id="cabeca">
<img src="imgs/cabecalho.png">
</div>
<br>
<br>
<br>
<div id="botoeswraper">
<div id="linha1">
<div id="b1">
<div id="icone"><img src="imgs/logo_compus.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org'>Official Website</a> </div>
</div>
</div>
<div id="linha2">
<div id="b2">
<div id="icone"><img src="imgs/rblogo.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape'>Redbubble group</a> </div>
</div>
</div>
<div id="linha3">
<div id="b3">
<div id="icone"><img src="imgs/groupmsg.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape/forums/7330'>Group messages</a> </div>
</div>
</div>
<div id="linha4">
<div id="b4">
<div id="icone"><img src="imgs/issues.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org/alli.php'>All NL magazine issues</a> </div>
</div>
</div>
<div id="linha5">
<div id="b5">
<div id="icone"><img src="imgs/tweeter.png"></div>
<div id="texto">
<a href="#" class='link' rel='https://twitter.com/NL_host'>Check us on Tweeter</a> </div>
</div>
</div>
</div>
</nav>
<p> </p>
<p> </p>
<footer>
<p>
NL APP version 1.0 - Developed by LFS©
</p>
</footer>
</div>
</body>
</html>
I am most appreciated for any help that I can get...
I have done the changes below and each one works for me.
<!-- Opens in new tab -->
Official Website
<!-- Opens in new window -->
Redbubble group
I'm using jquery mobile 1.0 in combination with swipejs. The swipejs library is being used to allow for mobile swipe gesture on a image carousel. However, I've encountered an issue on Android 2.2.3 (Motorola Droid) and other Android devices where select lists (on the same page as swipejs) simply don't work. The select lists appear but the native options menu's don't pop up, clicking them simply does nothing. I was able to not only narrow it down to the swipejs, but also to a particular line within swipejs.
style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
It appears that the transalate3d css behavior somehow interferes with jquery mobile select lists. I've found numerous reports of the fragility of jquery mobile select lists on Android (https://github.com/jquery/jquery-mobile/issues/1051 ). And have been able to create a fairly simple sample page the exhibits this behavior. My fix was to alter the translate3d to translate in the swipejs library itself. But I'm wondering if someone with a better understanding of what translate3d does and how that might effect jquery mobile might be able to proprose a better solution or is this a bug with jqm or swipejs?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/images/mobile/homeIcon.png" />
<link rel="apple-touch-startup-image" href="/images/mobile/splash.png" />
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="main">
<header data-role="header">
</header>
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-1">
Shipping method:</label>
<select name="select-choice-0" id="select-choice-1" data-theme="a">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div id="divProductImagesCarousel">
<ul>
<li><a href="image_0.jpg">
<img width="250" height="250" src="image_0.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_1.jpg">
<img width="250" height="250" src="image_1.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_2.jpg">
<img width="250" height="250" src="image_2.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_3.jpg">
<img width="250" height="250" src="image_3.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_4.jpg">
<img width="250" height="250" src="image_4.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_5.jpg">
<img width="250" height="250" src="image_5.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_6.jpg">
<img width="250" height="250" src="image_6.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_7.jpg">
<img width="250" height="250" src="image_7.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_8.jpg">
<img width="250" height="250" src="image_8.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_9.jpg">
<img width="250" height="250" src="image_9.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
</ul>
</div>
</div>
</div>
<script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var productImagesCarousel = document.getElementById('divProductImagesCarousel');
window.mySwipe = new Swipe(productImagesCarousel);
});
</script>
</body>
</html>
Yes, jQueryMobile has its own swipe function
BUT!. swipeJS is so nice!
And you can still use it!
This took me a lot of investigating, but i found a solution that works for me.
Basically, just put all the swipejs stuff inside $(document).ready(function(){
Like this:
<script type="text/javascript">
// outside ready function so that buttons still have a var to attach function calls to like slider.next()
var slider;
// process AFTER jquery mobile.
// i "think" the problem that somehow jquery mobile stops swipejs from detecting the width of the div (in the setup function)
$(document).ready(function(){
slider = new Swipe(document.getElementById('myslider'), {
callback: function(e, pos) {
// some callback code here
}
});
});
</script>
I don't think this is a conflict in JS -- perhaps.
This forces swipejs to be processed at the end,
and presumably after whatever jquerymobile feature is messing it up.
I'm pretty new to JS, so I don't know how this function differs from the other "do this last" type functions. This might cause other nasty conflicts, I suppose.
If someone wants to comment with a better function (and why), that would be great too.
You don't need a swipe library when using jQuery Mobile. You can register event handlers to the swipeleft and swiperight events:
$(document).delegate('#divProductImagesCarousel', 'swipeleft swiperight', function (event) {
alert('You just ' + event.type + 'ed!');
});
It is better to use jquerymobile "pageshow" method, not the pageinit or something others.
The code example below:
$(document).live('pageshow', function(){
//put the swipejs code here.
}