jQuery Examples

jQuery Examples:

Some basic jQuery examples I created over time to help me learn jQuery. Hopefully you find this helpful as well! I appologize as some of these examples are a work in progress.

Sliding Panel
Used .click method to capture the event and then the .slideToggle method to slide the div into view matching the height of the element. CSS used to hide the div id panel until button event (click) occurs.

.slideToggle( [ duration ], [ callback ] ) - Allows for a callback function that calls once the animation is complete

Inside 1
Inside 2
$('#slider').click(function() { $('#panel').slideToggle("slow");return false; });

Accordian
With the click method attached to the H3 Title tags of each section we use the .slideToggle method to display the content. The .eq method is used to specify a specific element within a set of matched elements. In thise case we chose .eq(2). At the same time the .siblings() method is used to get the siblings or the p element and apply the .slideup method which hides the matching elements with a sliding motion.

Title Here

The contents of your accordian can go here. Graphics, text, more elements or whatever you like can be placed in here. Try it for yourself!

Title Here

The contents of your accordian can go here. Graphics, text, more elements or whatever you like can be placed in here. Try it for yourself!

Title Here

The contents of your accordian can go here. Graphics, text, more elements or whatever you like can be placed in here. Try it for yourself!

Title Here

The contents of your accordian can go here. Graphics, text, more elements or whatever you like can be placed in here. Try it for yourself!

$('.accordion h3').eq(2).addClass('active'); $('.accordion p').eq(2).show(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });

Hover Fun

  1. Used .append method to add em elements.
  2. Then used the .hover for the button element.
  3. Used the .find method to get the descendant em of element button.
  4. Used the .animate method to animate the em.
  5. Created a variable hoverText using .attr method to extract the title text from each button.
  6. .text method to add the text to the em element.
  7. CSS used to set display: none; and position: absolute;


$(".hmenu button").append("<em></em>") $(".hmenu button").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); });



Animate Hide method
We use the .click method to fire when the link is clicked. We then use the .parents method which grabs the ancestor/div of the a element. We then use the .animate method to hide the div slowly with an opacity change as it gets hidden. return false at the end to prevent the default link action.

Guess What

Now you see me

But when you click these XOXO's I'm gone!


$(".simplehide .simplehide2").click(function(){ $(this).parents(".simplehide").animate({opacity: "hide" }, "slow"); return false; });



Chain Gang
We are chaining multiple methods here. Watch speedy zip around the screen.



Event Click Handler:
(Hides then shows again, threw on a blue border for fun. Also displays url of link clicked)
Example Link $(".link-notify").click(function(event){ alert("You just clicked " + this.href); event.preventDefault(); .hide("slow").show("slow"); $(this).hide("slow").show("slow").addClass("setBold"); });

Change Page Style sheet to: $("#css-normal").click(function() { $("link[rel=stylesheet]").attr({href : "web_design.css"}); }); // blue $("#css-blue").click(function() { $("link[rel=stylesheet]").attr({href : "blue.css"}); }); // green $("#css-green").click(function() { $("link[rel=stylesheet]").attr({href : "green.css"}); });
Overlay Fun
[Initiate Overlay]
[ x ]

Overlay Success

The overlay has essentially taken the size of the div.



$("#overlay-test").click( function() { var position = $(".basic-info").offset(); // Grabs the position alert("overlay fired"); $("#populate-overlay").css( { position: "absolute", left: position.left, top: position.top } ).show(); } ); $(".close-x").click(function () { $(this).parent().hide(); }); $(".cancel-overlay").click(function () { $(this).parent().hide(); });


Highlight and paragraph change

This is an example paragraph one.

This is an example paragraph two.

This is an example paragraph three.

This is an example paragraph four.

$("p.highlight").click(function () { $(this).toggleClass("highlight").html("I'm am now a funky light switch now! Click me on and off."); }); $(".paragraph-example").click(function() { var str = $(".paragraph-example p:first").text(); $(".paragraph-example p:last").html(str).addClass("highlight"); });
Cool use of the jquery HTML method :


preview here:
$("#codehere").keyup(function() { $("#preview").html($(this).val()) })


.mouseover & .animate example $('#myBox').mouseover(function() { $(this).animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 500 ); });

Using jQuery to stripe and hover-highlight a table

Topic Course on Lynda.com
Ajax 4hrs 22mins
XML / XSLT 5hrs 48mins
ASP.NET Essential Training 6hrs 5mins
PHP MYSQL 11hrs!


Using Ajax to load an XML document
In this example the .get method is used to pull components of the XML document.
XML to populate here (click inside this div)
$('#xml-example').toggle(function() { $.get('test_file.xml', function(data) { $('#xml-example').empty(); $(data).find('entry').each(function() { var $entry = $(this); var html = '<div class="entry">'; html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; html += '<div class="part">' + $entry.attr('part') + '</div>'; html += '<div class="definition">'; html += $entry.find('definition').text(); var $quote = $entry.find('quote'); if ($quote.length) { html += '<div class="quote">'; $quote.find('line').each(function() { html += '<div class="quote-line">' + $(this).text() + '</div>'; }); if ($quote.attr('author')) { html += '<div class="quote-author">' + $quote.attr('author') + '</div>'; } html += '</div>'; } html += '</div>'; html += '</div>'; $('#xml-example').append($(html)); }); }); return false; }, function() { $('#xml-example').empty(); });

.Each Method
Description: Iterate over a jQuery object, executing a function for each matched element. It's designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element. (Source api.jquery.com)

$('#mylist a').click(function() { $('#mylist li').each(function(index) { alert(index + ': ' + $(this).text()); }); });

AJAX - Communication between client and server
The server can dynamically shape data based on input from the user/browser/client. Using the .click method the user selects from the list of links. Using the .load method, data (test.php) is loaded from the server and returned into the matched element (id - ajax-list1). We use the .text method to get the contents of the element (in this case the a link).

Ajax List

$(document).ready(function() { $('#ajax-call a').click(function() { $('#ajax-list1').load('test.php', {'term': $(this).text()}); return false; }); });

AJAX load
.click method loads an html file when button is clicked.


Should pop here





Form Validation Using jQuery:

A simple comment form with submit validation and default messages

*

*

 

*