PhoneGap JQuery mobile data-transition slide giving me fade - android

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...

Related

Framework7 and Android: Icons render in browser but not on device

When I use framework7-icons on the web, they render just fine, but when I launch my project on my Galaxy S8, the name of the icon is displayed instead of the actual icon.
On the web:
On my Galaxy S8:
My code:
<div id="app">
<div class="page">
<div class="row">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><i class="f7-icons size-28">menu</i></div>
</div>
</div>
</div>
</div>
</div>

Before copying build folder to cordova, in build/static/Css folder, open the css files and search for src:url(/static/media/MaterialIcons-Regular.e79bfd88.eot) and replace it with src:url(../media/MaterialIcons-Regular.e79bfd88.eot). This will work for sure.

Crystal report Overflow-x issue in Android Devices

I am Trying to make a responsive Crystal reports in Visual studio. I given bootstrap table-responsive class to the parent div of Crystal report. In desktop devices its working perfectly. But in android devices table-responsive class is not working. and crystal report width exceeds outside the parent div. scrolls still works but page full scrolls. how can i solve this issue?
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel-body">
<div style="" class="table-responsive">
<CR:CrystalReportViewer ID="CRViewer" runat="server" AutoDataBind="true" EnableParameterPrompt="False" ReuseParameterValuesOnRefresh="True" ToolPanelView="None" EnableDatabaseLogonPrompt="False" HasCrystalLogo="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasRefreshButton="True" HasPageNavigationButtons="True" HasPrintButton="True" DisplayToolbar="True" />
</div>
</div>
</div>
</div>

cordova app with framework 7 css work different at various android devices

working on Cordova android application with framework 7, I create bottom bar as a music player, and top of the bottom bar add song progress bar.
To add progress bar div on the top position I use CSS property -position: absolute. its display fine at my device and many other devices I tested but some Android devices face some issue like song progress bar displayed middle of the bottom bar.
<div class="views pageview">
<div class="view view-main">
<div class="toolbar toolbar-bottom hidden-toolbar" id="buttomBar" style="opacity: 0;height: 80px;">
<div class="toolbar-inner">
<div class="myProgress2" id="myProgress2" style="background-color: grey; width:100%;position: absolute!important;">
<div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:#00bcd4;"></div>
</div>
<div class="list-block" id="songname" onclick="showToolbar();">
<a href="#" class=" size-30 item-link smart-select">
<select name="fruits" id="tracklistappend" onchange="getAudioUrl(this)">
</select>
<div class="item-content">
<img src="img/pula.jpg" width="70px" height="50px" id="trackimage">
<div class="item-inner">
<div class="item-title" id="trackNameNclipName"></div>
</div>
</div>
</a>
</div>
<span style="margin-left: 2px;" id="duration"></span>
<a onclick="playButton()" class="link size-50 left" id="play"><i class="fa fa-play-circle" aria-hidden="true"></i></a>
<a onclick="puseButton()" class="link size-50 left" id="pause"><i class="fa fa-pause-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="pages">
<div data-page="index" class="page no-navbar no-toolbar navbar-hidden toolbar-hidden hide-toolbar-on-scroll">
<div class="page-content landingpage">
<div class="content-block" style="height:60px;"></div>
<div class="logo main col12"> <img src="img/bplogo.png" alt=""> </div>
</div>
</div>
</div>
</div>
</div>
other android devices like Samsung j2 progress bar displayed like above
on my device progress bar displayed at the top

You need to set up a consistent code for each major change in webview.
Explore the user fragmentation per webview version in order to decide which support you're in need to give.
If you're on first version, try to refer to webview-supported html5 and CSS.

html5 mobile app in landscape mode and portrait mode

i have design an html5 android app using bootstrap 3.3 and i have display 12 col in portrait mode
col-xs-12
<div class="col-xs-12 col-xs-6">
<div class="panel panel-card">
<div class="item">
<div class="bottom text-white p">
Title
</div>
</div>
<div class="p">
<h3>Paracosm</h3>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</div>
</div>
</div>
i want to display 6 col in landscape mode how to do this..
col-xs-6

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.

Categories

Resources