PhoneGap: Startup or Bootstrap Javascript & index file


// collected from: Jamie Munro

// Global variable that will tell us whether phonegap is ready
var isPhoneGapReady = false;

function init(){
    // onDeviceReady will be fired: soon as device is ready
    document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    isPhoneGapReady = true;

    console.log('*Device is ready');
    console.log('*Device UUID: ' + device.uuid);
    console.log('*Device Platform: ' + device.platform);
    console.log('*Device Name: ' +;
    console.log('*Device Version: ' + device.version);


    // attach events for online and offline detection
    document.addEventListener("online", onOnline, false);   // fired: soon as user go online
    document.addEventListener("offline", onOffline, false); // fired: soon as user go offline

function networkDetection(){
    if(isPhoneGapReady) {
        if( != Connection.NONE) {
            console.log('*Internet Available: ' +;
        /* values:

         consider slow internet connection

         consider fast internet connection

function onOnline(){
    console.log('*user connected Online');

function onOffline(){
    console.log('*user goes Offline');

// fired: when the application first loads
window.onload = init;


<!DOCTYPE html>

    <!--Jquery Mobile library with respective css files added -->

    <link rel="stylesheet" href="styles/"/>
    <link rel="stylesheet" href="styles/"/>
    <link rel="stylesheet" href="styles/"/>

    <script type="text/javascript" charset="UTF-8" src="scripts/cordova-2.0.0.js"></script>
    <script type="text/javascript" charset="UTF-8" src="scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="scripts/"></script>
    <script type="text/javascript" charset="UTF-8" src="scripts/common.js"></script>

<h1>Hello Phonegap</h1>

<div data-role="footer" data-position="fixed">
    <div data-role="navbar" data-theme="e">
            <li><a href="index.html" class="ui-btn-active">Home</a></li>
            <li><a href="about.html">About</a></li>


phonegap first screen

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s