jquery — codestacker

clean way to open a popup window

   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

back to top

show/hide lines

   1  <a href="#top" onclick="$('html, body').animate({scrollTop:0}, 'slow'); return false;">top</a>

<a href="#top" onclick="$('html, body').animate({scrollTop:0}, 'slow'); return false;">top</a>

created by leozera — 22 August 2009 — get a short url — tags: html javascript jquery — 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

list all jquery function with firebug

show/hide lines

   1  $(document).ready(function() { jQuery.fn.each( function(i) { console.log(i); }); });

$(document).ready(function() { jQuery.fn.each( function(i) { console.log(i); }); });

created by leozera — 21 June 2009 — get a short url — tags: firebug firefox javascript jquery — embed

jquery twitter

http://ralphwhitbeck.com/content/binary/twitter-json-jquery.html

show/hide lines

   1  <html>
   2  <head>
   3  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
   4  <script>
   5  	$(document).ready( function() {
   6  	
   7  		var url = "http://twitter.com/status/user_timeline/RedWolves.json?count=3&callback=?";
   8  		$.getJSON(url,
   9          function(data){
  10  			$.each(data, function(i, item) {
  11  				$("img#profile").attr("src", item.user["profile_image_url"]); 
  12  				$("#tweets ul").append("<li>" + item.text.linkify() + " <span class='created_at'>" + relative_time(item.created_at) + " via " + item.source + "</span></li>");
  13  			});
  14          });
  15  	});
  16  	
  17  	String.prototype.linkify = function() {
  18  		return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
  19      return m.link(m);
  20    });
  21   }; 
  22    function relative_time(time_value) {
  23  	  var values = time_value.split(" ");
  24  	  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  25  	  var parsed_date = Date.parse(time_value);
  26  	  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  27  	  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  28  	  delta = delta + (relative_to.getTimezoneOffset() * 60);
  29  	  
  30  	  var r = '';
  31  	  if (delta < 60) {
  32  	    r = 'a minute ago';
  33  	  } else if(delta < 120) {
  34  	    r = 'couple of minutes ago';
  35  	  } else if(delta < (45*60)) {
  36  	    r = (parseInt(delta / 60)).toString() + ' minutes ago';
  37  	  } else if(delta < (90*60)) {
  38  	    r = 'an hour ago';
  39  	  } else if(delta < (24*60*60)) {
  40  	    r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
  41  	  } else if(delta < (48*60*60)) {
  42  	    r = '1 day ago';
  43  	  } else {
  44  	    r = (parseInt(delta / 86400)).toString() + ' days ago';
  45  	  }
  46  	  
  47  	  return r;
  48  }
  49  function twitter_callback ()
  50  {
  51  	return true;
  52  }
  53  
  54  </script>	
  55  </head>
  56  <body>
  57  	<div id="tweets">
  58  		<img id="profile">
  59  		<ul></ul>
  60  	</div>
  61  </body>
  62  </html>

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
	$(document).ready( function() {
	
		var url = "http://twitter.com/status/user_timeline/RedWolves.json?count=3&callback=?";
		$.getJSON(url,
        function(data){
			$.each(data, function(i, item) {
				$("img#profile").attr("src", item.user["profile_image_url"]); 
				$("#tweets ul").append("<li>" + item.text.linkify() + " <span class='created_at'>" + relative_time(item.created_at) + " via " + item.source + "</span></li>");
			});
        });
	});
	
	String.prototype.linkify = function() {
		return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
    return m.link(m);
  });
 }; 
  function relative_time(time_value) {
	  var values = time_value.split(" ");
	  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
	  var parsed_date = Date.parse(time_value);
	  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
	  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
	  delta = delta + (relative_to.getTimezoneOffset() * 60);
	  
	  var r = '';
	  if (delta < 60) {
	    r = 'a minute ago';
	  } else if(delta < 120) {
	    r = 'couple of minutes ago';
	  } else if(delta < (45*60)) {
	    r = (parseInt(delta / 60)).toString() + ' minutes ago';
	  } else if(delta < (90*60)) {
	    r = 'an hour ago';
	  } else if(delta < (24*60*60)) {
	    r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
	  } else if(delta < (48*60*60)) {
	    r = '1 day ago';
	  } else {
	    r = (parseInt(delta / 86400)).toString() + ' days ago';
	  }
	  
	  return r;
}
function twitter_callback ()
{
	return true;
}

</script>	
</head>
<body>
	<div id="tweets">
		<img id="profile">
		<ul></ul>
	</div>
</body>
</html>

created by leozera — 10 May 2009 — get a short url — tags: javascript jquery twitter — embed

cool newsticker using jquery

from http://benjaminsterling.com/blog-news-ticker/

show/hide lines

   1  <html>
   2  	<head>
   3          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4          <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
   5          <script type="text/javascript">
   6  			var height = 0;
   7  			var to = null;
   8  			var theAnimation;
   9  			var newsScroller;
  10  			$(document)
  11  			.ready(function(){
  12  				newsScroller = $('#newsScroller');
  13  				
  14  				var curSet = newsScroller
  15  				.prev()
  16  					.addClass('ns')
  17  				.end()
  18  				.wrap('<div>')
  19  				.parent()
  20  					.addClass('ns')
  21  				.end()
  22  				.wrap('<div>')
  23  				.children()
  24  				.slice(0,4)
  25  				.each(function(){
  26  					height += $(this).outerHeight(true);
  27  				});
  28  				
  29  				theAnimation = function(){
  30  					if( !newsScroller.is(':animated') ){
  31  						newsScroller.animate({top:-height},1000,function(){
  32  							height = 0;
  33  							curSet = newsScroller
  34  							.append(curSet)
  35  							.css('top',0)
  36  							.children()
  37  							.slice(0,4)
  38  							.each(function(){
  39  								height += $(this).outerHeight(true);
  40  							});
  41  						});
  42  					}
  43  				};
  44  				
  45  				to = setInterval(theAnimation,4000);
  46  				
  47  				newsScroller.bind('mouseenter',function(){
  48  					clearInterval(to);
  49  				})
  50  				.bind('mouseleave',function(){
  51  					theAnimation();
  52  					to = setInterval(theAnimation,4000);
  53  				});
  54  			});
  55  		</script>
  56          <style media="screen, projector">
  57  			h3#newsScrollerTitle{
  58  				margin:0;
  59  				padding:0;
  60  				font:bold 14px/1.2 Georgia, "Times New Roman", Times, serif;
  61  			}
  62  			dl#newsScroller{
  63  				font:normal 11px/1.4 Arial, Helvetica, sans-serif;
  64  				padding:0;
  65  				margin:0;
  66  			}
  67  			dl#newsScroller dt{
  68  				font-weight:bold;
  69  			}
  70  			dl#newsScroller dd{
  71  				padding:0 0 0 11px;
  72  				margin:0;
  73  			}
  74  			dl#newsScroller dd p{
  75  				padding:0;
  76  				margin:0 0 11px 0;
  77  			}
  78  			dl#newsScroller dd + dd{
  79  				padding:0 0 0 22px;
  80  			}
  81  			
  82  			h3#newsScrollerTitle.ns{
  83  				padding:5px 11px;
  84  				border:1px solid #B18C58;
  85  				border-bottom:none;
  86  				background:#beb677;
  87  				width:278px;
  88  			}
  89  			div.ns{
  90  				padding:11px;
  91  				border:1px solid #B18C58;
  92  				border-top:none;
  93  				background:#E8E4B4;
  94  				width:278px;
  95  				height:300px;
  96  				position:relative;
  97  				overflow:hidden;
  98  			}
  99  			div.ns div{
 100  				height:300px;
 101  				overflow:hidden;
 102  			}
 103  			div.ns dl{
 104  				position:relative;
 105  				top:0;
 106  			}
 107  			div.ns dl dt,
 108  			div.ns dl dd{
 109  				position:relative;
 110  			}
 111  		</style>
 112      </head>
 113      
 114      <body>
 115      	<h3 id="newsScrollerTitle">Our News</h3>
 116      	<dl id="newsScroller">
 117          	<dt>Web Tech November Meetup Presentation</dt>
 118              <dd>
 119                  <p>Last night I had the opportunity to speak at the Web Tech 
 120                  November Meetup in Baltimore about jQuery.  I focused mainly 
 121                  on traversing since I believe once you fully grasp some of 
 122                  the built in jQuery traversing methods you can do just about 
 123                  anything using jQuery and do it easily.</p>
 124                  <p>Preparations<br/>
 125                  I spent about three weeks getting [...]</p>
 126  			</dd>
 127              <dd>Tuesday, November 25th, 2008</dd>
 128              <dd>Posted in Presentations, Web Development, jQuery | Edit | No Comments Â»</dd>
 129              
 130          	<dt>Slide in tab window using jQuery</dt>
 131              <dd>
 132                  <p>Say you want to wanted to put little tabs - you know, the 
 133                  ones like what you get from a lawyer or a realestate again to
 134                  point out important things - off the side of your page so that
 135                  your users can click, bring that tab into view to see what 
 136                  important information you want [...]</p>
 137              </dd>
 138              <dd>Thursday, November 20th, 2008</dd>
 139              <dd>Posted in Tips, Tutorials, Web Development, jQuery | Edit | 5 Comments Â»</dd>
 140              
 141          	<dt>Better jQuery Code #2</dt>
 142              <dd>
 143                  <p>In a follow up to my Better jQuery Code #1 post I will be
 144                  writing about some other small items that I have found to make
 145                  my code better and more readable.</p>
 146                  <p>Chaining<br/>
 147                  Chaining is one of the most beautiful and time save pieces of 
 148                  code structure that jQuery brought to the game, the problem is
 149                  is [...]   </p>         
 150              </dd>
 151              <dd>Sunday, November 16th, 2008</dd>
 152              <dd>Posted in Tips, Web Development, jQuery | Edit | 2 Comments Â»</dd>
 153              
 154          	<dt>Better jQuery Code #1</dt>
 155              <dd>
 156                  <p>I've been wanting to write some jQuery tips for a while now 
 157                  and just never know what to really say until I saw Marc 
 158                  Grabanski's 5 Tips for Better jQuery Code.  Although I have 
 159                  tips, I don't think I have any that are Earth shattering or ones
 160                  that I can rank higher then the other, [...]</p>            
 161              </dd>
 162              <dd>Saturday, November 15th, 2008</dd>
 163              <dd>Posted in Tips, Web Development, jQuery | Edit | 8 Comments Â»</dd>
 164              
 165          	<dt>Release of jQuery UI v1.5</dt>
 166              <dd>
 167                  <p>Well ladies and gents, it is finally here! Mark June 9th, 2008
 168                  as the day the web got better, jQuery's long awaited release of 
 169                  it's UI library update is here. Flushed with many bug fixes, a bunch
 170                  of really good examples, many new features and a theme builder.</p>
 171                  When jQuery UI first came out [...]            
 172              </dd>
 173              <dd>Monday, June 9th, 2008</dd>
 174              <dd>Posted in jQuery | Edit | 2 Comments Â»</dd>
 175          </dl>
 176      </body>
 177  </html>

<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
			var height = 0;
			var to = null;
			var theAnimation;
			var newsScroller;
			$(document)
			.ready(function(){
				newsScroller = $('#newsScroller');
				
				var curSet = newsScroller
				.prev()
					.addClass('ns')
				.end()
				.wrap('<div>')
				.parent()
					.addClass('ns')
				.end()
				.wrap('<div>')
				.children()
				.slice(0,4)
				.each(function(){
					height += $(this).outerHeight(true);
				});
				
				theAnimation = function(){
					if( !newsScroller.is(':animated') ){
						newsScroller.animate({top:-height},1000,function(){
							height = 0;
							curSet = newsScroller
							.append(curSet)
							.css('top',0)
							.children()
							.slice(0,4)
							.each(function(){
								height += $(this).outerHeight(true);
							});
						});
					}
				};
				
				to = setInterval(theAnimation,4000);
				
				newsScroller.bind('mouseenter',function(){
					clearInterval(to);
				})
				.bind('mouseleave',function(){
					theAnimation();
					to = setInterval(theAnimation,4000);
				});
			});
		</script>
        <style media="screen, projector">
			h3#newsScrollerTitle{
				margin:0;
				padding:0;
				font:bold 14px/1.2 Georgia, "Times New Roman", Times, serif;
			}
			dl#newsScroller{
				font:normal 11px/1.4 Arial, Helvetica, sans-serif;
				padding:0;
				margin:0;
			}
			dl#newsScroller dt{
				font-weight:bold;
			}
			dl#newsScroller dd{
				padding:0 0 0 11px;
				margin:0;
			}
			dl#newsScroller dd p{
				padding:0;
				margin:0 0 11px 0;
			}
			dl#newsScroller dd + dd{
				padding:0 0 0 22px;
			}
			
			h3#newsScrollerTitle.ns{
				padding:5px 11px;
				border:1px solid #B18C58;
				border-bottom:none;
				background:#beb677;
				width:278px;
			}
			div.ns{
				padding:11px;
				border:1px solid #B18C58;
				border-top:none;
				background:#E8E4B4;
				width:278px;
				height:300px;
				position:relative;
				overflow:hidden;
			}
			div.ns div{
				height:300px;
				overflow:hidden;
			}
			div.ns dl{
				position:relative;
				top:0;
			}
			div.ns dl dt,
			div.ns dl dd{
				position:relative;
			}
		</style>
    </head>
    
    <body>
    	<h3 id="newsScrollerTitle">Our News</h3>
    	<dl id="newsScroller">
        	<dt>Web Tech November Meetup Presentation</dt>
            <dd>
                <p>Last night I had the opportunity to speak at the Web Tech 
                November Meetup in Baltimore about jQuery.  I focused mainly 
                on traversing since I believe once you fully grasp some of 
                the built in jQuery traversing methods you can do just about 
                anything using jQuery and do it easily.</p>
                <p>Preparations<br/>
                I spent about three weeks getting [...]</p>
			</dd>
            <dd>Tuesday, November 25th, 2008</dd>
            <dd>Posted in Presentations, Web Development, jQuery | Edit | No Comments Â»</dd>
            
        	<dt>Slide in tab window using jQuery</dt>
            <dd>
                <p>Say you want to wanted to put little tabs - you know, the 
                ones like what you get from a lawyer or a realestate again to
                point out important things - off the side of your page so that
                your users can click, bring that tab into view to see what 
                important information you want [...]</p>
            </dd>
            <dd>Thursday, November 20th, 2008</dd>
            <dd>Posted in Tips, Tutorials, Web Development, jQuery | Edit | 5 Comments Â»</dd>
            
        	<dt>Better jQuery Code #2</dt>
            <dd>
                <p>In a follow up to my Better jQuery Code #1 post I will be
                writing about some other small items that I have found to make
                my code better and more readable.</p>
                <p>Chaining<br/>
                Chaining is one of the most beautiful and time save pieces of 
                code structure that jQuery brought to the game, the problem is
                is [...]   </p>         
            </dd>
            <dd>Sunday, November 16th, 2008</dd>
            <dd>Posted in Tips, Web Development, jQuery | Edit | 2 Comments Â»</dd>
            
        	<dt>Better jQuery Code #1</dt>
            <dd>
                <p>I've been wanting to write some jQuery tips for a while now 
                and just never know what to really say until I saw Marc 
                Grabanski's 5 Tips for Better jQuery Code.  Although I have 
                tips, I don't think I have any that are Earth shattering or ones
                that I can rank higher then the other, [...]</p>            
            </dd>
            <dd>Saturday, November 15th, 2008</dd>
            <dd>Posted in Tips, Web Development, jQuery | Edit | 8 Comments Â»</dd>
            
        	<dt>Release of jQuery UI v1.5</dt>
            <dd>
                <p>Well ladies and gents, it is finally here! Mark June 9th, 2008
                as the day the web got better, jQuery's long awaited release of 
                it's UI library update is here. Flushed with many bug fixes, a bunch
                of really good examples, many new features and a theme builder.</p>
                When jQuery UI first came out [...]            
            </dd>
            <dd>Monday, June 9th, 2008</dd>
            <dd>Posted in jQuery | Edit | 2 Comments Â»</dd>
        </dl>
    </body>
</html>

created by leozera — 20 April 2009 — get a short url — tags: jquery — embed

codestacker

codestacker is a community to share snippets easily!

Login

Login

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

clean way to open a popup window

Send this to a friend

seletores do jquery

Send this to a friend

back to top

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

list all jquery function with firebug

Send this to a friend

jquery twitter

Send this to a friend

cool newsticker using jquery

Send this to a friend