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.
Related
I do articles on blogs, but I want to know if this code can be simplified so that the page is faster without affecting other things
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- easd descargas texto -->
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-xxxxxxxx" data-ad-slot="xxxxxxxxx" data-ad-format="link" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Try wrapping it in window.addEventListener("DOMContentLoaded", () => {...});, which will wait for the HTML to load before executing that piece of JS.
There still might be a bit of lag while the advertisements load, but there's not much you can do as that depends on the advertisement. You're letting other code run on your site, so you have no control over what it is, only when it is loaded.
I got a short external script code I want to show on Button click, (onload hidden) using jquery or JS. the button works on simple div or iframe.
the weird is it works well on the browser (with emulator), I can't get this to work on the the device itself :-/
(fixed question)
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
$("#showBitcoin").click(function(){
$("#coindesk-widget").show();
});
$("#showRates").click(function(){
$("#iframe").show();
});
};
</script>
<button id="showRates">Live Exchange rates</button>
<button id="showBitcoin">Bitcoin rate</button>
<div id="coindesk-widget"></div>
<script type="text/javascript" src="js/coindesk-widget.min.js"></script>
css:
#iframe{
display:none;
}
#coindesk-widget{
display:none;
}
comment:
The button shows the iframe, can't get the script to show at all
it's a live bitcoin widget graph (CoinDesk). Thanks
There has been a fix for my question,
refering to the original id named "coindesk-widget"
$("#showBitcoin").click(function(){
$("coindesk-widget").show();
This fixed the function it works well.
under PhoneGap desktop tool. but still can't get this to work on samsung device
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 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.