you are here: codestackercodes [RSS] → tag offline online jQuery javascript [RSS]

Detectar se o browser estar offline ou online

Como detectar que seu browser estar offline ou online utilizando de jQuery?
Esse código foi montado e capturado na internet. Por tanto náo é meu.
Agora não sei de quem são os créditos.

Com ele temos como mostrar para o usuário que sua conexão esta offline.

<script type="text/javascript">
		jQuery.networkDetection = function(url,interval){
			
			var url = url;
			var interval = interval;
			online = false;
			this.StartPolling = function(){
				this.StopPolling();
				this.timer = setInterval(poll, interval);
			};
			
			this.StopPolling = function(){
				clearInterval(this.timer);
			};
			
			this.setPollInterval= function(i) {
				interval = i;
			};
			
			this.getOnlineStatus = function(){
				return online;
			};
			
			function poll() {
				jQuery.ajax({
					type: "POST",
					url: url,
					dataType: "text",
					error: function(){
						online = false; 
						jQuery(document).trigger('status.networkDetection',[false]);
					},
					success: function(){
						online = true; 
						jQuery(document).trigger('status.networkDetection',[true]);
					}
				});
			};
			
			
		};
					
		jQuery(document).ready(function(){
			
			network = new jQuery.networkDetection("/poll", 5000);
			network.StartPolling();
			
			jQuery(document).bind("status.networkDetection", function(e, status){	
				// subscribers can be namespaced with multiple classes

				subscribers = jQuery('.subscriber.networkDetection');
				// publish notify.networkDetection to subscribers

				subscribers.trigger("notify.networkDetection", [status])
				/*
				other logic based on network connectivity could go here
				use google gears offline storage etc
				maybe trigger some other events
				*/
			});
			
			/* 
			Listen for notify.networkDetection events. This could equally be listening
			directly to status.networkDetection events
			*/
			jQuery('#notifier').bind("notify.networkDetection",function(e, online){
				// the following simply demonstrates

				notifier = jQuery(this);
				if(online){
					if (!notifier.hasClass("online")){
						notifier.hide();
						jQuery(this).addClass("online").removeClass("offline").text("Você esta online");
					}
				}else{
					if (!notifier.hasClass("offline")){
						notifier.show();
						jQuery(this).addClass("offline").removeClass("online").text("Sua conexão esta falhando");
					}
				};
			});
			
		});



</script>

<style type="text/css">
	
	* {
		font-family:verdana, arial, helvetica, sans-serif;
		font-weight:bold;
	}
	
	#notifier{
		border:1px solid #CCCCCC;
		color:#333333;
		margin-left:36%;
		padding:20px;
		position:absolute;
		text-align:center;
		width:300px;
	}
	
	#notifier.online{
		color:#fff;
		background:#3c3;
		border-color:#3c3;
	}
	
	#notifier.offline{
		color:#fff;
		background:#f66;
		border-color:#f66;
	}
	
	
</style>


<body class="pagLogin">
	
	<div id="notifier" style="display: none;" class="subscriber networkDetection online">ONLINE</div>
	
</body>
Displaying 1 Code