My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.
jQuery jQuery is quickly becoming THE Javascript library of choice (surpassing Prototype), it is simple and powerful (chaining), and plugins are easy to write for it. It is also now included in Microsoft's ASP.NET MVC.
|
 | Nice effect to know about, would need the right context, demo on first page. |
| Very classy with transparency titles. |
| Very easy to use, intuitive, etc. |
| Article describing why you shouldn't host your own jquery but instead just reference the jquery on Google's servers, speeds things up, I just use the latter simple example, works well. UNCOMFIRMED CAVEAT: I've heard that people who have done this on their personal sites could not access these sites from within their companies since some companies have policies which disallow pulling script from other sites (protection against cross scripting). |
| Would be very useful in forms, e.g. telephone numbers. |
| A photoviewer that makes the pictures pop out but also with next and previous, nice. |
| Image on left in demo works well, one one right with click is skippy. |
|
| Classy way to show old-style pictures that have a white frame. |
| Nice way to have a menu on the left of the page hidden and then click a link and it slides in. |
 | Allows you to basically do asserts (.ok) on jquery, project by John Resig, integrates with firebug. |
| Seems to be a library built on top of jQuery itself, reusable widgets, nice demos, take a look. |
 | Simplest JQuery code to get you started Once you see how easy JQuery is you won't stop, especially if you have had to do multi-browser programming in Javascript.
|
| Simple jQuery example to get started If you have never used jQuery, copy this code into a text file called test.htm and run it in your browser. Since the jQuery is hosted by Google, the script will run anywhere you have an Internet connection, without having any jQuery libraries local. Then see the jQuery documentation and see how quick you can get amazine UI effects working in all major browsers. 
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); function highlightIt() { $('#selected') .toggleClass('highlighted'); } </script> <style> p.highlighted { background-color:orange; } p.regular { font-weight: bold; } </style> </head> <body> <h1>Text</h1> <p>First</p> <p>Second</p> <p id="selected" class="regular">Third</p> <p>Fourth</p> <form> <input type="button" value="highlight it" onclick="highlightIt()"/> </form> </body> </html> |
| Basic jQuery with google code reference This is some code for a HTML/jquery/css base site I created just trying out some basic jQuery functionality. Notice it loads jQuery from the Google cache and hence has the google.setOnLoadCallback function for document.ready events. I use this as base code for HTML/css/jquery projects that I do from scratch.  index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Text XHTML Page</title> <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="javascript/main.js"></script> </head> <body> <h1 class="highlightTitle">Text</h1> <p class="main">First</p> <p>Second</p> <p id="selected" class="regular">Third</p> <p>Fourth</p> <div> <input id="button1" type="button" value="highlight it" /> <input id="button2" type="button" value="toggle title" /> <p>here is another paragraph</p> </div> </body> </html> main.css:
p.highlighted {
background-color:orange; } h1.highlightTitle { background-color:yellow; } h1.deselected { background-color:#eee; } p.regular { font-weight: bold; } .newone { font-size: 48pt; color: green; margin: 24px; } p.first { background-color: green; } p.last { background-color: red; } main.js:
google.load("jquery", "1.3.2"); //run when page is loaded google.setOnLoadCallback(function() { $("p").css("border","3px solid red"); $("h1").css("font-size", "80px"); $("p:first").addClass("first"); $("p:last").addClass("last"); $("#button1").css("background-color", "green"); $("#button1").bind("click",highlightIt); $("#button1").bind("click",countThem); $("#button2").bind("click",highlightTitle); }); function highlightIt() { $('#selected').toggleClass('highlighted'); } function countThem() { alert("there are " + $("p.main").size() + " paragraphs"); } function highlightTitle() { $("h1").toggleClass("deselected"); } |
| Simple flashcard with jQuery Here's the HTML and Javascript for a simple flashcard with jQuery.  HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Text XHTML Page</title> <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="javascript/main.js"></script> </head> <body> <div id="flashcard-001" class="flashcard"> <div class="question">What color is the sky?</div> <div class="answer">blue</div> <button class="show">Show</button> <button class="hide">Hide</button> </div> </body> </html> Javascript:
google.load("jquery", "1.3.2");
//run when page is loaded google.setOnLoadCallback(function() { $("div#flashcard-001 div.answer").hide(); $("div#flashcard-001 button.show").bind("click", function(e) { $("div#flashcard-001 div.answer").show(); }); $("div#flashcard-001 button.hide").bind("click", function(e) { $("div#flashcard-001 div.answer").hide(); }); }); |
| More jQuery Basics I used this file to learn some more basics of jQuery, mostly element selecting syntax.  HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Text XHTML Page</title> <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="javascript/main.js"></script> </head> <body> <div id="flashcard-001" class="flashcard"> <div class="question">What color is the sky?</div> <div class="answer">blue</div> <button class="show">Show</button> <button class="hide">Hide</button> </div> <ul class="infoList"> <li>first</li> <li>second</li> <li>third</li> <li id="special" style="font-size: 22pt">fourth</li> <li>fifth</li> <li id="bonus">sixth</li> <li>seventh</li> </ul> </body> </html> JavaScript:
google.load("jquery", "1.3.2"); //run when page is loaded google.setOnLoadCallback(function() { $("div#flashcard-001 div.answer").hide(); $("div#flashcard-001 button.show").bind("click", function(e) { //$("div#flashcard-001 div.answer").show(); $("div#flashcard-001 div.answer").slideDown(); //$("div#flashcard-001 div.answer").fadeIn('slow'); }); $("div#flashcard-001 button.hide").bind("click", function(e) { //$("div#flashcard-001 div.answer").hide(); $("div#flashcard-001 div.answer").slideUp(); //$("div#flashcard-001 div.answer").fadeOut('slow'); }); $("div")[1].innerHTML = "What color is an apple?"; $("div")[2].innerHTML = '<span style="font-size:48pt;color:red">red</span>'; $("div")[1].innerHTML = "What color is grass?"; $("div")[2].innerHTML = '<span style="font-size:48pt;color:green">green</span>'; //$("body div button")[0].css('background-color', 'green'); //does not work //$("body div button").cssText = 'background-color', 'blue'; //does not work $("body div button:first").css('background-color', 'red'); $("body div button").eq(0).css('color', 'yellow'); $('<h1 id="title" style="margin-bottom:10px">Flashcard:</h1>').insertBefore('div:first'); $(':visible').css('background-color', 'tan'); $('button').css('cursor','hand'); $('button').css('cursor','pointer'); //give every element a 10px top margin $('*').css('margin-top', '10px'); $('ul.infoList').css('margin', '20px 0 0 20px'); $('ul.infoList :even').css('color', 'green').css('font-style', 'italic'); $('ul.infoList :odd').css('color', 'blue'); $('li[style]').css('color', 'red'); //add another one to the list $('<li>another one</li>').insertAfter('ul.infoList li:last'); //MOVE the button $('button:first').insertAfter('ul.infoList'); //makes all LI items in infolist bold $('ul.infoList li:contains("o")').css('font-weight', 'bold'); //all LI elements which have an id attribute $('ul.infoList li[id]').css('color', 'purple'); //all LI elements which where id="bonus" $('ul.infoList li[id="bonus"]').css('background-color', 'brown'); //determines if element is a DIV if($('#flashcard-001').is('div')) { $('<p>Yes, flashcard-001 is a DIV.</p>').insertBefore('#title'); } else { $('<p>No, flashcard-001 is not a DIV.</p>').insertBefore('#title'); } //choose the third element $('ul.infoList li:eq(2)').css('background-color','yellow'); }); |
| A jQuery checkbox example with fadeIn status message This example shows how to have a message inform the user how many items are checked each time a an item is checked.  > > > Download Code > > > View Demo HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Text XHTML Page</title> <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="javascript/main.js"></script> </head> <body> <div class="checkboxList"> <div class="title">Languages:</div> <div class="row"><input class="checkbox" type="checkbox"/><span class="label">Ruby</span></div> <div class="row"><input type="checkbox"/><span class="label">PHP</span></div> <div class="row"><input type="checkbox"/><span class="label">C#</span></div> <div class="row"><input type="checkbox"/><span class="label">Python</span></div> <div class="row"><input type="checkbox"/><span class="label">JavaScript</span></div> </div> <p id="message"></p> </body> </html> Javascript:
google.load("jquery", "1.3.2");
//run when page is loaded google.setOnLoadCallback(function() { //$('.checkboxList .row').css('color','red'); //colors all red //$('.checkboxList input').attr('checked', true); //checks them all $('.checkboxList input').bind('click', function() { var numberOfItems = $('.checkboxList input:checked').length; //$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow'); $('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language',numberOfItems) + ".").fadeIn('slow'); }); function smartPlural(itemName, numberOfItems) { if(numberOfItems == 1) { return itemName; } else { return itemName + 's'; } } }); |
| Multiple select box with jQuery Shows how to respond to a user clicking on items in a multiple select box. Notice that you have to use append instead of insertAfter.  > > > Download Code > > > View Demo HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Text XHTML Page</title> <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="javascript/main.js"></script> </head> <body> <div class="languageChooser"> <div class="title">Please choose a language:</div> <select size="4" multiple="multiple"> <option>C#</option> <option>Ruby</option> <option>PHP</option> <option>VB.NET</option> <option>JavaScript</option> <option>Scala</option> </select> <div id="message"></div> </div> </body> </html> JavaScript:
google.load("jquery", "1.3.2"); //run when page is loaded google.setOnLoadCallback(function() { $('.languageChooser select').bind('click', function() { var numberOfItems = $('.languageChooser select option:selected').length; $('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language',numberOfItems) + ".").fadeIn('slow'); if(numberOfItems == 1) { $('#message').append('<div>Use the CTRL and SHIFT keys to select multiple items.</div>'); } }); function smartPlural(itemName, numberOfItems) { if(numberOfItems == 1) { return itemName; } else { return itemName + 's'; } } }); |
| JQuery all-in-one template page for quick examples This is a HTML/Javascript/JQuery/CSS template that I use to quickly try out a JQuery example or post an issue on a forum. It loads the latest version of jquery from google, everything all in one page, just change the jquery, javascript, css, html as you need it. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); google.setOnLoadCallback(function() { $('#first').css("background-color","lightgreen"); $('#toggleButton').css("background-color","yellow").click(highlightIt); }); function highlightIt() { $('#selected').toggleClass('highlighted'); } </script> <style> p.highlighted { background-color:yellow; } p.regular { font-weight: normal; } </style> </head> <body> <p id="first">First</p> <p>Second</p> <p id="selected" class="regular">Third</p> <p>Fourth</p> <input id="toggleButton" type="button" value="toggle highlight on 3rd paragraph"/> </body> </html> |
| How to make open/close flashcards with JQuery This example shows you how to make flashcards so that the user can click on the header to open and close them.  > > > View Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.4.0"); google.setOnLoadCallback(function() { $("div > div.question").click(function() { if($(this).next().is(':hidden')) { $(this).next().fadeIn("slow"); } else { $(this).next().fadeOut("slow"); } }); }); </script> <style> div.flashcard { margin: 0 10px 10px 0; } div.flashcard div.question { background-color:#ddd; width: 400px; padding: 5px; cursor: hand; cursor: pointer; } div.flashcard div.answer { background-color:#eee; width: 400px; padding: 5px; display: none; } </style> </head> <body> <div id="1" class="flashcard"> <div class="question">Who was Wagner?</div> <div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div> </div> <div id="2" class="flashcard"> <div class="question">Who was Thalberg?</div> <div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div> </div> </body> </html> |
| How to load and display the contents of a text file with AJAX/Jquery This example shows allows the user to click a button which loads and displays the contents of a text file (via proxy on the same domain). 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.4.2"); google.setOnLoadCallback(function() { $('#loadButton').click(loadDataFromExernalWebsite); }); function loadDataFromExernalWebsite() { var currentDomain = document.domain; $('#content').load('http://' + currentDomain + '/web/getdata/index.php?url=http://www.tanguay.info/knowsite/data.txt'); } </script> <style type="text/css"> .contentArea { background-color: #eee; padding: 10px; } </style> </head> <body> <p>Click the button to load content:</p> <input id="loadButton" type="button" value="load content"/> <pre id="content" class="contentArea">...</pre> </body> </html> |
| Simple example of javascript which loads jquery locally Just download the latest version from jquery.com (click the button and copy/paste the text into e.g. the file /jquery-1.4.2.min.js). 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div > div.question").click(function() { if($(this).next().is(':hidden')) { $(this).next().fadeIn("slow"); } else { $(this).next().fadeOut("slow"); } }); }); </script> <style> div.flashcard { margin: 0 10px 10px 0; } div.flashcard div.question { background-color:#ddd; width: 400px; padding: 5px; cursor: hand; cursor: pointer; } div.flashcard div.answer { background-color:#eee; width: 400px; padding: 5px; display: none; } </style> </head> <body> <div id="1" class="flashcard"> <div class="question">Who was Wagner?</div> <div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div> </div> <div id="2" class="flashcard"> <div class="question">Who was Thalberg?</div> <div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div> </div> </body> </html> |
| A simple jquery search machine for a web page This example shows how easy it is with JQuery to put a little form on the page that allows a user to search for a keyword which highlights that keyword on the page. 
<!DOCTYPE html>
<html> <head> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('jquery', '1.4.2'); google.setOnLoadCallback(function() { $('#searchButton').click(function() { $('p').removeClass('highlight'); $('p:contains("' + $('#searchText').val() + '")').addClass('highlight'); }); }); </script> <style> p { color: brown; } p.highlight { background-color: orange; } body { background-color: beige; } </style> </head> <body> <input id="searchText" value="second" /> <button id="searchButton">Search</button> <p>This is the first entry.</p> <p>This is the second entry.</p> <p>This is the third entry.</p> <p>This is the fourth entry.</p> </body> </html> |
 | Book Notes posted on Wednesday, January 28, 2009 permalink
jQuery UI 1.6: The User Interface Library for jQuery by Dan Wellman "jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications."
|
 | How to create tabs with jQuery UI Tabs are a space saver that are welcome on almost any site. This how-to shows you step-by-step how to quickly integrate them into your site using the jQuery UI. The full download for the tabs with stylesheet is 122K so you have to be sure to test the loading on slow connections, but if this isn't a problem, jQuery makes tabs and other controls very easy to add useful UI controls to your site. 
|
