Friday, December 28, 2012

Stop Bounce webapp in iphone

To stop bounce iphone view on the phonegap because iphone native app does not bounce
Go to the cordova.plist  file and you can see the key name "UIWebViewBounce" its default value id yes.  set value "NO".



and check app.. cheers.

loading message until all the images are load


Start loading when function call.

$.mobile.showPageLoadingMsg();
$.each(data.cmspages, function(key, value) {
                       content+='<li class="ui-li ui-li-static ui-btn-up-c">'+
                       '<div class="ui-grid-a">'+
                       '<div class="ui-block-a left_thumbs">';
                       for(var i=0;i<value.images.length;i++){  // multiple images in single page.
                       content+='<img src="'+imagepath+'ayana/files/gallery_image/'+value.images[i]+'" class="image_'+id+key+'">';
                       }
});

Dynamic youtube video in phonegap


Get video url like: 
http://www.youtube.com/watch?v=l32LjEtTUkY
http://www.youtube.com/embed/l32LjEtTUkY
l32LjEtTUkY

Create function like below:

function Loadvideo(catvideo){

//Get video ID from catvideo variable.
var videoid= catvideo.substring(catvideo.lastIndexOf('=')+1);
if(videoid == catvideo){
        var videoid= catvideo.substring(catvideo.lastIndexOf('/')+1);
}

Wednesday, December 26, 2012

Reduce query page transition time.

Go to the Jquery mobile css file.

find .in and .out in the css. you can see the below code
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
}


 and reduce the time 350ms to 10ms or as you want in these css like below.

.in{-webkit-animation-timing-function:ease-out;
-webkit-animation-duration:10ms;
-moz-animation-timing-function:ease-out;
-moz-animation-duration:10ms
}
.out{-webkit-animation-timing-function:ease-in;
-webkit-animation-duration:10ms;
-moz-animation-timing-function:ease-in;
-moz-animation-duration:10ms
}

I hope this will help you.:)
cheers...

Disable Active page When loading start

Open jquerymobile.js  and find below text

<span class='ui-icon ui-icon-loading'></span>

add one div element before the span like: 
<div class='inner_loader ui-loader-verbose'>

and end it after the h1 tag, that is created after span.
and add below css in your style.css.

Regular expresion to validate URL

var url = value.v_url;

var pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

if (pattern.test(url)) {
        content+='<a href="'+value.v_url+'" target="_blank">'; //  Url is valid
}
else{
        console.log("invalid url");
}