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 });
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 });
http://docs.jQuery.com/DOM/Traversing/Selectors
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
1 <a href="#top" onclick="$('html, body').animate({scrollTop:0}, 'slow'); return false;">top</a>
1 $(document).ready(function() { 2 $('dd').toggle(); 3 $('dt').click(function() {$(this).next('dd').toggle('slideDown');}); 4 });
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 });
http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/
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();
from: http://www.position-absolute.com/articles/jquery-fade-and-slide-toggle-plugin/
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();
1 $(document).ready(function() { jQuery.fn.each( function(i) { console.log(i); }); });
http://ralphwhitbeck.com/content/binary/twitter-json-jquery.html
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>
from http://benjaminsterling.com/blog-news-ticker/
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>