codestacker

smooth scrolling with jquery

   1  // Smooth scrolling within page anchors
   2  $('a[href*=#]').click(function() {
   3      
   4    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
   5          
   6          var $target = $(this.hash);
   7              
   8          $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
   9              
  10          if ($target.length) {
  11                var targetOffset = $target.offset().top;
  12                $('html,body').animate({scrollTop: targetOffset}, 1000);
  13                return false;       
  14          }      
  15       }        
  16  });

// Smooth scrolling within page anchors
$('a[href*=#]').click(function() {
    
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        
        var $target = $(this.hash);
            
        $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            
        if ($target.length) {
              var targetOffset = $target.offset().top;
              $('html,body').animate({scrollTop: targetOffset}, 1000);
              return false;       
        }      
     }        
});

created by leozera — 17 May 2010 — get a short url — tags: javascript jquery — embed

clean way to open a popup window

show/hide lines

   1  $('a.popup').live('click', function(){
   2  	newwindow=window.open($(this).attr('href'),'','height=200,width=150');
   3  	if (window.focus) {newwindow.focus()}
   4  	return false;
   5  });

$('a.popup').live('click', function(){
	newwindow=window.open($(this).attr('href'),'','height=200,width=150');
	if (window.focus) {newwindow.focus()}
	return false;
});

created by leozera — 16 December 2009 — get a short url — tags: javascript jquery — embed

seletores do jquery

http://docs.jQuery.com/DOM/Traversing/Selectors

show/hide lines

   1  $('h1') // elementos h1
   2  $('#meuID') // elementos com id "meuID"
   3  $('.minhaClasse') // elementos definidos com a classe "minhaClasse"
   4  $('[width]') // elementos que possuem o atributo width definido
   5  $('[width=500]') // elementos que possuem o atributo width definido como 500
   6  $('img[width=300]') // imagens que possuem largura = 300
   7  $('img[src$=png]') // imagens com final png
   8  $('a[href^=http://localhost]') // links que comecem com http://localhost
   9  $('a[href$=pdf]') // links com final pdf
  10  $('a[href*=www]') // links que contém www
  11  $(':empty') // elementos vazio
  12  $('div:empty') // elementos div vazios
  13  $(':has(p)') // todos elementos que tenham um parágrafo
  14  $('div:has(a)'); // elementos div que possuem link
  15  $("p:contains('dinei')") // parágrafos que contém a palavra "dinei"
  16  $("p:eq(0)") // seleciona o primeiro elemento p

$('h1') // elementos h1
$('#meuID') // elementos com id "meuID"
$('.minhaClasse') // elementos definidos com a classe "minhaClasse"
$('[width]') // elementos que possuem o atributo width definido
$('[width=500]') // elementos que possuem o atributo width definido como 500
$('img[width=300]') // imagens que possuem largura = 300
$('img[src$=png]') // imagens com final png
$('a[href^=http://localhost]') // links que comecem com http://localhost
$('a[href$=pdf]') // links com final pdf
$('a[href*=www]') // links que contém www
$(':empty') // elementos vazio
$('div:empty') // elementos div vazios
$(':has(p)') // todos elementos que tenham um parágrafo
$('div:has(a)'); // elementos div que possuem link
$("p:contains('dinei')") // parágrafos que contém a palavra "dinei"
$("p:eq(0)") // seleciona o primeiro elemento p

created by leozera — 25 November 2009 — get a short url — tags: javascript jquery — embed

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.

show/hide lines

   1  <script type="text/javascript">
   2  		jQuery.networkDetection = function(url,interval){
   3  			
   4  			var url = url;
   5  			var interval = interval;
   6  			online = false;
   7  			this.StartPolling = function(){
   8  				this.StopPolling();
   9  				this.timer = setInterval(poll, interval);
  10  			};
  11  			
  12  			this.StopPolling = function(){
  13  				clearInterval(this.timer);
  14  			};
  15  			
  16  			this.setPollInterval= function(i) {
  17  				interval = i;
  18  			};
  19  			
  20  			this.getOnlineStatus = function(){
  21  				return online;
  22  			};
  23  			
  24  			function poll() {
  25  				jQuery.ajax({
  26  					type: "POST",
  27  					url: url,
  28  					dataType: "text",
  29  					error: function(){
  30  						online = false; 
  31  						jQuery(document).trigger('status.networkDetection',[false]);
  32  					},
  33  					success: function(){
  34  						online = true; 
  35  						jQuery(document).trigger('status.networkDetection',[true]);
  36  					}
  37  				});
  38  			};
  39  			
  40  			
  41  		};
  42  					
  43  		jQuery(document).ready(function(){
  44  			
  45  			network = new jQuery.networkDetection("/poll", 5000);
  46  			network.StartPolling();
  47  			
  48  			jQuery(document).bind("status.networkDetection", function(e, status){	
  49  				// subscribers can be namespaced with multiple classes
  50  				subscribers = jQuery('.subscriber.networkDetection');
  51  				// publish notify.networkDetection to subscribers
  52  				subscribers.trigger("notify.networkDetection", [status])
  53  				/*
  54  				other logic based on network connectivity could go here
  55  				use google gears offline storage etc
  56  				maybe trigger some other events
  57  				*/
  58  			});
  59  			
  60  			/* 
  61  			Listen for notify.networkDetection events. This could equally be listening
  62  			directly to status.networkDetection events
  63  			*/
  64  			jQuery('#notifier').bind("notify.networkDetection",function(e, online){
  65  				// the following simply demonstrates
  66  				notifier = jQuery(this);
  67  				if(online){
  68  					if (!notifier.hasClass("online")){
  69  						notifier.hide();
  70  						jQuery(this).addClass("online").removeClass("offline").text("Você esta online");
  71  					}
  72  				}else{
  73  					if (!notifier.hasClass("offline")){
  74  						notifier.show();
  75  						jQuery(this).addClass("offline").removeClass("online").text("Sua conexão esta falhando");
  76  					}
  77  				};
  78  			});
  79  			
  80  		});
  81  
  82  
  83  
  84  </script>
  85  
  86  <style type="text/css">
  87  	
  88  	* {
  89  		font-family:verdana, arial, helvetica, sans-serif;
  90  		font-weight:bold;
  91  	}
  92  	
  93  	#notifier{
  94  		border:1px solid #CCCCCC;
  95  		color:#333333;
  96  		margin-left:36%;
  97  		padding:20px;
  98  		position:absolute;
  99  		text-align:center;
 100  		width:300px;
 101  	}
 102  	
 103  	#notifier.online{
 104  		color:#fff;
 105  		background:#3c3;
 106  		border-color:#3c3;
 107  	}
 108  	
 109  	#notifier.offline{
 110  		color:#fff;
 111  		background:#f66;
 112  		border-color:#f66;
 113  	}
 114  	
 115  	
 116  </style>
 117  
 118  
 119  <body class="pagLogin">
 120  	
 121  	<div id="notifier" style="display: none;" class="subscriber networkDetection online">ONLINE</div>
 122  	
 123  </body>

<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>

created by thiagonego — 11 September 2009 — get a short url — tags: offline online jQuery javascript — embed

copy to clipboard

show/hide lines

   1  function copyToClipBoard(id) {
   2      Copied = document.getElementById('id').innerText.createTextRange();
   3      Copied.execCommand("Copy");
   4  }

function copyToClipBoard(id) {
    Copied = document.getElementById('id').innerText.createTextRange();
    Copied.execCommand("Copy");
}

created by leozera — 22 August 2009 — get a short url — tags: javascript — embed

unobstrusive popup

http://www.quirksmode.org/js/popup.html

show/hide lines

   1     function popup(url) {
   2          newWindow = window.open(url, 'name', 'height=400,width=335,scrollbars=yes');
   3          if (window.focus) { newWindow.focus() }
   4              return false;
   5      }
   6  
   7  // <a href="link.html" onclick="popup('link.html');">Link</a>

   function popup(url) {
        newWindow = window.open(url, 'name', 'height=400,width=335,scrollbars=yes');
        if (window.focus) { newWindow.focus() }
            return false;
    }

// <a href="link.html" onclick="popup('link.html');">Link</a>

created by leozera — 22 August 2009 — get a short url — tags: html javascript popup — embed

hide/show dl list with jquery

show/hide lines

   1  		$(document).ready(function() {
   2  			$('dd').toggle();
   3  			$('dt').click(function() {$(this).next('dd').toggle('slideDown');});
   4  		});

		$(document).ready(function() {
			$('dd').toggle();
			$('dt').click(function() {$(this).next('dd').toggle('slideDown');});
		});

created by leozera — 22 August 2009 — get a short url — tags: javascript jquery — embed

hover for ie 6

show/hide lines

   1  /* IE6 - pseudo class :hover */ 
   2  $(document).ready(function(){ 
   3  	if(jQuery.browser.msie && jQuery.browser.version<7){ 
   4  		$('[class*="bla"]').hover( 
   5  		function () { 
   6  			$(this).addClass('hover'); 
   7  		}, 
   8  		function () { 
   9  			$(this).removeClass('hover'); 
  10  		} 
  11  		); 
  12  	} 
  13  });

/* IE6 - pseudo class :hover */ 
$(document).ready(function(){ 
	if(jQuery.browser.msie && jQuery.browser.version<7){ 
		$('[class*="bla"]').hover( 
		function () { 
			$(this).addClass('hover'); 
		}, 
		function () { 
			$(this).removeClass('hover'); 
		} 
		); 
	} 
});

created by leozera — 10 August 2009 — get a short url — tags: browser hack ie ie6 javascript jquery — embed

vertical align plugin for jquery

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/

show/hide lines

   1  (function ($) {
   2  // VERTICALLY ALIGN FUNCTION
   3  $.fn.vAlign = function() {
   4  	return this.each(function(i){
   5  	var ah = $(this).height();
   6  	var ph = $(this).parent().height();
   7  	var mh = (ph - ah) / 2;
   8  	$(this).css('margin-top', mh);
   9  	});
  10  };
  11  })(jQuery);
  12  
  13  // $('#mydiv').vAlign();

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);

// $('#mydiv').vAlign();

created by leozera — 07 August 2009 — get a short url — tags: javascript jquery plugin — embed

jquery fade and slide toggle plugin

from: http://www.position-absolute.com/articles/jquery-fade-and-slide-toggle-plugin/

show/hide lines

   1  jQuery.fn.fadeSliderToggle = function(settings) {
   2   	 settings = jQuery.extend({
   3  		speed:500,
   4  		easing : "swing"
   5  	}, settings)
   6  	
   7  	caller = this
   8   	if($(caller).css("display") == "none"){
   9   		$(caller).animate({
  10   			opacity: 1,
  11   			height: 'toggle'
  12   		}, settings.speed, settings.easing);
  13  	}else{
  14  		$(caller).animate({
  15   			opacity: 0,
  16   			height: 'toggle'
  17   		}, settings.speed, settings.easing);
  18  	}
  19  };
  20  
  21  // use: $('#my_div').fadeSliderToggle();

jQuery.fn.fadeSliderToggle = function(settings) {
 	 settings = jQuery.extend({
		speed:500,
		easing : "swing"
	}, settings)
	
	caller = this
 	if($(caller).css("display") == "none"){
 		$(caller).animate({
 			opacity: 1,
 			height: 'toggle'
 		}, settings.speed, settings.easing);
	}else{
		$(caller).animate({
 			opacity: 0,
 			height: 'toggle'
 		}, settings.speed, settings.easing);
	}
};

// use: $('#my_div').fadeSliderToggle();

created by leozera — 12 July 2009 — get a short url — tags: javascript jquery plugin — embed

codestacker is a community to share snippets easily!

Login

Login

you are in: codestacker → codes [RSS] → tag: javascript [RSS]

smooth scrolling with jquery

Send this to a friend

clean way to open a popup window

Send this to a friend

seletores do jquery

Send this to a friend

Detectar se o browser estar offline ou online

Send this to a friend

copy to clipboard

Send this to a friend

unobstrusive popup

Send this to a friend

hide/show dl list with jquery

Send this to a friend

hover for ie 6

Send this to a friend

vertical align plugin for jquery

Send this to a friend

jquery fade and slide toggle plugin

Send this to a friend