{"id":26526,"date":"2016-11-23T03:01:25","date_gmt":"2016-11-22T17:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26526"},"modified":"2016-11-23T13:26:56","modified_gmt":"2016-11-23T03:26:56","slug":"yui-container-animation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-container-animation-tutorial\/","title":{"rendered":"YUI Container Animation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_animated_container.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"YUI Container Animated Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_animated_container.jpg\" title=\"YUI Container Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">YUI Container Animation Tutorial<\/p><\/div>\n<p>We&#8217;re back to Yahoo&#8217;s incredibly useful <a target=_blank title='YUI Library information' href='http:\/\/en.wikipedia.org\/wiki\/YUI_Library'>YUI<\/a> library of JavaScript functionality today, following up on <a title='YUI Container Primer Tutorial' href='#ycpt'>YUI Container Primer Tutorial<\/a> as shown below, from all that time ago, rereading <i>JavaScript and Ajax<\/i> (seventh edition &#8230; ISBN: 9780321564085) by Tom Negrino and Dori Smith (page 371-375), but extending that through to pages 376 to 378, featuring two types of Animation modes of use you can apply to YUI Container objects, ours today remaining as the YUI Dialog object &#8230;<\/p>\n<ul>\n<li>Fade &#8230; and &#8230;<\/li>\n<li>Slide &#8230; <font size=1>Di Maggio &#8230; slide<\/font> (but we digress)<\/li>\n<\/ul>\n<p> &#8230; and &#8230; you guessed it &#8230; both, if you like.  The thing about using a tried and tested Javascript client library (of functionality) to do this type of, admittedly, &#8220;bells and whistles&#8221; rather than &#8220;intrinsically crucial or mission critical&#8221; (or ICOMC &#8230; <font size=1>get with the plan?!<\/font>) work, is that &#8230; it&#8217;s tried and tested &#8230; and there&#8217;s not much more embarrassing than causing hassles with coding on the &#8220;net&#8221; involving the &#8220;bells and whistles&#8221; work, when it wasn&#8217;t crucial in the first place.<\/p>\n<p>The animations with YUI feel as smooth as silk, as long as the &#8220;client&#8221; response times are good at your web browser, that is.<\/p>\n<p>Must mention another great source of information online, in addition to the book mentioned above, here, and that is this great <a target=_blank title='Great link, thanks' href='http:\/\/yui.github.io\/yui2\/docs\/yui_2.9.0_full\/examples\/container\/container-effect.html'>link<\/a>, thanks.<\/p>\n<p>Here are some programming source code links to supplement the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_animated_container.html\" title=\"Click picture\">live run<\/a> &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_animated_container.html-GETME\" title=\"yui_animated_container.html\">yui_animated_container.html<\/a> (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_animated_container.html\" title=\"yui_animated_container.html\">live run<\/a>) &#8230; HTML code calls &#8230; changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_animated_container.html-GETME\" title=\"yui_container.html\">this way<\/a> from work below &#8230; <\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ourcontainer.css_GETME\" title=\"ourcontainer.css\">ourcontainer.css<\/a> &#8230; CSS (for local styling) &#8230; unchanged &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ourcontainer_animated.js-GETME\" title=\"ourcontainer_animated.js\">ourcontainer_animated.js<\/a> &#8230; JavaScript (for local purposes, in <a target=_blank title='Object Literal information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Literal_%28computer_programming%29'>Object Literal<\/a> form) &#8230; changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ourcontainer_animated.js-GETME\" title=\"ourcontainer_animated.js\">this way<\/a> from work below<\/li>\n<\/ul>\n<p>All being equal, if the underlying content was of equal quality, and if the only intrinsic difference of approach was the inclusion of such YUI Container Animation functionality, we&#8217;d definitely want to use that webpage, but can see that that would not be the case for everybody, because animated effects can sometimes be associated with trickery, alas.  Think of those annoying advertisements you can&#8217;t easily close.  So bear this in your <a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>UX<\/a> mind, as you proceed.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>You may notice visiting YUI 2 webpages such as <a target=_blank title='YUI container info' href='http:\/\/yui.github.io\/yui2\/docs\/yui_2.9.0_full\/container\/'>this one about YUI 2 Container object<\/a> that Yahoo is recommending redesigning deprecated YUI 2 code by involving <a target=_blank title='YUI 3 library' href='http:\/\/yuilibrary.com\/'>YUI 3 Library<\/a> code.<\/p>\n<hr>\n<p id='ycpt'>Previous relevant <a target=_blank title='YUI Container Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-container-primer-tutorial\/'>YUI Container Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_container.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"YUI Container Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/conversion.jpg\" title=\"YUI Container Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">YUI Container Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve quite often visited Yahoo&#8217;s <a target=_blank title='YUI Library information' href='http:\/\/en.wikipedia.org\/wiki\/YUI_Library'>YUI<\/a> library of JavaScript functionality for useful front-end web application ideas.<\/p>\n<p>Today we continue with ideas thanks to the great ideas in <i>JavaScript and Ajax<\/i> (seventh edition &#8230; ISBN: 9780321564085) by Tom Negrino and Dori Smith (page 371-375), and look at the YUI library concept of a &#8220;container&#8221; as &#8220;an object that encloses any kind of content&#8221; (to quote from this book).<\/p>\n<p>Sounds pretty open-ended, and it is, and reminds one (or even more than one) of the idea of a <a target=_blank title='Widget information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Web_widget'>&#8220;widget&#8221;<\/a>, perhaps.<\/p>\n<p>To categorize these &#8220;container&#8221; types we have &#8230;<\/p>\n<ol>\n<li>Module &#8230; can appear anywhere on webpage<\/li>\n<li>Overlay &#8230; floats above webpage inline content<\/li>\n<ul>\n<li>Tooltip &#8230; small floating (informational) boxes<\/li>\n<li>Panel &#8230; mimics operating system window<\/li>\n<li>Simple Dialog &#8230; yes\/no<\/li>\n<li>Dialog &#8230; standard dialog<\/li>\n<\/ul>\n<\/ol>\n<p> &#8230; so today we do a little &#8220;converter&#8221; program &#8230; you know the sort &#8230; feet to metres, fahrenheit to celcius degrees etcetera etcetera etcetera &#8230; that uses an YUI Overlay Dialog &#8220;container&#8221; arrangement.<\/p>\n<p>Here are some programming source code links to supplement the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_container.html\" title=\"Click picture\">live run<\/a> &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_container.html_GETME\" title=\"yui_container.html\">yui_container.html<\/a> &#8230; HTML code calls &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ourcontainer.css_GETME\" title=\"ourcontainer.css\">ourcontainer.css<\/a> &#8230; CSS (for local styling)<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ourcontainer.js_GETME\" title=\"ourcontainer.js\">ourcontainer.js<\/a> &#8230; JavaScript (for local purposes, in <a target=_blank title='Object Literal information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Literal_%28computer_programming%29'>Object Literal<\/a> form)<\/li>\n<\/ul>\n<p>Link to YUI Library information <a target=_blank title='YUI Library information' href='http:\/\/en.wikipedia.org\/wiki\/YUI_Library'> &#8230; via Wikipedia<\/a>.<br \/>\nLink to YUI Library spiritual home page  <a target=_blank title=YUI Library spiritual home' href='http:\/\/yuilibrary.com\/'> &#8230; via Yahoo!<\/a><br \/>\nLink to YUI Library download page  &#8230; <a target=_blank title='Download' href='http:\/\/yuilibrary.com\/download\/yui3\/'>download YUI Library here<\/a>.<br \/>\nLink to YUI Library container information page &#8230; <a target=_blank title='YUI container info' href='http:\/\/yui.github.io\/yui2\/docs\/yui_2.9.0_full\/container\/'> &#8230; via Yahoo!<\/a><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d13806' onclick='var dv=document.getElementById(\"d13806\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=yui\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13806' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d26526' onclick='var dv=document.getElementById(\"d26526\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26526' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re back to Yahoo&#8217;s incredibly useful YUI library of JavaScript functionality today, following up on YUI Container Primer Tutorial as shown below, from all that time ago, rereading JavaScript and Ajax (seventh edition &#8230; ISBN: 9780321564085) by Tom Negrino and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-container-animation-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,37],"tags":[84,256,1914,327,1662,576,652,997,1149,1319,1487,1495],"class_list":["post-26526","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animation-2","tag-container","tag-dialog","tag-did-you-know","tag-fade","tag-html","tag-javascript","tag-programming","tag-slide","tag-tutorial","tag-yahoo","tag-yui"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26526"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=26526"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26526\/revisions"}],"predecessor-version":[{"id":26557,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26526\/revisions\/26557"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=26526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=26526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=26526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}