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.
 
JQUERY TOOL created on Thursday, December 18, 2008 permalink
Nice effect to know about, would need the right context, demo on first page.
 
JQUERY TOOL created on Sunday, December 28, 2008 permalink
Very classy with transparency titles.
 
JQUERY TOOL created on Monday, December 29, 2008 permalink
Very easy to use, intuitive, etc.
 
JQUERY TOOL created on Monday, December 29, 2008 permalink
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).
 
JQUERY TOOL created on Monday, December 29, 2008 permalink
Would be very useful in forms, e.g. telephone numbers.
 
JQUERY TOOL created on Friday, January 02, 2009 permalink
A photoviewer that makes the pictures pop out but also with next and previous, nice.
 
JQUERY TOOL created on Friday, January 02, 2009 permalink
Image on left in demo works well, one one right with click is skippy.
 
JQUERY TOOL created on Friday, January 02, 2009 permalink
NO_GRAPHIC: examples.*
Might use this for my web developer site for short news items, nice "view all" and "view less" options.
 
JQUERY TOOL created on Saturday, January 03, 2009 permalink
Classy way to show old-style pictures that have a white frame.
 
JQUERY TOOL created on Friday, January 09, 2009 permalink
Nice way to have a menu on the left of the page hidden and then click a link and it slides in.
 
JQUERY RADAR ITEM created on Thursday, December 18, 2008 permalink
Allows you to basically do asserts (.ok) on jquery, project by John Resig, integrates with firebug.
 
JQUERY RADAR ITEM created on Friday, January 02, 2009 permalink
Seems to be a library built on top of jQuery itself, reusable widgets, nice demos, take a look.
 
JQUERY CODE EXAMPLE created on Tuesday, January 13, 2009 permalink
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.
  1. Download jquery and put the file in a folder called "javascript".
  2. copy this code into a file called "index.htm" and you'll be started with JQuery (see live example here):
    <!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 jQuery UI Page</title>
        <style type="text/css">
        .test {width:200px}
        </style>
        <script type="text/javascript" src="javascript/jquery-1.2.6.min.js"></script>
        <script type="text/javascript">

            //called when the page is finished loading
            $(document).ready(function() {

                //hide the answer and define how it looks
                $("div#answer").hide().css("background-color", "yellow").css("width", "100px").css("padding", "5px").css("margin", "5px").css("text-align", "center");

                //make the cursor be a hand when hovering over it
                $("div#question").css("cursor","pointer").css("cursor","hand");

                //when question is clicked, fade in the answer
                $("div#question").click(function(event) {
                    $("div#answer").fadeIn("fast");
                    $("h3#title").fadeOut("slow");
                    $("h3#title").html("<p><a href='http://docs.jquery.com/Selectors/id#id'>have fun learning more about jQuery</a></p>").fadeIn("slow");
                });

            });
        </script>
    </head>

    <body>
        <h3 id="title">Click the question to see the answer:</h3>
        <div id="question">Q: How do you say "good morning" in German?</div>
        <div id="answer">Guten Morgen</div>

    </body>

    </html>
  3. Then go to the jQuery documentation site to learn more.
 
JQUERY CODE EXAMPLE created on Friday, September 11, 2009 permalink
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>
 
JQUERY CODE EXAMPLE created on Saturday, September 26, 2009 permalink
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");
}
 
JQUERY CODE EXAMPLE created on Sunday, September 27, 2009 permalink
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();
    });
});
 
JQUERY CODE EXAMPLE created on Sunday, September 27, 2009 permalink
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');
});
 
JQUERY CODE EXAMPLE created on Tuesday, September 29, 2009 permalink
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.
> > > 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';
        }
    }

});
 
JQUERY CODE EXAMPLE created on Friday, October 02, 2009 permalink
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.
> > > 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 CODE EXAMPLE created on Wednesday, January 27, 2010 permalink
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>
 
JQUERY CODE EXAMPLE created on Monday, February 01, 2010 permalink
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>
 
JQUERY CODE EXAMPLE created on Sunday, May 02, 2010 permalink
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>
 
JQUERY CODE EXAMPLE created on Wednesday, July 07, 2010 permalink
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>
 
JQUERY CODE EXAMPLE created on Sunday, August 22, 2010 permalink
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>
 
JQUERY CODE EXAMPLE created on Sunday, November 14, 2010 permalink
Simple menu site with jQuery AJAX
Simple example of using jQuery's $.get() to make a quick responding site that shows text in a display box based on menu selection.
> > > View Demo
<!DOCTYPE html>
<html>
<head>
    <title>JQuery AJAX Menu</title>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            showText('welcome');
            $('#buttonWelcome').click(function () {
                showText('welcome');
            });
            $('#buttonInfo').click(function () {
                showText('info');
            });
            $('#buttonHelp').click(function () {
                showText('help');
            });

            function showText(idCode) {
                $.get('content/' + idCode + '.txt', function (data) {
                    $('#content').text(data);
                });
            }
        });
    </script>
    <style type="text/css">
        button::-moz-focus-inner
        {
            border: 0;
        }
        button
        {
            background-color: beige;
            cursor: hand;
            cursor: pointer;
        }
        #content .
        {
            background-color: beige;
            border: 1px solid #555;
            height: 200px;
            width: 300px;
            margin-top: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button id='buttonWelcome'>
        Welcome</button>
    <button id='buttonInfo'>
        Info</button>
    <button id='buttonHelp'>
        Help</button>
    <div id="content">
    </div>
</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."
No notes recorded yet on this book.
Review completed.
 
JQUERY HOWTO created on Sunday, May 03, 2009 permalink
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.
  1. Go to http://jqueryui.com/download.
  2. Deselect all components.
  3. Check UI Core and Tabs.
  4. Keep the theme on "smoothness".
  5. Click the download button.
  6. When it asks for directory, save it to c:\temp and then unzip it there to a folder with the same name, i.e. c:\temp\jquery-ui-1.7.1.custom.
  7. create a file called c:\webs\tabsdemo\index.htm with the following code:
    <!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 jQuery UI Page</title>
        <style type="text/css">
        .test {
            width:200px
        }
        </style>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
        <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
        
        <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
        </script>

    </head>

    <body>

        <div id="tabs" style="width: 300px; font-size: 10pt">
            <ul>
                <li><a href="#tabs-1">Member Info</a></li>
                <li><a href="#tabs-2">Event Info</a></li>
                <li><a href="#tabs-3">Help</a></li>
            </ul>
            <div id="tabs-1">
                <p>As a member you can log in, etc. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan.</p>
            </div>
            <div id="tabs-2">
                <p>Here is the information about the event, etc. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan.</p>
            </div>
            <div id="tabs-3">
                <p>This is general help that will help you out. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan.</p>
            </div>
        </div>
    </body>
    </html>
  8. Copy the directory C:\temp\jquery-ui-1.7.1.custom\css to c:\webs\tabsdemo\css.
  9. Copy the directory C:\temp\jquery-ui-1.7.1.custom\js to c:\webs\tabsdemo\js.
  10. Double-click on c:\webs\tabsdemo\index.htm and you will see your tabs.
  11. Now open C:\temp\jquery-ui-1.7.1.custom\development-bundle\demos\index.html with your browser and tweak the tabs example and try out other jQuery controls.
 
JQUERY HOWTO created on Sunday, November 14, 2010 permalink
How to setup JQuery intellisense in Microsoft Visual Web Developer 2010 Express
If you are working on Windows, Visual Web Developer 2010 Express has very nice intellisense for Jquery, here's how.
  1. First download the free Visual Web Developer 2010 Express.
  2. Then download jquery-1.4.1-vsdoc.js.
  3. Then put in the following line in your code and you'll have jquery intellisense.