tag:blogger.com,1999:blog-82037160890474640692024-10-24T15:54:29.391-07:00i can code! for Web.icancode-4-web.blogspot.comErikhttp://www.blogger.com/profile/04983894331825656853noreply@blogger.comBlogger104125tag:blogger.com,1999:blog-8203716089047464069.post-46019372661744194002011-12-26T01:23:00.001-08:002011-12-26T01:25:14.697-08:00YUI - a FREE JavaScript and CSS framework<a href="http://yuilibrary.com/img/yui-logo.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 117px; height: 52px;" src="http://yuilibrary.com/img/yui-logo.png" border="0" alt="" /></a><br />YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications. YUI is provided under a BSD license and is available on GitHub for forking and contribution.<br /><br />link: <a href="http://yuilibrary.com/">http://yuilibrary.com/</a>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-73421601442363859072011-12-01T13:18:00.000-08:002011-12-01T13:19:46.328-08:00Introducing testing web apps with WebDriverSelenium WebDriver is a browser automation tool which provides a lightweight and elegant way for testing web apps. Selenium WebDriver is now available as an SDK extra in the Android SDK, and supports 2.3 (Gingerbread) and onwards!<br /><br />Whether or not your site is optimized for mobile browsers, you can be sure that users will be accessing it from their phones and tablets. WebDriver makes it easy to write automated tests that ensure your site works correctly when viewed from the Android browser. We’ll walk you through some basics about WebDriver and look at it in action.<br /><br />know more: <a href="http://android-developers.blogspot.com/2011/10/introducing-android-webdriver.html">Android Developers Blog - Introducing Android WebDriver</a><br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-18938703248964091952011-11-08T23:27:00.000-08:002011-11-08T23:30:57.716-08:00OAuth 2.0 Playground announcedGoogle announced the <a href="https://code.google.com/oauthplayground/"><b>OAuth 2.0 Playground</b></a>, which simplifies experimentation with the OAuth 2.0 protocol and APIs that use the protocol. Trying out some requests in the OAuth 2.0 playground can help understand how the protocol functions and make life easier when the time comes to use OAuth in your own code.<br /><br />Source: <a href="http://googleappsdeveloper.blogspot.com/2011/11/oauth-20-playground-open-to-developers.html">Google Apps Developer Blog - OAuth 2.0 Playground: Open to Developers!</a><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uew3pUsga0kxcNUQh-fgbLUvN3g-UWjkeI9HToEoYfbO3O5RWwxQI17NMzgBVriJ0Z3T7B6hFZeHNXTocplcQpQh4BzqbbWOFtHVw64LAQnCzGutyrovUzZ1FdOtHlacg7q9eMjGsRw/s500/image02.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 337px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uew3pUsga0kxcNUQh-fgbLUvN3g-UWjkeI9HToEoYfbO3O5RWwxQI17NMzgBVriJ0Z3T7B6hFZeHNXTocplcQpQh4BzqbbWOFtHVw64LAQnCzGutyrovUzZ1FdOtHlacg7q9eMjGsRw/s500/image02.png" border="0" alt="OAuth 2.0 Playground" title="OAuth 2.0 Playground" /></a><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-55807484746094137892011-10-27T14:19:00.000-07:002011-10-27T14:25:01.158-07:00Add code assist for jQuery in AptanaTo enable the code assist for jQuery in <a href="http://icancode-4-web.blogspot.com/2011/06/aptana-studio.html">Aptana Studio 3</a>, Download and Add the .sdocml file here: <a href="https://github.com/aptana/javascript-jquery.ruble/tree/master/support">https://github.com/aptana/javascript-jquery.ruble/tree/master/support</a><br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-81675907938742777672011-10-21T12:24:00.000-07:002011-10-21T12:34:45.924-07:00Implement Slider using HTML5 an JavaScriptThis example show how to implement a slider using HTML5 and JavaScript. To demonstrate the effect, code from "<a href="http://icancode-4-web.blogspot.com/2011/10/jquery-exercise-change-font-size.html">jQuery exercise: change font-size</a>" is borrowed, to change text size when slide is changed.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsX8exsDM1aK52burEX95KzL56dzZPPwKJz_J4lDdxh6gKJqnSQU8J-qSfTexzLcjyyE44ED0HtGx3WNQr9FVRS8f7kHL8U90ftgqQrY-YDHwR_5ur0jkwQ4RpFgBYw0CMNdA2EbXg0U/s1600/slider.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 277px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsX8exsDM1aK52burEX95KzL56dzZPPwKJz_J4lDdxh6gKJqnSQU8J-qSfTexzLcjyyE44ED0HtGx3WNQr9FVRS8f7kHL8U90ftgqQrY-YDHwR_5ur0jkwQ4RpFgBYw0CMNdA2EbXg0U/s400/slider.png" border="0" alt="Implement Slider using HTML5 an JavaScript" title="Implement Slider using HTML5 an JavaScript" id="BLOGGER_PHOTO_ID_5666030998008546946" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><script src="http://code.jquery.com/jquery-latest.js"></script><br /><style><br />body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }<br />h1{font: bold italic 20pt helvetica}<br /><br />#mytext {<br /> font-size: 20px<br />}<br /><br /></style><br /></head><br /><body><br /><center><br /><input id="slide" type="range" min="8" max="50" value="20"? onChange="changeTextSize(this.value)" step="1"/><br /><p id="mytext">Change TEXT size by Slider</p><br /><br /></center><br /><script><br /><br />function changeTextSize(fontsize) {<br /> $("#mytext").css("font-size", fontsize+"px");<br />}<br /><br /></script><br /></body><br /></html><br /></pre>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-18781106441193856732011-10-20T14:51:00.000-07:002011-10-20T14:53:57.167-07:00Javascript Exercise: Get text and change textexample:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvTxKiNvhELxbfjJIWEhEUrUywNNfwP4c634RQLvIZwelFui6jen7IbFpKBF1b9l9Aa2avfIFgfcqcO8Ene5LHXOZqpjS1ydhGdn4Pd9YcSHYe5RNAMQaBKHpb11JBtG5TolGvQgzAhk/s1600/changetext.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 196px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvTxKiNvhELxbfjJIWEhEUrUywNNfwP4c634RQLvIZwelFui6jen7IbFpKBF1b9l9Aa2avfIFgfcqcO8Ene5LHXOZqpjS1ydhGdn4Pd9YcSHYe5RNAMQaBKHpb11JBtG5TolGvQgzAhk/s400/changetext.png" border="0" alt="Javascript Exercise: Get text and change text" title="Javascript Exercise: Get text and change text" id="BLOGGER_PHOTO_ID_5665695543538382466" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html> <br /><html><br /><head><br /><meta charset="UTF-8"><br /><title>Get input</title><br /></head><br /><body><br /><h1>Get input and change text</h1><br /><p id="mytextchanged">Hello!</p><br /><input id="mytext" type="text"><br /><br /><input type="button" value="Click Me" onClick="showMe()" /><br /><br /><script type="text/javascript"><br /> function showMe() {<br /> var msg = document.getElementById("mytext").value;<br /> document.getElementById("mytextchanged").innerHTML = msg;<br /> }<br /></script><br /><br /></body><br /></html><br /></pre><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-88266241047494590492011-10-20T10:31:00.000-07:002011-10-20T10:33:47.570-07:00Read input text using JavaScript<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOVWGC2R4m9bHCH_35_yK2ujzOgyxONCbQd_BLkD5h33fxj5vycTmCv_a6XwNANJO9ouUiVcyi4H8cFmMBlE6O4PQOwRRgWulaZfOXVGosuwgZrDFHe8wzkPPU5rGw2QVdLCKXotYOxM/s1600/test_input.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 207px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOVWGC2R4m9bHCH_35_yK2ujzOgyxONCbQd_BLkD5h33fxj5vycTmCv_a6XwNANJO9ouUiVcyi4H8cFmMBlE6O4PQOwRRgWulaZfOXVGosuwgZrDFHe8wzkPPU5rGw2QVdLCKXotYOxM/s400/test_input.png" border="0" alt="Read input text using JavaScript" title="Read input text using JavaScript" id="BLOGGER_PHOTO_ID_5665628738432869922" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html> <br /><html><br /><head><br /><meta charset="UTF-8"><br /><title>Get input</title><br /></head><br /><body><br /><h1>Get input</h1><br /><br /><input id="mytext" type="text"><br /><br /><input type="button" value="Click Me" onClick="showMe()" /><br /><br /><script type="text/javascript"><br /> function showMe() {<br /> var msg = document.getElementById("mytext").value;<br /> alert(msg);<br /> }<br /></script><br /><br /></body><br /></html><br /></pre><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-78185923884305550412011-10-17T06:28:00.001-07:002011-10-17T06:31:02.424-07:00Play mp4 using HTML5Example to play mp4 in HTML5.<br /><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /></head><br /><body><br /><br /><video src="http://video.ch9.ms/ch9/51fe/77b82ce9-bbbc-4b9c-b19a-9f6b017551fe/MVP1understandingwptools_low_ch9.mp4"<br /> controls autoplay loop> <br /><p>Sorry! Your browser doesn't support video.</p> <br /></video><br /><br /></body><br /></html><br /></pre><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCfhrNDEtK9wIQlupkQx6hzsmwIpTG0jvsDQByU1de0ncaZOHrfhkN62V_z7MQjqomRQhVUEyvOU4UzRw6ZJpbwoe4wMdnjMUg4pq8imFUFhO2t-6qrT3akIO0sZHJDImWX0V_Q1DU6pk/s1600/play_mp4.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 264px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCfhrNDEtK9wIQlupkQx6hzsmwIpTG0jvsDQByU1de0ncaZOHrfhkN62V_z7MQjqomRQhVUEyvOU4UzRw6ZJpbwoe4wMdnjMUg4pq8imFUFhO2t-6qrT3akIO0sZHJDImWX0V_Q1DU6pk/s400/play_mp4.png" border="0" alt="Play mp4 using HTML5" title="Play mp4 using HTML5" id="BLOGGER_PHOTO_ID_5664452637122016978" /></a><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-31795996576805708682011-10-14T14:16:00.000-07:002011-10-21T12:29:54.658-07:00jQuery exercise: change font-size<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZ4nUdqOwFxI9gZuMIWXnTukUWMcLF4aofqP1c5CkWMbCsNgx8Ifdab12S-P6lZG6sDEIImb8GI7qqNqxOnEPF6uVC6EgzpOYJw8EYVOv4jADfB1jHnOF1N5nH8f42iRr_fMC6VxTlv4/s1600/textsize.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 160px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZ4nUdqOwFxI9gZuMIWXnTukUWMcLF4aofqP1c5CkWMbCsNgx8Ifdab12S-P6lZG6sDEIImb8GI7qqNqxOnEPF6uVC6EgzpOYJw8EYVOv4jADfB1jHnOF1N5nH8f42iRr_fMC6VxTlv4/s400/textsize.png" border="0" alt="jQuery exercise: change font-size" title="jQuery exercise: change font-size" id="BLOGGER_PHOTO_ID_5663460154107974194" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><script src="http://code.jquery.com/jquery-latest.js"></script><br /><style><br />body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }<br />h1{font: bold italic 20pt helvetica}<br /><br />#mytext {<br /> font-size: 20px<br />}<br /> <br /></style><br /></head><br /><body><br /><center><br /><p id="mytext">Change TEXT size by UP/DOWN key</p><br /></center><br /><script><br />$(function(){<br /> <br /> var KEY_UP = 38;<br /> var KEY_DOWN = 40;<br /> <br /> //Set listener for keydown<br /> $(document).keydown(function(e){<br /> $("#mytext2").html("- keydown -");<br /> switch(e.which){<br /> case KEY_UP:<br /> var fontsize = parseInt($("#mytext").css("font-size")) + 2;<br /> $("#mytext").css("font-size", fontsize+"px");<br /> break;<br /> case KEY_DOWN:<br /> var fontsize = parseInt($("#mytext").css("font-size")) - 2;<br /> $("#mytext").css("font-size", fontsize+"px");<br /> break;<br /> }<br /> });<br /><br />});<br /></script><br /></body><br /></html><br /></pre><br /><br/><br />Related: <a href="http://icancode-4-web.blogspot.com/2011/10/implement-slider-using-html5-javascript.html">Implement Slider using HTML5 an JavaScript</a><br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-16985215333976249272011-10-13T06:40:00.001-07:002011-10-13T06:42:43.073-07:00jQuery exercise: get key input, to change CSS layout.By merging of the exercises "<a href="http://icancode-4-web.blogspot.com/2011/10/jquery-exercise-get-key-input.html">jQuery exercise: get key input</a>" and "<a href="http://icancode-4-web.blogspot.com/2011/09/apply-style-on-div.html">Apply style on div</a>", we can change the red dot position using JavaScript. When user press (also press and hold) UP, DOWN, LEFT or RIGHT key can move the red dot position.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXozXDH62xHdstMernW5aGHUkSsmD4ETZHbJ9CudrYLpE_44Fjtmwm4ucjKJRUJxSgkGqAttHYndXTQb_UMGkEIzwYWTzJA5ffQq88wVbzlteW1p9yD8ZMVsQ52K0THpcqEK0ul0BEw4/s1600/test_ui.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 220px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXozXDH62xHdstMernW5aGHUkSsmD4ETZHbJ9CudrYLpE_44Fjtmwm4ucjKJRUJxSgkGqAttHYndXTQb_UMGkEIzwYWTzJA5ffQq88wVbzlteW1p9yD8ZMVsQ52K0THpcqEK0ul0BEw4/s400/test_ui.png" border="0" alt="jQuery exercise: get key input, to change CSS layout." title="jQuery exercise: get key input, to change CSS layout." id="BLOGGER_PHOTO_ID_5662971334655858338" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><script src="http://code.jquery.com/jquery-latest.js"></script><br /><style><br />body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }<br />h1{font: bold italic 20pt helvetica}<br /><br />#background{<br /> background: #a0a0a0;<br /> width: 400px;<br /> height: 300px;<br /> position: relative;<br /> overflow: hidden;<br />}<br />#reddot {<br /> background: #f00;<br /> position: absolute;<br /> width: 30px;<br /> height: 30px;<br /> left: 185px;<br /> top: 135px;<br /> border-radius: 15px;<br />}<br /><br /></style><br /></head><br /><body><br /><center><br /><div id="background"><br /> <div id="reddot"></div><br /></div><br /></center><br /><p id="mytext1">Original Text</p><br /><p id="mytext2">Wait Key</p><br /><p id="mytext3">Wait Key</p><br /><script><br />$(function(){<br /> var str = "This run after DOM loaded";<br /> $("#mytext1").html(str);<br /> <br /> var KEY_UP = 38;<br /> var KEY_DOWN = 40;<br /> var KEY_LEFT = 37;<br /> var KEY_RIGHT = 39;<br /> <br /> //Set listener for keydown<br /> $(document).keydown(function(e){<br /> $("#mytext2").html("- keydown -");<br /> switch(e.which){<br /> case KEY_UP:<br /> var top = parseInt($("#reddot").css("top")) - 10;<br /> $("#reddot").css("top", top);<br /> $("#mytext3").html("Key: UP / " + left + " : " + top);<br /> break;<br /> case KEY_DOWN:<br /> var top = parseInt($("#reddot").css("top")) + 10;<br /> $("#reddot").css("top", top);<br /> $("#mytext3").html("Key: DOWN / " + left + " : " + top);<br /> break;<br /> case KEY_LEFT:<br /> var left = parseInt($("#reddot").css("left")) - 10;<br /> $("#reddot").css("left", left);<br /> $("#mytext3").html("Key: LEFT / " + left + " : " + top);<br /> break;<br /> case KEY_RIGHT:<br /> var left = parseInt($("#reddot").css("left")) + 10;<br /> $("#reddot").css("left", left);<br /> $("#mytext3").html("Key: RIGHT / " + left + " : " + top);<br /> break;<br /> }<br /> });<br /><br /> //Set listener for keyup<br /> $(document).keyup(function(e){<br /> $("#mytext2").html("Wait Key");<br /> $("#mytext3").html("Wait Key");<br /> });<br />});<br /></script><br /></body><br /></html><br /></pre><br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-844593959836854942011-10-13T06:27:00.001-07:002011-10-13T06:44:03.043-07:00Convert CSS width or height to int using JavaScriptNormal, width or height defined in CSS as "px", "cm". It can be converted to int using JavaScript function <b>parseInt(string, radix)</b>.<br /><br /><i>The <b>parseInt</b> function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading white space in string is ignored. If radix is undefined or 0, it is assumed to be 10 except when the number begins with the character pairs 0x or 0X, in which case a radix of 16 is assumed. If radix is 16, the number may also optionally begin with the character pairs 0x or 0X.</i><br /><br/><br />Example: <a href="http://icancode-4-web.blogspot.com/2011/10/jquery-exercise-get-key-input-to-change.html">jQuery exercise: get key input, to change CSS layout.</a><br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-17294036066200019492011-10-12T04:56:00.000-07:002011-10-12T05:00:25.446-07:00jQuery exercise: get key input<pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><script src="http://code.jquery.com/jquery-latest.js"></script><br /></head><br /><body><br /><p id="mytext1">Original Text</p><br /><p id="mytext2">Wait Key</p><br /><p id="mytext3">Wait Key</p><br /><script><br />$(function(){<br /> var str = "This run after DOM loaded";<br /> $("#mytext1").html(str);<br /><br /> var KEY_UP = 38;<br /> var KEY_DOWN = 40;<br /> var KEY_LEFT = 37;<br /> var KEY_RIGHT = 39;<br /> <br /> //Set listener for keydown<br /> $(document).keydown(function(e){<br /> $("#mytext2").html("- keydown -");<br /> switch(e.which){<br /> case KEY_UP:<br /> $("#mytext3").html("Key: UP");<br /> break;<br /> case KEY_DOWN:<br /> $("#mytext3").html("Key: DOWN");<br /> break;<br /> case KEY_LEFT:<br /> $("#mytext3").html("Key: LEFT");<br /> break;<br /> case KEY_RIGHT:<br /> $("#mytext3").html("Key: RIGHT");<br /> break;<br /> }<br /> });<br /> <br /> //Set listener for keyup<br /> $(document).keyup(function(e){<br /> $("#mytext2").html("Wait Key");<br /> $("#mytext3").html("Wait Key");<br /> });<br /> <br />});<br /></script><br /></body><br /></html><br /></pre><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9IW-tPH_wUN2e6I1Y0SETGl50EjbIlAocUbWvVNPe2iXvzE3eWtJr0w5MjMsU9ijHh5XYQuznGDrBvOpRNDR6Llu8R57EAqD9oY32IB6AsjJrbcDMHtosENtX_WSAzK8MQon6hnQ170/s1600/GetKey.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 209px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9IW-tPH_wUN2e6I1Y0SETGl50EjbIlAocUbWvVNPe2iXvzE3eWtJr0w5MjMsU9ijHh5XYQuznGDrBvOpRNDR6Llu8R57EAqD9oY32IB6AsjJrbcDMHtosENtX_WSAzK8MQon6hnQ170/s400/GetKey.png" border="0" alt="jQuery exercise: get key input" title="jQuery exercise: get key input" id="BLOGGER_PHOTO_ID_5662573644625022754" /></a><br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-5905354717054483162011-10-12T04:00:00.001-07:002011-10-12T04:04:58.167-07:00jQuery exercise: change textExercise to change text using jQuery.<br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><script src="http://code.jquery.com/jquery-latest.js"></script><br /></head><br /><body><br /><p id="mytext1">Original Text</p><br /><p id="mytext2">Original Text</p><br /><p id="mytext3">Original Text</p><br /><script><br /> var str = "Text <b>changed</b>";<br /> $("#mytext2").html(str);<br /></script><br /><br /></body><br /></html><br /></pre><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjMp2Elc8WBvD5myW0E2HuP2yn8lRmKPLv7Jkbqijy0RuKxc7EbSSjk8k-rxgKml5hW3nveuVPiwrWt7k4belEkYUqL9wRRU4W4J_yvIxuzd3eU7N4aTNRgKdwv64TBpZlzzqwbOGzhY/s1600/ChangeText.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 209px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjMp2Elc8WBvD5myW0E2HuP2yn8lRmKPLv7Jkbqijy0RuKxc7EbSSjk8k-rxgKml5hW3nveuVPiwrWt7k4belEkYUqL9wRRU4W4J_yvIxuzd3eU7N4aTNRgKdwv64TBpZlzzqwbOGzhY/s400/ChangeText.png" border="0" alt="jQuery exercise: change text" title="jQuery exercise: change text" id="BLOGGER_PHOTO_ID_5662559055543127410" /></a><br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-70398579321190175812011-10-01T15:29:00.000-07:002011-10-01T15:36:54.877-07:00Load Feed with Google Feed APIWith the Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript.<br /><br />The Google Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. This makes it easy to quickly integrate feeds on your website.<br /><br />Know more: <a href="http://code.google.com/apis/feed/">Google Feed API</a><br /><br />Example:<br /><pre class="brush: html"><!DOCTYPE html><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/><br /> <title>Google AJAX Search API Sample</title><br /> <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script><br /> <script type="text/javascript"><br /> /*<br /> * How to load a feed via the Feeds API.<br /> */<br /><br /> google.load("feeds", "1");<br /><br /> // Our callback function, for when a feed is loaded.<br /> function feedLoaded(result) {<br /> if (!result.error) {<br /> // Grab the container we will put the results into<br /> var container = document.getElementById("content");<br /> container.innerHTML = '';<br /><br /> // Loop through the feeds, putting the titles onto the page.<br /> // Check out the result object for a list of properties returned in each entry.<br /> // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON<br /> for (var i = 0; i < result.feed.entries.length; i++) {<br /> var entry = result.feed.entries[i];<br /> var div = document.createElement("div");<br /> div.appendChild(document.createTextNode(entry.title));<br /> container.appendChild(div);<br /> }<br /> }<br /> }<br /><br /> function OnLoad() {<br /> // Create a feed instance that will grab Digg's feed.<br /> var feed = new google.feeds.Feed("http://feeds.feedburner.com/ICanCodeForWeb");<br /><br /> // Calling load sends the request off. It requires a callback function.<br /> feed.load(feedLoaded);<br /> }<br /><br /> google.setOnLoadCallback(OnLoad);<br /> </script><br /></head><br /><body style="font-family: Arial;border: 0 none;"><br /> <div id="content">Loading...</div><br /></body><br /></html><br /></pre><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiian_zlN1DFABdl4N1OIJ1VjNSmSTrDfFLsE7J2AVJT0gs2d_gvn7bBJa18fgfuyM__2SuyrKS5chbjvndl1m85lvgn0tjKt9D7dIUVzR1UvxcakraYe7xQsWuEZKD4WeYZDmmX7bIsZo/s1600/LoadFeedAPI.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 122px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiian_zlN1DFABdl4N1OIJ1VjNSmSTrDfFLsE7J2AVJT0gs2d_gvn7bBJa18fgfuyM__2SuyrKS5chbjvndl1m85lvgn0tjKt9D7dIUVzR1UvxcakraYe7xQsWuEZKD4WeYZDmmX7bIsZo/s400/LoadFeedAPI.png" border="0" alt="Load Feed with Google Feed API" title="Load Feed with Google Feed API" id="BLOGGER_PHOTO_ID_5658655581263866850" /></a><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-8464619750433525772011-09-28T09:51:00.000-07:002011-09-28T09:53:59.914-07:00Using Google Chart Tools - Visualization: Pie ChartIt's a example of using <a href="http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html">Google Chart Tools - Visualization: Pie Chart</a>.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXancMxjGHuBUwp2Ez6RlphKAGjXo0yCI43g0huRjTrRNiqSOjhyphenhyphencRnPY0PIe6fl4Ry0y505KB0QgAzPhKullO8dwtPQKmfpZSZlOG5WYODEWnwNYC3OdIH0rkip99Qq3grUCXNwSn58w/s1600/Google+Chart+Tools.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 218px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXancMxjGHuBUwp2Ez6RlphKAGjXo0yCI43g0huRjTrRNiqSOjhyphenhyphencRnPY0PIe6fl4Ry0y505KB0QgAzPhKullO8dwtPQKmfpZSZlOG5WYODEWnwNYC3OdIH0rkip99Qq3grUCXNwSn58w/s400/Google+Chart+Tools.png" border="0" alt="Using Google Chart Tools - Visualization: Pie Chart" title="Using Google Chart Tools - Visualization: Pie Chart" id="BLOGGER_PHOTO_ID_5657454668023005538" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><meta charset="UTF-8"><br /> <title>i can code! for Web.</title><br /> <script type="text/javascript" src="http://www.google.com/jsapi"></script><br /> <script type="text/javascript"><br /> google.load('visualization', '1', {packages: ['corechart']});<br /> </script><br /> <script type="text/javascript"><br /> function drawVisualization() {<br /> // Create and populate the data table.<br /> var data = new google.visualization.DataTable();<br /> data.addColumn('string', 'name');<br /> data.addColumn('number', 'data');<br /> data.addRows(5);<br /> data.setValue(0, 0, 'A');<br /> data.setValue(0, 1, 50);<br /> data.setValue(1, 0, 'B');<br /> data.setValue(1, 1, 50);<br /> data.setValue(2, 0, 'C');<br /> data.setValue(2, 1, 50);<br /> data.setValue(3, 0, 'D');<br /> data.setValue(3, 1, 25);<br /> data.setValue(4, 0, 'E');<br /> data.setValue(4, 1, 25);<br /> <br /> // Create and draw the visualization.<br /> new google.visualization.PieChart(document.getElementById('visualization')).<br /> draw(data, {title:"Google Chart Tools - Visualization: Pie Chart"});<br /> }<br /> <br /> google.setOnLoadCallback(drawVisualization);<br /> </script><br /></head><br /><body style="font-family: Arial;border: 0 none;"><br /> <div id="visualization" style="width: 600px; height: 400px;"></div><br /></body><br /></html><br /></pre>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-11198993315990696312011-09-27T13:39:00.000-07:002011-09-27T13:41:37.713-07:00jQTouchjQTouch is a jQuery plugin for mobile web development on the iPhone, <br />Android, iPod Touch, and other forward-thinking devices.<br /><br /><a href="http://jqtouch.com/">http://jqtouch.com/</a><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-34921604845192852832011-09-25T11:16:00.001-07:002011-09-25T11:19:06.346-07:00Targeting screen sizes by using media queriesIn this exercise, we have two css files, desktop.css and mobile.css. In our HTML, dualcss.html, we will load the suitable css according to the browser width (not the device screen width in this exercise). <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn3s86uOvoKBHfYMDGNbIX0fHHXEpa0SWaD746DFu8zkxHzuA-kwCzwHMwngYLMzqgnduIIkNEtosHLvBBZMQTCrxIFjUKzFmiGCUcIo2xw3Ixu1k21KLBxmCeP3myDWVI2r0m3vg6pF8/s1600/Dual+CSS_01.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 178px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn3s86uOvoKBHfYMDGNbIX0fHHXEpa0SWaD746DFu8zkxHzuA-kwCzwHMwngYLMzqgnduIIkNEtosHLvBBZMQTCrxIFjUKzFmiGCUcIo2xw3Ixu1k21KLBxmCeP3myDWVI2r0m3vg6pF8/s400/Dual+CSS_01.png" border="0" alt="desktop.css" title="desktop.css" id="BLOGGER_PHOTO_ID_5656363024385039906" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVHL_AyH3Oat92gcx384k-ZawaVQKhoufYD8k90P4wZlt0-sBeO0Nd8uy688JFnF43222b28_KnszsujjIeep8xmwB1uUdm5fVfd8oTxX2iAbvy1Jzw_S5s-XuOhMNC8MrdCTLozvXH4/s1600/Dual+CSS_02.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 298px; height: 398px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVHL_AyH3Oat92gcx384k-ZawaVQKhoufYD8k90P4wZlt0-sBeO0Nd8uy688JFnF43222b28_KnszsujjIeep8xmwB1uUdm5fVfd8oTxX2iAbvy1Jzw_S5s-XuOhMNC8MrdCTLozvXH4/s400/Dual+CSS_02.png" border="0" alt="mobile.css" title="mobile.css" id="BLOGGER_PHOTO_ID_5656362970788998610" /></a><br /><br />desktop.css<br /><pre class="brush: html">body {<br /> font-size: 50px;<br /> font-weight: bold;<br /> font-family: Arial;<br />}<br />a { font-style: italic; }<br />h1 {<br /> font-size: 50px;<br /> font-weight: bold;<br /> font-family: Arial;<br />}<br /></pre><br /><br />mobile.css<br /><pre class="brush: html">body {<br /> font-size: 10px;<br /> font-weight: bold;<br /> font-family: Arial;<br />}<br />a { font-style: italic; }<br />h1 { font-style: italic; }<br /></pre><br /><br />dualcss.html<br /><pre class="brush: html"><html><br /><head><br /> <title>i can code! for Web: Dual CSS</title><br /> <br /> <link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 480px)" /><br /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /><br /> <br /></head><br /><body><br /> <h1>i can code! for Web: Dual CSS</h1><br /> <p><a href="http://icancode-4-web.blogspot.com/">http://icancode-4-web.blogspot.com/</a></p><br /></body><br /></html><br /></pre><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-52010645823993970992011-09-24T06:31:00.000-07:002011-09-24T06:33:52.673-07:00Yahoo! Site Explorer transition to Bing Webmaster Tools<a href="http://www.bing.com/toolbox/webmasters"><b>Bing Webmaster Tools</b></a> are supporting the Yahoo! Site Explorer community. <b><i>Webmasters should now be using the Bing Webmaster Tools to ensure that their websites continue to get high quality organic search traffic from Bing and Yahoo!.</i></b><img src="http://www.blogger.com/img/blank.gif" alt="斜體" border="0" class="gl_italic" /><br /><br />Since the middle of August 2011, the Bing Webmaster Tools have also been integrating traffic data from Yahoo! into its reports. Please check out the Bing Webmaster <a href="http://www.bing.com/community/site_blogs/b/webmaster/archive/2011/08/16/announcing-the-integration-of-yahoo-traffic-data-into-bing-webmaster-tools-reports.aspx">blog post</a> for more information.<br /><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-2109808715724142202011-09-23T12:56:00.000-07:002011-09-23T13:01:08.271-07:00IE 9 Guide for Developers<img style="float:right; margin:0 0 10px 10px;width: 140px; height: 47px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjZZ3F8LshmuEKDS-ogiPvk_fagbTSrWli4UHD-_HnncEmh3Gmxh8dGqoecuW17tns06B0E4h0AeL9MBLpcOLhcMeiSvv3ROYJIeHVjKcTuBoz3n0Jcvl2g1PEDPobniKVkuS-XTKA6Ck/s200/Windows+Internet+Explorer.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5655647480059695938" /><br /><a href="http://msdn.microsoft.com/en-us/ie/ff468705"><b>The Internet Explorer 9 Guide for Developers</b></a> provides a look at the features and improvements in Internet Explorer 9. By using this guide, web developers and designers can take full advantage of these enhancements.<br /><br />link: <a href="http://msdn.microsoft.com/en-us/ie/ff468705">http://msdn.microsoft.com/en-us/ie/ff468705</a>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-7974819877276072882011-09-21T23:57:00.000-07:002011-09-21T23:59:58.620-07:00Developer Preview of Google+ Hangouts API<img style="float:right; margin:0 0 10px 10px;width: 64px; height: 64px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1l4D5j_x5iMLahgW6GS_2_sI4ztj5C5aYg4kGB2gd5KRtwZziSDAwe2yjunQhFw__WaWRkHMU3U8t9JrBM-I-dmdOednk887YybdAEwqehYUkpytMNVZtkAcBXJYkGryv-fbuVsUOTpI/s200/hangouts-logo.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5655074984173702866" /><br />Google announced developer preview of <a href="http://developers.google.com/+/hangouts/">Google+ Hangouts API</a>, The Google+ Hangouts API allows you to develop collaborative apps that run inside of a Google+ Hangout. Hangout apps behave much like normal web apps, but with the addition of the rich, real-time functionality provided by the Hangouts APIs. Apps have the ability to control aspects of the user interface, synchronize data between hangout participants, and respond to various events in the hangout.<br /><br />Getting started is easy. First, build your app or just start with one of the pre-built examples. Next, register it in the APIs Console, and tell us who on your team should be able to load your app. Then, start a hangout with your app!<br /><br /><a href="http://developers.google.com/+/hangouts/">http://developers.google.com/+/hangouts/</a>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-85370703747802971482011-09-17T04:29:00.001-07:002011-09-17T04:30:57.195-07:00Define callback functionsIt's a example show how to define callback function; for example, open, close.<br/><br /><br/><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLPPqimo2IBuuAGT6OzYkeQ0ARWya-i-brvpAfoI7ZVial5ig-WMYsVwwfORGGuy0Kl_FubX6TySPoAkTWn79sPvmBnKiGYgKtC96vUbpmnAn5oDJ1p78FcjzWB0ej4y-3ECjDBKrsOc/s1600/jQuery+UI+Dialog_05.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 387px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLPPqimo2IBuuAGT6OzYkeQ0ARWya-i-brvpAfoI7ZVial5ig-WMYsVwwfORGGuy0Kl_FubX6TySPoAkTWn79sPvmBnKiGYgKtC96vUbpmnAn5oDJ1p78FcjzWB0ej4y-3ECjDBKrsOc/s400/jQuery+UI+Dialog_05.png" border="0" alt="Define callback functions" title="Define callback functions" id="BLOGGER_PHOTO_ID_5653289383368878114" /></a><br/><br /><br/><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><br /><script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script><br /><link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css"><br /><title>jQuery UI Dialog</title><br /></head><br /><body><br /> i can code! for Web.<br /> <div id="myDialog"><br /> Test Dialog of jQuery UI<br /> </div><br /> <script><br /> (function($){<br /> <br /> var functionOK = function(){<br /> alert("OK");<br /> },<br /> functionCancel = function(){<br /> alert("Cancel");<br /> },<br /> Options = {<br /> <br /> open: function() {<br /> alert("callback function - open");<br /> },<br /> <br /> close: function() {<br /> alert("callback function - close");<br /> },<br /> <br /> title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",<br /> buttons:{<br /> "OK": functionOK,<br /> "Cancel": functionCancel<br /> }<br /> };<br /> <br /> $("#myDialog").dialog(Options);<br /> })(jQuery);<br /> </script><br /></body><br /></html><br /></pre>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-66030639495675212502011-09-17T04:11:00.000-07:002011-09-17T04:13:12.392-07:00Set dimensions of jQuery UI dialogTo set dimensions of jQuery UI dialog, we can use options of width, height, minWidth, minHeight, maxWidth, maxHeight.<br/><br /><br/><br />example:<br/><br /><br/><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFKcTpOen9zBsodQUSwEb-P8LDqUO_FihBpKP3hg95Z1mdi00GupmMPul2gTeIMhnmCtJ30IeU6etNQK20FzO_KiJMcdYwb6Pmb0oZJjnQTcFYZp_t4wfXL_6pVhoojFRb4-OMHa0oDA/s1600/jQuery+UI+Dialog_04.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 174px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFKcTpOen9zBsodQUSwEb-P8LDqUO_FihBpKP3hg95Z1mdi00GupmMPul2gTeIMhnmCtJ30IeU6etNQK20FzO_KiJMcdYwb6Pmb0oZJjnQTcFYZp_t4wfXL_6pVhoojFRb4-OMHa0oDA/s400/jQuery+UI+Dialog_04.png" border="0" alt="Set dimensions of jQuery UI dialog" title="Set dimensions of jQuery UI dialog" id="BLOGGER_PHOTO_ID_5653284830108029938" /></a><br/><br /><br/><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><br /><script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script><br /><link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css"><br /><title>jQuery UI Dialog</title><br /></head><br /><body><br /> i can code! for Web.<br /> <div id="myDialog"><br /> Test Dialog of jQuery UI<br /> </div><br /> <script><br /> (function($){<br /> <br /> var functionOK = function(){<br /> alert("OK");<br /> },<br /> functionCancel = function(){<br /> alert("Cancel");<br /> },<br /> Options = {<br /> <br /> width: 300,<br /> height: 200,<br /> minWidth: 200,<br /> minHeight: 200,<br /> maxWidth: 600,<br /> maxHeight: 250,<br /> <br /> title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",<br /> buttons:{<br /> "OK": functionOK,<br /> "Cancel": functionCancel<br /> }<br /> };<br /> <br /> $("#myDialog").dialog(Options);<br /> })(jQuery);<br /> </script><br /></body><br /></html><br /></pre>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-85001719414746475002011-09-13T07:48:00.000-07:002011-09-13T07:51:23.781-07:00Add buttons in jQuery UI dialogexample:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6TDAFzwhnuj8hWpfWhwZ9Pqc4G1GW5g7eb7tSDnPJB5j0WhCRYlsfzLSgBcoo8AAcJCW0b7BJGynEHJw7duSWgloLmJymU3kBCGlNOUuL6ckPsrZXN7V-rnbQjPIdZEKwLDfrNchmf8/s1600/jQuery+UI+Dialog_03.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 238px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6TDAFzwhnuj8hWpfWhwZ9Pqc4G1GW5g7eb7tSDnPJB5j0WhCRYlsfzLSgBcoo8AAcJCW0b7BJGynEHJw7duSWgloLmJymU3kBCGlNOUuL6ckPsrZXN7V-rnbQjPIdZEKwLDfrNchmf8/s400/jQuery+UI+Dialog_03.png" border="0" alt="buttons in jQuery UI dialog" title="buttons in jQuery UI dialog" id="BLOGGER_PHOTO_ID_5651856440884347138" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><br /><script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script><br /><link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css"><br /><title>jQuery UI Dialog</title><br /></head><br /><body><br /> i can code! for Web.<br /> <div id="myDialog"><br /> Test Dialog of jQuery UI<br /> </div><br /> <script><br /> (function($){<br /> <br /> var functionOK = function(){<br /> alert("OK");<br /> },<br /> functionCancel = function(){<br /> alert("Cancel");<br /> },<br /> Options = {<br /> title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",<br /> buttons:{<br /> "OK": functionOK,<br /> "Cancel": functionCancel<br /> }<br /> };<br /> <br /> $("#myDialog").dialog(Options);<br /> })(jQuery);<br /> </script><br /></body><br /></html><br /></pre><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-6401464137377014422011-09-13T07:29:00.000-07:002011-09-13T07:32:30.015-07:00Set linkable title on jQuery UI dialogexample:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEutFKJODPKe0RYVBrINElvy0KLYfuBWYKZhdqaYXWu7Ghw7M1adOfcFe0MXH3xLJx65TCZSHXf5kdblWo_URtDU-J5078GgPBQw2IQPcDZCtEf_zKHhYZVDQInwtTxlBCMuAlRSCh0s/s1600/jQuery+UI+Dialog_02.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 238px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEutFKJODPKe0RYVBrINElvy0KLYfuBWYKZhdqaYXWu7Ghw7M1adOfcFe0MXH3xLJx65TCZSHXf5kdblWo_URtDU-J5078GgPBQw2IQPcDZCtEf_zKHhYZVDQInwtTxlBCMuAlRSCh0s/s400/jQuery+UI+Dialog_02.png" border="0" alt="linkable title on jQuery UI dialog" title="linkable title on jQuery UI dialog" id="BLOGGER_PHOTO_ID_5651851558941333458" /></a><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><br /><script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script><br /><link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css"><br /><title>jQuery UI Dialog</title><br /></head><br /><body><br /> i can code! for Web.<br /> <div id="myDialog"><br /> Test Dialog of jQuery UI<br /> </div><br /> <script><br /> (function($){<br /> var Options = {<br /> title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>"<br /> };<br /> <br /> $("#myDialog").dialog(Options);<br /> })(jQuery);<br /> </script><br /></body><br /></html><br /></pre><br/><br /><br/>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0tag:blogger.com,1999:blog-8203716089047464069.post-19888939103168729872011-09-12T13:59:00.000-07:002011-09-12T14:00:50.399-07:00Example of jQuery UI - Dialog<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTY5i2u6TqDXdXa55e_qC4Q0KTQP8YNKOjZIl7bQr-L09TmcJ9MKBI5_V4i_fK2qujFvtU-4K0vIsIVKdC43y1sPabIHt7dlbSSx2lvZgXTvVSFFnMVIPGVCmwlTnCQJS8liEQnneBhE/s1600/jQuery+UI+Dialog.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 255px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTY5i2u6TqDXdXa55e_qC4Q0KTQP8YNKOjZIl7bQr-L09TmcJ9MKBI5_V4i_fK2qujFvtU-4K0vIsIVKdC43y1sPabIHt7dlbSSx2lvZgXTvVSFFnMVIPGVCmwlTnCQJS8liEQnneBhE/s400/jQuery+UI+Dialog.png" border="0" alt="jQuery UI - Dialog" title="jQuery UI - Dialog" id="BLOGGER_PHOTO_ID_5651580880476149410" /></a><br /><br /><pre class="brush: html"><!DOCTYPE html><br /><html><br /><head><br /><meta charset="utf-8"><br /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><br /><script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script><br /><link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css"><br /><title>jQuery UI Dialog</title><br /></head><br /><body><br /> i can code! for Web.<br /> <div id="myDialog" title="My Dialog"><br /> Test Dialog of jQuery UI<br /> </div><br /> <script><br /> (function($){<br /> $("#myDialog").dialog();<br /> })(jQuery);<br /> </script><br /></body><br /></html><br /></pre>Erik Codehttp://www.blogger.com/profile/13724520121214433696noreply@blogger.com0