CIS 461 Web Development I

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

Content • jQuery Events • jQuery Effects • jQuery Callback

jQuery Events • Example next page: • Focus • Change background color of an input field when it gets focus • Blur • Change background color of an input field when it loses focus (blur)

Focus and blur events <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); }); }); </script> </head> <body> Enter your name: <input type="text" /> <p>Click in the input field to get focus, and outside the input field to lose focus (blur).</p> </body> </html>

Effects • hide(): How to hide parts of text. • show(): How to show parts of text. • http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow • slideToggle(): show and hide tags with slide panel effect. • http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle • fadeTo(): Demonstrates a simple jQuery fadeTo() method. • animate(): Demonstrates a simple jQuery animate() method.

Hide()/show() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html>

slideToggle() and FadeTo() • $(selector).slideToggle(speed,callback) • The speed parameter can take the following values: • "slow", "fast", "normal", or milliseconds • The callback parameter • is the name of a function to be executed after the function completes. • http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle • $(selector).fadeTo(speed,opacity,callback) • The speed parameter can take the following values: • "slow", "fast", "normal", or milliseconds. • The callback parameter • is the name of a function to be executed after the function completes • The opacity parameter in the fadeTo() method • allows fading to a given opacity. • http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto

slideToggle() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip /* look of panel and flip elements */ { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; }

slideToggle() (cont’d) div.panel /* initial look of panel element: hidden as none display */ { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">Show/Hide Panel</p> </body> </html>

jQuery Custom Animations • $(selector).animate({params},[duration],[easing],[callback]) • Example • animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}); • The key parameter is params. • It defines the CSS properties that will be animated. • Many properties can be animated at the same time: • The second parameter is duration. • It specifies the speed of the animation. • Possible values are • "fast", "slow", "normal", or milliseconds. • http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

animate() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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"); }); }); </script> </head> <body> <button>Start Animation</button> <br/> <br/> <div style="background:#98bf21;height:100px;width:100px;position:relative"> </div> </body> </html>

jQuery CallBack Function • A callback function is executed after the current effect is finished. • Error 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. • Typical syntax: $(selector).hide(speed, callback) • $("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

CallBack Function <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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"); }); }); }); </script> </head> <body> <button>Hide</button> <p>This is a paragraph with little content.</p> </body> </html>

CIS 461 Web Development I