2. Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I JQuery Part II Jongwook Woo, PhD jwoo5@calstatela.edu California State University, Los Angeles Computer Information System Department

3. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Content njQuery Events njQuery Effects njQuery Callback

4. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System jQuery Events nExample next page: mFocus –Change background color of an input field when it gets focus mBlur –Change background color of an input field when it loses focus (blur) Event MethodDescription $(document).ready(function) Binds a function to the ready event of a document (when the document is finished loading) $(selector).click(function)Triggers, or binds a function to the click event of selected elements $(selector).dblclick(function)Triggers, or binds a function to the double click event of selected elements $(selector).focus(function)Triggers, or binds a function to the focus event of selected elements $(selector).mouseover(function)Triggers, or binds a function to the mouseover event of selected elements

5. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Focus and blur events $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); Enter your name: Click in the input field to get focus, and outside the input field to lose focus (blur).

6. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Effects nhide(): How to hide parts of text. nshow(): How to show parts of text. mhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjque ry_hide_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjque ry_hide_slow nslideToggle(): show and hide tags with slide panel effect. mhttp://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_slide_togglehttp://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_slide_toggle nfadeTo(): Demonstrates a simple jQuery fadeTo() method. nanimate(): Demonstrates a simple jQuery animate() method.

7. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Hide()/show() $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); If you click on the "Hide" button, I will disappear. Hide Show

8. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System slideToggle() and FadeTo() n$(selector).slideToggle(speed,callback) mThe speed parameter can take the following values: –"slow", "fast", "normal", or milliseconds mThe callback parameter –is the name of a function to be executed after the function completes. mhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_togg lehttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_togg le n$(selector).fadeTo(speed,opacity,callback) mThe speed parameter can take the following values: –"slow", "fast", "normal", or milliseconds. mThe callback parameter –is the name of a function to be executed after the function completes mThe opacity parameter in the fadeTo() method –allows fading to a given opacity. mhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto

9. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System slideToggle() $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); div.panel,p.flip /* look of panel and flip elements */ { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; }

10. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System slideToggle() (cont’d) div.panel /* initial look of panel element: hidden as none display */ { height:120px; display:none; } Because time is valuable, we deliver quick and easy learning. At W3Schools, you can study everything you need to learn, in an accessible and handy format. Show/Hide Panel

11. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System jQuery Custom Animations n$(selector).animate({params},[duration],[easing],[call back]) nExample manimate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSiz e:"3em"}); mThe key parameter is params. –It defines the CSS properties that will be animated. –Many properties can be animated at the same time: mThe second parameter is duration. –It specifies the speed of the animation. –Possible values are "fast", "slow", "normal", or milliseconds. mhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjque ry_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjque ry_animation

12. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System animate() $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); Start Animation

13. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System jQuery CallBack Function nA callback function is executed after the current effect is finished. mError in animations –JavaScript statements are executed line by line. –However, with effect, the next line of code can be run even though the animation is not finished. This can create errors. –To prevent this, you can create a callback function. The callback function will not be called until after the animation is finished. nTypical syntax: $(selector).hide(speed, callback) m$("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); –The callback parameter is a function to be executed after the hide effect is completed: –With Callback: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_right –Without Callback: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_wrong

14. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System CallBack Function $(document).ready(function(){ $("button").click(function(){ /* without callback $("p").hide(1000); alert("The paragraph is now hidden"); */ $("p").hide(1000,function(){ // with callback alert("The paragraph is now hidden"); }); Hide This is a paragraph with little content.