0

In onDeviceReady I'm trying to detect if a network connection is present with navigator.connection.type and if it's not then a div with the offline content is shown, but it's not working. running it on a device (Z10).

My page

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone-no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
    <title>Our Application</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/mustache.js"></script>
    <script src="phonegap.js"></script>
</head>
<body onload="init()">
    <div data-role="page" id="main">
    <div data-role="header" class="logo">
        <img src="img/logo.png" />
    </div>
    <div data-role="content">
        <ul id="canlist" data-role="listview">

        </ul>
        <a href="#newcan" data-role="button" data-icon="plus">New can</a>

    </div>

    <div data-role="footer" data-theme="c">
        <h2 class="offline">Offline Mode</h2>
    </div>

</div>
<div data-role="page" id="newcan">
    <div data-role="header" class="logo">
        <img src="img/logo.png" />
    </div>
    <div id="candetailcontent" data-role="content">
    </div>
    <div data-role="footer" data-theme="c">
        <p>Snapcan!</p>
    </div>
</div>
</div>
<script type="text/javascript"  charset="utf-8">
        function init() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        function onDeviceReady() {
            alert('ready');
            var networkstate = navigator.connection.type;
            if(networkstate == "none")
            {
                $(".offline").css("visibility","visible");
            }
        }
    </script>
</body>
</html>

my index.css:

.offline{
    visibility: hidden;
    color:  #f00;
    font-style:italic;
}

If there is no connection then the red"Offline Mode' should be visible but it's not. Any ideas?

2 Answers 2

1

I think you should try with cordova's offline eventlistener.

1

have you tried using the css property "display" on your offline class and either have it set to "none" if online or "" is offline?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.