{"id":13806,"date":"2015-07-24T05:05:49","date_gmt":"2015-07-23T19:05:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13806"},"modified":"2015-07-24T06:42:30","modified_gmt":"2015-07-23T20:42:30","slug":"yui-container-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-container-primer-tutorial\/","title":{"rendered":"YUI Container Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve quite often visited Yahoo&#8217;s YUI library of JavaScript functionality for useful front-end web application ideas. Today we continue with ideas thanks to the great ideas in JavaScript and Ajax (seventh edition &#8230; ISBN: 9780321564085) by Tom Negrino and Dori &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-container-primer-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":[12,17,37],"tags":[256,263,281,467,468,549,576,652,850,997,1319,1487,1495],"class_list":["post-13806","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gui","category-tutorials","tag-container","tag-conversion","tag-css","tag-front-end","tag-frontend","tag-gui","tag-html","tag-javascript","tag-object-literal","tag-programming","tag-tutorial","tag-yahoo","tag-yui"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13806"}],"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=13806"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13806\/revisions"}],"predecessor-version":[{"id":14593,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13806\/revisions\/14593"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=13806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=13806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=13806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}