{"id":26552,"date":"2016-11-24T03:01:49","date_gmt":"2016-11-23T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26552"},"modified":"2016-11-23T13:28:58","modified_gmt":"2016-11-23T03:28:58","slug":"yui-slider-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-slider-primer-tutorial\/","title":{"rendered":"YUI Slider Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_slider.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"YUI Slider Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_slider.jpg\" title=\"YUI Slider Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">YUI Slider Primer Tutorial<\/p><\/div>\n<p>Yahoo&#8217;s YUI library of client Javascript functionality features a useful object called a <a target=_blank title='YUI 2 Slider information from Yahoo' href='http:\/\/yui.github.io\/yui2\/docs\/yui_2.9.0_full\/slider\/index.html'>&#8220;Slider&#8221;<\/a>, that acts like a gauge (perhaps reminiscent of some of the concepts you can read about at <a target=_blank title='PHP\/Javascript\/HTML Google Chart Gauge Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-gauge-chart-tutorial\/'>PHP\/Javascript\/HTML Google Chart Gauge Chart Tutorial<\/a>) with which you can associate a status, and adjust some CSS styling or some other Javascript DOM code accordingly.  We&#8217;ve done just that today, basing our code predominantly on the YUI 2 example called &#8220;Dual-thumb Slider with range highlight&#8221; presented at this <a target=_blank title='Dual-thumb Slider with range highlight' href='http:\/\/yui.github.io\/yui2\/docs\/yui_2.9.0_full\/examples\/slider\/slider_dual_with_highlight.html'>webpage<\/a> &#8230; thanks.  With that we created our own &#8230;<\/p>\n<ol>\n<li>images (4) starting with those at <a target=_blank title='http:\/\/acervofundiario.incra.gov.br' href='http:\/\/acervofundiario.incra.gov.br\/i3geo\/pacotes\/yui290\/build\/slider\/assets\/'>http:\/\/acervofundiario.incra.gov.br<\/a> &#8230; thanks &#8230; and\n<ul>\n<li>dual_thumb_highlight.gif &#8230; <img src='http:\/\/acervofundiario.incra.gov.br\/i3geo\/pacotes\/yui290\/build\/slider\/assets\/dual_thumb_highlight.gif'><\/img> &#8230; as of above<\/li>\n<li>dual_thumb_bg.gif &#8230; <img src='http:\/\/acervofundiario.incra.gov.br\/i3geo\/pacotes\/yui290\/build\/slider\/assets\/dual_thumb_bg.gif'><\/img> &#8230; plus Gimp Script-Fu -&gt; Sketch -&gt; Roy Lichtenstein (defaults) just to rectangle selection of inner bit &#8230; <img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dual_thumb_bg.gif'><\/img> &#8230;  &#8230; do you remember <a target=_blank title='Gimp Script-Fu Scripts Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-script-fu-scripts-primer-tutorial\/'>Gimp Script-Fu Scripts Primer Tutorial<\/a>?<\/li>\n<li>l-thumb-round.gif  &#8230; <img src='http:\/\/acervofundiario.incra.gov.br\/i3geo\/pacotes\/yui290\/build\/slider\/assets\/l-thumb-round.gif'><\/img> &#8230; plus Gimp Script-Fu -&gt; Effects -&gt; Sepoina Graf-ix (defaults) &#8230; <img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/l-thumb-round.gif'><\/img><\/li>\n<li>r-thumb-round.gif &#8230; Paintbrush Flip Horizontal of above &#8230; <img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/r-thumb-round.gif'><\/img><\/li>\n<\/ul>\n<\/li>\n<li><a target=_blank title='Javascript setTimeout information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> Javascript to monitor the status field innerHTML and add our own embellishments involving wording and emojis and some of those great ideas at <a target=_blank title='sherv.net ... thanks' href='http:\/\/www.sherv.net\/brick.wall-emoticon-6778.html'>sherv.net<\/a> we got onto when not finding appropriate &#8220;brick wall&#8221; emojis.<\/p>\n<\/ol>\n<p> &#8230; to end up with today&#8217;s HTML and Javascript and CSS web application you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_slider.html_GETME\" title=\"yui_slider.html\">yui_slider.html<\/a> with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yui_slider.html\" title=\"yui_slider.html\">live run<\/a> link.   It is easy to see how this could fit into a variety of web application scenarios where realtime issues are important.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Again, as we mentioned below with <a title='YUI Container Animation Tutorial' href='#ycat'>YUI Container Animation Tutorial<\/a> you may notice visiting YUI 2 webpages such as <a target=_blank title='YUI 2 Slider information from Yahoo' href='http:\/\/yui.github.io\/yui2\/docs\/yui_2.9.0_full\/slider\/index.html'>this one about YUI 2 Slider 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='ycat'>Previous relevant <a target=_blank title='YUI Container Animation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-container-animation-tutorial\/'>YUI Container Animation 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_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<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='#d26552' onclick='var dv=document.getElementById(\"d26552\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26552' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yahoo&#8217;s YUI library of client Javascript functionality features a useful object called a &#8220;Slider&#8221;, that acts like a gauge (perhaps reminiscent of some of the concepts you can read about at PHP\/Javascript\/HTML Google Chart Gauge Chart Tutorial) with which you &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/yui-slider-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,14,16,37],"tags":[281,327,354,385,2061,491,576,590,652,896,997,2060,2063,2062,1319,1487,1495],"class_list":["post-26552","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gimp","category-tutorials","tag-css","tag-did-you-know","tag-dom","tag-emoji","tag-gauge","tag-gimp","tag-html","tag-image","tag-javascript","tag-paintbrush","tag-programming","tag-script-fu","tag-slider","tag-status","tag-tutorial","tag-yahoo","tag-yui"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26552"}],"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=26552"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26552\/revisions"}],"predecessor-version":[{"id":26558,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26552\/revisions\/26558"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=26552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=26552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=26552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}