I have a strange problem. I'm developing an Android app with Phonegap and jQuery Mobile.
The issue is this. I have two pages, pageA and pageB... In page A for example I have this:
<div id="Menu" data-role="navbar">
<a href="pageB.htm" onclick="DoSomeThink()" >Page</a></li>
</div><!-- /navbar -->
In PageB I have a script loaded in a JS file. When the page is loaded there is this event:
$('.ClassPageB').live('pageshow', function(event, ui) {
\\Some code here
});
If I deploy this on Android phones everything is ok... But if I deploy on tablets the
live.(pageshow event...) is not performed.
The only way I could resolve the problem is to put in a tag target="_self" in the link like this:
<a href="pageB.htm" onclick="DoSomeThink()" target="_self" >Page</a></li>
But if I use this I loose transition effects of JQmobile...
Any ideas?
Try loading the JS file containing:
$('.ClassPageB').live('pageshow', function(event, ui) {
\\Some code here
});
in BOTH PageA and PageB.
Let me know if this works for you.
Related
I am using ionic framework with cordova platform. The css for active state of an element (div, button or a) works fine in browser during development/testing but not at all in android device/emulator
i have defined some classes
.bg-dark {
background: #333333 !important;
}
.bg-active-darkBlue:active {
background: #16499a !important;
}
and following html
<a class="fg-white bg-active-darkBlue button" style="background-color:#3B5998;">Sign in with Facebook</a>
even tried this (got on ionic forum)
<a ng-mousedown="class='bg-active-darkBlue'" ng-mouseup="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>
tried for a,div and button tags.
still not working on android, only works in browser, please help.
By experience, angular ng-mousedown andng-mouseup events do not fire up on the mobile device. My experience was ionic 1.6.4 on iOS.
However, on-touch and on-release works flawlessly well. So just replace ng-mousedown and ng-mouseup with on-touch and on-release, respectively.
<a on-touch="class='bg-active-darkBlue'" on-release="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>
Here is the pointer to the ionic reference documentation on the on-touch and on-release events.
Hope this helps..
Apparently, the "right" way of doing this is according to
phonegap-tips.com is to add an ontouchstart="return true;" on the element.
eg.
<a class="bg-active-darkBlue" ontouchstart="return true;">:active now works in cordova</a>
That worked for me, so I hope it works for you too.
I am trying to make a slideToggle work properly on the Android devices. I mean... it works fine, but the slideToggle lags or chops. Here is my code and maybe you guys can help me with this.
EDIT
I have been using PhoneGap, and done some research. PhoneGap, apparently, doesn't do well with rendering a lot of media. I chopped down half my content, and realized that the effect works perfectly. However; the effect still chops. Is there a way to optimize PhoneGap to properly render media? I have tried CSS3, but the rendering is still horrible. I changed my images format to GIF, and still no luck. What is my alternative, here? If PhoneGap is the issue, then what should I do to create my Web Based apps?
jQuery
$( ".info" ).click( function(){
$( this ).prev( ".tut-box" ).children( ".info-txt" ).slideToggle( "slow" );
$( this ).toggleClass( "active" );
if ( $( this ).text() == "HIDE INFO" )
$( this ).text( "SHOW INFO" )
else
$( this ).text( "HIDE INFO" );
});
HTML
<div class="tut-box">
<img src="blah.jpg" />
<span class="arrow"></span>
<div class="info-txt">
<div class="txt">
DISPLAY MESSAGE GOES HERE!
<div class="fade"></div>
</div>
</div>
</div>
<div class="info">SHOW INFO</div>
I solved the problem by optimizing my script to CSS3 implemented with jQuery 2. So far; no slow animations or slow actions. I also replaced this...
$( ".info" ).click( function(){
to this...
$( ".info" ).on( 'touchstart', function(){
It makes tapping actions respond faster. I've discovered this within posts and jQuery Mobile books. Thanks, for the help, Flash Thunder. We tried xD
I had alot of problems with smooth jQuery animations on Android tablets, but I found a solution that worked for me. Try using this plugin - it basically converts every animation it can to transitions.
I have implemented a slide show using ResponsiveSlides.js V1.54. I am very impressed with the slideshow but I have found on a Samsung Galaxy Ace phone the page jumps to the top of the page when the slide changes? It works fine on all other devices I have been able to test the slideshow on.
I have a development version of my slideshow at:
http://brixhamgigclub.co.uk/multimedia-new.php?id=9
my js is in the head section of the html
Any ideas to fix this would be appreciated.
Bob
I have resolved this problem by methodically removing bits of my code. It appears there maybe contention with the Google Translate code used on my site.
I have removed the meta statement
and the html
<div id="googleTranslate">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bg,cs,cy,da,de,el,en,es,et,fi,fr,ga,hr,hu,it,lt,nl,no,pl,pt,ru,sk,sl,sr,sv', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a /element.js?cb=googleTranslateElementInit">
</script>
</div>
and problem resolves.
Bob
I am currently exploring jQuery Mobile's functionalities. I am quite intrigued by the way Google Play Store handles horizontal sliding, hence, when the user slide taps to the right, the view should slide to the next page and when the user slide taps to the left the view should scroll to the previous page, if any. I know this can be done using native jQuery but I'm not yet familiar with events on mobile devices and I'm sure there is already a built-in functionality for this.
I'd like to try this first with Android devices and if possible with iPad and iPhone. Can anybody guide me on ways to accomplish this?
BTW, I'm not talking about browser history here, probably just some div, pages, if possible.
It can be done but you will be sadly disappointed.
It can be achieved like this:
Multiple page's inside one single HTML. Every page will have swipeleft and swipe right binded to it. When event is triggered changePage() function will make a transition to previous/next page. This sounds excellent and works just fine on desktop browser but fails miserable when executed with phonegap on android phones. Transitions are still a huge problem on android phones, iOS fares better but not to much.
Something like this:
$('#page-two').on('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).on('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Swipe events are supported with jQuery Mobile so no need for 3rd party plugins.
Use a jQuery Mobile carousel plugin like this example: http://jsfiddle.net/blackdynamo/yxhzU/
Original plugin: https://github.com/blackdynamo/jQuery-Mobile-Carousel
Unlike page transitions this plugin will give you much better feeling on mobile phones.
What ever path you choose android tab look will be achieved with navbar inside a second header:
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-theme="a" data-role="header">
<div data-role="navbar">
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
</ul>
</div><!-- /navbar -->
</div>
Solution #1 -- This should be the easy way to do it:
<script>
$(document).delegate("#homepage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#anotherpage", {
transition : 'slide'
});
});
}).delegate("#anotherpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#homepage", {
transition : 'slide',
reverse : true
});
});
});
</script>
Solution #2 -- This one is even much simpler:
$('#homepage').bind('swipeleft', function() {
$.mobile.changePage('#anotherpage', {transition: 'slide', reverse: false});
});
$('#anotherpage').bind('swiperight', function() {
$.mobile.changePage('#homepage', {transition: 'slide', reverse: true});
});
I want to open a link say www.google.com in Phonegap Android... I've tried lot of things but I'm not able to open any link.
<access origin="http://google.com" /> is already added to config.xml.
navigator.app.loadUrl('http://google.com'); is giving an error.
$('#pageID').load('http://google.com',function(){
$('#pageID').trigger('create');
});
is loading the page but the images are not displayed, which is required in my case.
Can anyone explain how to actually open a link in Phonegap.
Well it seems its not possible ..... but I found that we can do it other way round.
We know this works :-
<a data-role="none" id="someID" href="#" target="_blank">
So we can write jQuery as :-
$('#idAnchorTag').attr('href','some URL');
So the complete code is :- (Assuming that click was made on an image)
<a data-role="none" id="idAnchorTag" href="#" target="_blank">
<img id="idIMG" src="some IMAGE">
</a>
And the JS :-
$(function() {
$("#idIMG").click(function(){
$('#idAnchorTag').attr('href','some URL');
});
});
try
$('#pageID').onClick(function(){
document.location.href="http://google.com";
})