JQuery

Column 1:

Example A (View in External Browser)

Get number of paragraphs in column 2 and display that number in an alert box. Including the one in the red box.

//Code for example A
$("input.buttonAsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
//show code example A
$("a.codeButtonA").click(function(){$("pre.codeA").toggle()});

Example B

Animate a paragraph in Column 2 by using a slide animation.

Show / Hide jquery code

//Code for example B
$("input.buttonBslidedown").click(function(){ $("div.contentToChange").find("p.fourthparagraph:hidden").slideDown("slow"); });
$("input.buttonBslideup").click(function(){ $("div.contentToChange").find("p.fourthparagraph:visible").slideUp("slow"); });
//show code example B
$("a.codeButtonB").click(function(){$("pre.codeB").toggle()});

Example C

Add/Remove text from the end of all <p> elements in column 2 except the paragraph in the red box.

Show / Hide jquery code

//Code for example C
$("input.buttonCAdd").click(function(){$("div.contentToChange").find("p").not(".alert").append("<strong class=\"addedtext\"> This text was just appended to this paragraph</strong>")});
$("input.buttonCRemove").click(function(){$("strong.addedtext").remove()});
//show code example C
$("a.codeButtonC").click(function(){$("pre.codeC").toggle()});

Example D

Remove paragraph with fade and animation.

Show / Hide jquery code

//Code for example D
$("input.buttonDhide").click(function(){ $("div.contentToChange").find("strong").hide("slow"); });
//show code example D
$("a.codeButtonD").click(function(){$("pre.codeD").toggle()});

Example E

Change the font weight and color of all Italic text in column 2 by adding CSS properties and values to all <em> elements.

Show / Hide jquery code

//Code for example E
$("input.buttonEitalics").click(function(){ $("div.contentToChange").find("em").css({color:"#993300", fontWeight:"bold"}); });
//show code example E
$("a.codeButtonF").click(function(){$("pre.codeF").toggle()});

Example F

Change the CSS on the first paragraph in Column 2 by adding a class value to the <p> element. Adding this new class value to the first p element will place the paragraph in a absolute position box in the upper left hand corner.

Show / Hide jquery code

//Code for example F
$("input.buttonFaddclass").click(function(){ $("p.firstparagraph").addClass("changeP"); });
$("input.buttonFremoveclass").click(function(){ $("p.firstparagraph").removeClass("changeP"); });
//show code example F
$("a.codeButtonF").click(function(){$("pre.codeF").toggle()});

Column 2:

Use the buttons to the left in the examples to run JQuery code on the structural markup below. Showing the code for each example will display the javascript required for the input buttons, the changes to the structural markup below, and the hide / show feature in the examples.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.