SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I adapt this code to detect Internet connection on a smartphone?

    I came across this code to add to my Android/iPhone app to help let visitors know that there is or is not an active Internet connection:

    HTML Code:
    function testConnection() {
       var googleFavIcon = new Image();
       googleFavIcon.src =
                   "http://www.google.com/favicon.ico";
     
       if(googleFavIcon.height>0)  {
           //do something
        }
        else {
          //warn user
        }
    }
    It was found on this page: Detecting an Internet Connection With Javascript Java Beans dot Asia

    I don't know how to write the JS code needed for the "do something" and "warn user" sections. I want to show a default local red.png icon if there is no connection, but show a local green.png icon if there is a connection. We don't need to address IE or desktop browser issues, since it's for the iPhone or Android devices. Here's a sample of what the final HTML might look like:

    HTML Code:
    <ul class="pageitem">
    <li class="menu">
    <a href="#" onClick="history.go(-1)"><img src="backbutton.png" alt=""></a> 
    <img src="red.png" alt="">
    </li>
    </ul>
    How do you use JS to swap out the red.png for a green.png if there's an active connection? I imagine "red.png" would somehow be replaced with a JS variable.

    Also, can I use a JS onClick on a png image as I did above?

    Thanks!

  2. #2
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am thinking you need some sort of file to download and time the period that file takes to download and make a choice after that.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sitemile View Post
    i am thinking you need some sort of file to download and time the period that file takes to download and make a choice after that.
    The file to download is in the code.

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is as far as I got. I don't understand the errors in JSHint.com, unfortunately, so I can't go further.

    Upon body onLoad, the function is supposed to run. It gets a 126-byte file from our server and checks it for height size. If it is larger than 0 bytes, then the first option is supposed to run, which means to put "On" in the input field. Otherwise, if the size is less than 0, it puts "Off" in the input field. Currently, when I double-click on the script file to open it, nothing shows in the text input field. (Putting the code right after the onLoad line, or putting the code just before the </body> tag doesn't affect it.)

    HTML Code:
    <title>
    Testing Internet Connection On/Off Status
    </title>
    
    
    <script type="text/javascript">
    
    function testConnection() {
       var checkExistenceOfImg = new Image();
       checkExistenceOfImg.src =
                   "http://aedownloads.com/misc/testConnectionInApp.png"; 
       if(checkExistenceOfImg.height > 0)  {
    		function showOn(form) {
    			var form = document.getElementById('formConnection');
    			var a = form.elements.status.value;
    			form.elements.status.value = "On";
    		}		
        }
        else {
    			var form = document.getElementById('formConnection');
    			var a = form.elements.status.value;
    			form.elements.status.value = "Off";
        }
    }
    </script>
    </head>
    
    
    <body onLoad="testConnection()">
    
    <div id="content">
    	<div class="pageitem"><div class="textbox">
            <p class="term">
    			Testing Internet Connection
    		</p>
    	</div></div> 
     
     	<div class="pageitem"><div class="textbox">	
    		<form id="formConnection"> 
    			<input id="connectionStatus" class="display2" size="1" type="text" name="status" value="">
    		</form>
    	</div> </div> 
    
    </div> <!-- content -->
    <!-- testConnectionInApp.png is a 126bytes 10x10px PNG image. -->
    
    </body>

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK, i finally got it working. Are there any weaknesses regarding this code I should know about?

    HTML Code:
    <script type="text/javascript">
    function showOn(form) {
         form.elements.status.value = "On";
         }
    
    function showOff(form) {
        form.elements.status.value = "Off";
        }
    
    function testConnection() {
        var checkExistenceOfImg = new Image();
        var form = document.getElementById('formConnection');
        checkExistenceOfImg.src =
                   "http://aedownloads.com/misc/testConnectionInApp.png"; 
        if(checkExistenceOfImg.height > 0)  {
    		showOn(form);
        }
        else {
    		showOff(form);
        }
    }
    </script></body>

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nope, the code does not work consistently. Back to square one!

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found a code from PhoneGap that does the trick!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •