Column 1:

---

Example A

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

Show / Hide jquery code

//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()});

---

Example G

Add a yellow fade to each paragraph in column 2 (except text in red box) on mouseover. Must mouse over paragraphs to see yellow fade.

Show / Hide jquery code

//Code for example G
$("input.buttonGyellowfade").click(function(){ $("div.contentToChange").find("p").not(".alert").bind("mouseover",addFade); });
//show code example G
$("a.codeButtonG").click(function(){$("pre.codeG").toggle()});


function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
	var delta = maxValue - minValue;
	var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
	return Math.ceil(stepp)
}

function addFade() {
		doBGFade(this,[255,255,100],[255,255,255],'transparent',75,20,4);
	}
	
function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
	if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
	var actStep = 0;
	elem.bgFadeInt = window.setInterval(
		function() {
			elem.style.backgroundColor = "rgb("+
				easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
				easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
				easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")";
			actStep++;
			if (actStep > steps) {
			elem.style.backgroundColor = finalColor;
			window.clearInterval(elem.bgFadeInt);
			}
		}
		,intervals)
}

---