Topic: Javascript Online Checker (Am i online or offline) (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28659" title="Pages that link to Topic: Javascript Online Checker (Am i online or offline) (Page 1 of 1)" rel="nofollow" >Topic: Javascript Online Checker (Am i online or offline) <span class="small">(Page 1 of 1)</span>\
 
Bueromuenchen
Paranoid (IV) Inmate

From: Munich, GER
Insane since: Nov 2000

 posted posted 11-21-2006 22:05

Hi there,
wasn't here for a long time but good to be able to come back!

Here is my problem:
i need a small javascript (maybe also ajax) to be integrated in a offline webpage.
The script should check if it's possible to access the web (i.e. a remote file) and then redirect the user accordingly to a online url or otherwise to a local file.

I googled a while, but could not find a stable and reliable solution ...

thanks in advance.

Florian
Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

 posted posted 11-22-2006 00:28

Hey, good to see you back!

Here's the outline of a simple idea...

Local file:
Have an iframe loading the remote file. Remote file contains redirect (of parent window ) to online url.
Set Meta-Refresh to local url, refresh delay is the timeout for retrieving the remote file.

Simple, little javascript, and should work pretty well across browsers et al.

So long,

->Tyberius Prime
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 11-22-2006 05:30

Another way is to get a image preloading script, tell it to load an image from the net with its full URL (like the g in google.com or something similar) when the image.complete = true within 30 seconds your online. Kind of a dirty way of doing it, but its simple and if you have a tiny image, like 1x1 .gif it shouldn't be as wasteful as you'd think such a script would be.
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 11-22-2006 08:25

You could also try to make a HEAD request to the online page using XMLHTTPRequest and do the necesseray basaed on the status you get back.

Hugh: I don't think the complete property is standard. You'd rather use the onload and onerror events. And make sure to add some random arguments in the URL so you don't get a cached version.
Bueromuenchen
Paranoid (IV) Inmate

From: Munich, GER
Insane since: Nov 2000

 posted posted 11-22-2006 14:37

Thanks for the replies!

@Tyberius: yes, i thought about that frame/iframe solution too, but i'd expect IE7 to classify this as a phishing attempt!? What do you think?

@Hugh: I like your idea, would propably be most common way

@poi: i tried your method, but i think i can't get mozilla to read a remmote file!

ich used this script:

<script type="text/javascript">
// global flag
var isIE = false;

// global request and XML document objects
var req;
function loadXMLDoc(url)
{
alert('check');
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}

// handle onreadystatechange event of req object
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
alert("ONLINE: \nXML File Content: " + req.statusText);
} else {
alert('offline');
}
}
}

</script>



...

and in the body tag:

<body onLoad="loadXMLDoc('http://ps-mc.de/onlinecheck.xml');">




HOW can i make Mozilla read the online file?
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 11-22-2006 16:30

my bad. I've been played with widgets too much. There's no such restriction in their context.

Not that it'd be really useful ( because it doesn't solve the problem for Opera or Safari ), but in Firefox you have to do this to prompt the user for higher privileges:

code:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

See mozilla: signed script / Privileges to see the list of privileges and how to require them.

Therefore prefer the IMG or Iframe approaches.
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 11-23-2006 07:11

I just thought of something else, not sure if its any use, but couldn't you check if the document.location/.href has a http:// or similar. That would obviously only work if you want the script to know if its run locally or not.

Poi: Good point with the cache problem, I tried it and its pretty simple to overcome, all you gotta do is put a random number in the image name like hello.jpg?123123 as you suggested.

(Edited by Hugh on 11-23-2006 07:15)
Bueromuenchen
Paranoid (IV) Inmate

From: Munich, GER
Insane since: Nov 2000

 posted posted 11-24-2006 15:47

@poi: thanks, i think moz and ie is enough for that project. i'll try your suggestion.

@hugh: thank, but the file the script runs in is always local.

------------------------
no muff too tough
BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

 posted posted 04-06-2007 16:59

Here's some code I wrote a few years back to use the "onload" and "onerror" events of the Image object:

code:
<html>
<head>
	<script type="text/javascript">
	<!--
		var tempImage;

		function checkOnlineStatus() {
			var tempImage = new Image();
			tempImage.onload = returnOnlineStatus;
			tempImage.onerror = returnOfflineStatus;
			tempImage.src = 'http://www.google.co.uk/intl/en_uk/images/logo.gif';		// this must point to the url of a valid image
		}

		function returnOnlineStatus() {
			document.getElementById('onlineStatus').firstChild.nodeValue = 'You are currently online.';
		}

		function returnOfflineStatus() {
			document.getElementById('onlineStatus').firstChild.nodeValue = 'You are currently offline.';
		}

	//-->
	</script>
</head>

<body onload="checkOnlineStatus();">
	<div id="onlineStatus">Checking online status, please wait...</div>
</body>
</html>



Any known image URL is good - I just happened to use Google's.

Dan
HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

 posted posted 04-06-2007 21:57

Old thread, but since he^ posted...

There is a non-standard navigator.onLine property that returns true when the browser is in online mode and false otherwise (no surprise there).
AFAIK this is only supported by IE and Firefox. Opera doesn't support it, and I haven't tested it in other browsers.
It is now getting standardised in the WHATWG Web Applications 1.0 spec.
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 04-06-2007 22:09

HZR: Neat.

Alas, knowing if the user agent is in online mode or not is nowhere near as useful as knowing if a network connection is available. I'm sure I could find someone who use the offline mode some times but that's certainly a minority.

The changes brought by the WHATWG go in right direction. Having an event fired when a connection is lost or retrieved will prove very useful, especially on devices.



(Edited by poi on 04-06-2007 22:12)
HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

 posted posted 04-06-2007 22:31
quote:
Alas, knowing if the user agent is in online mode or not is nowhere near as useful as knowing if a network connection is available


Very true. I think I got a little carried away by the thread title :-)
dayo
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Jul 2007

 posted posted 07-19-2007 20:29

Hello folks.

Sorry if for posting into this old thread but I was led here by Google.

Here is a fading script for an Image Gallery I am looking to fix. It works with IE and Safari but not with Firefox and Netscape. Actually, when I say it doesn't work, I mean you have to refresh the page before the fade happens and once that is done once, it works on that image for that session.

Here is the code


code:
// Fade In Script
if (document.getElementById) {
    document.write("<style type='text/css'>.giThumbImage img {visibility:hidden;} #gsSingleImageId img {visibility:hidden;} </style>");
}
 
function start() {
    if (SingleImageDiv = document.getElementById('gsSingleImageId')) {
	var imageCollTemp = SingleImageDiv.getElementsByTagName('img');
	var theimage = imageCollTemp[0];
	theimage.id = 'gTheSingleImage';
	CheckIfComplete('gTheSingleImage',1);
    }
}
 
function CheckIfComplete(ImageId,ImageNumber) {
    ImageObj = document.getElementById(ImageId);
    if (ImageObj.complete == false) {
    window.setTimeout("CheckIfComplete('"+ImageId+"')", 100);
    } else {
    startFade(ImageId,ImageNumber);
    }
}
 
function startFade(imageId,ImageNumber) {
    var ImageFromId = document.getElementById(imageId);
    setOpacity(ImageFromId, 0);
    ImageFromId.style.visibility = 'visible';
    window.setTimeout("fadeIn('" + imageId + "', 0)", (ImageNumber*600));
}
 
function fadeIn(objId,opacity) {
    if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
        setOpacity(obj, opacity);
        opacity += 5;
        window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
    }
}
 
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
   
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
   
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
 
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
 
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}



I understand after Googling this issue that the fade into each other thing needs the image to be loaded before it works which from my understanding of this code is why the writer checks whether the image has loaded with function CheckIfComplete() before running the actual fade script.

Now for some reason, I suspect Firefox and Netscape return an incorrect answer in that function and that is why it doesn't work. I just suspect and wonder if you guys that cast your experienced eyes over this and give some clues to fixing it.

Note that if the page is refreshed, then it runs properly. Works fine on IE and Safari.

Sorry if this seems obvious or a bit silly, I have no experience with this sort of thing and have been searching high a low for an answer.

Thanks for your assistance

(Edited by dayo on 07-19-2007 20:32)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 07-19-2007 21:46

Welcome on board.

The HTMLImageElement has no such property as complete. The only way to check if an image is loaded is by attaching an evenListener and listen when its load event is fired, or when the load event is fired on the whole document.

Also, I personally loath having several setTimeout and "feeding" them with a string literal that will have to be evaluated. Please pass a function handler. And animations should really be based on a timer to make sure they last the exact same time on all device/platform.

One more thing : Setting the visibility of the image back to "visible" a few ( 600! ) ms before setting its opacity will ruin the effect. The image will visible and fully opaque for a while then suddenly fade in.

How, where, is this script loaded ? The way it's constructed it looks like its loaded as is before, or in, the body of the page. No event listeners to start it.

Have a look at the multilple image/element cross fader I made for the splah page when we launched Opera 9.1. It's quite accessible:

  • with JS off, CSS on and IMG off you'll only see only see the fallback.
  • with JS on, CSS on and IMG off you'll see the alt attributes ( which you can style using CSS ) cross fading.
  • with CSS off and IMG off you should see all the alt attributes. No need to set one on the fallback.

Notice this was a quick hack to prove JS is better than Flash for such a simple thing. This code could use some clean up, and should definitely be in a small Class to not polute the main namespace. For the record Flash is not available on all platforms supported by Opera. This is one more reason to make things accessible.



Hope that helps,



(Edited by poi on 07-19-2007 21:55)
dayo
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2007

 posted posted 07-19-2007 22:13

Thanks for the answer although it is a bit over my head lol.

The function start() is called from a php page in a theme for Gallery2. The page just has Start() at the bottom while the detail I posted is in a .js file.

On your statement that the complete thing does not exist, do you know why it works in IE & Safari then? Awesome that you are involved with Opera although I wasn't paying much attention to Opera (whee it doesn't work at all. Refreshing the page works with Firefox and Netscape but not with Opera.

Concluding that the code is bad, how do you suggest going about fixing it? It is loaded (called) in the body of the page and I assume there are no listeners (not sure what that is).

Thanks a lot .. at least I have some things to investigate.

PS, I didn't write the code just trying to fix it but not sure what you meant about setting visibility back to visible (sorry I am really a noob) but it fades in properly on IE & Safari
Opps found that

code:
ImageFromId.style.visibility = 'visible';
    window.setTimeout("fadeIn('" + imageId + "', 0)", (ImageNumber*600));



I think the opacity is set to zero on the line before so it doesn't show up and the opcity is then increased to fade it in

(Edited by dayo on 07-19-2007 22:21)
dayo
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2007

 posted posted 07-19-2007 22:44

I found this code in a tut from a guy going on about Opera

code:
(function () {

function runmyscript() {
  if( document.getElementById('theThingIAmLookingFor') ) {
    clearInterval(checkForElement);
    document.removeEventListener('load',checkForElement,false);
    ... do whatever you needed to do ...
  }
}

var checkForElement = setInterval(checkForElement,200);
document.addEventListener('load',checkForElement,false);

})();



I am thinking of modifying it to .....


code:
function CheckIfComplete(ImageId,ImageNumber) {
var checkForElement = setInterval(checkForElement,200);
document.addEventListener('load',checkForElement,false);

  if( document.getElementById(ImageId) ) {
    clearInterval(checkForElement);
    document.removeEventListener('load',checkForElement,false);
    startFade(ImageId,ImageNumber);
  }
}



I think this will be in line with what you suggest ... just need to know what "checkForElement" should be in my case.

Thanks...I can see a chink of light at the end of the tunnel.

(Edited by dayo on 07-19-2007 22:47)
dayo
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2007

 posted posted 07-20-2007 00:09

Stuffed
dayo
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2007

 posted posted 07-20-2007 02:35

YEEEEEHAAAAAAAA!!!!!!!!!!!!!!!!

It's the triumph of the noob.

After about 18 hours of Google and so forth, I finally found the solution.

It was function CheckIfComplete as I suspected and changing it to the following

code:
function CheckIfComplete(ImageId,ImageNumber) {
    Window.onload = startFade(ImageId,ImageNumber);
}



gets it to works on all browsers including Opera...for now.

Thanks to POI for helping me go in the right direction.

Got a few enhancements to apply and happy I have a fall back if those don't work.

(Edited by dayo on 07-20-2007 02:38)
HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

 posted posted 07-20-2007 23:43
quote:

poi said:
The HTMLImageElement has no such property as complete.


It's getting standardized in HTML5 though, see HTMLImageElement interface and definition for the complete property.
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 07-21-2007 00:20

HZR: takk takk. Vi sees (sp?) i Søndag.


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu