{"id":51180,"date":"2020-12-15T03:01:06","date_gmt":"2020-12-14T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51180"},"modified":"2020-12-15T05:58:33","modified_gmt":"2020-12-14T19:58:33","slug":"css-outline-and-border-via-javascript-jquery-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-outline-and-border-via-javascript-jquery-tutorial\/","title":{"rendered":"CSS Outline and Border via Javascript jQuery Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Outline and Border via Javascript jQuery Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize_more.jpg\"  title=\"CSS Outline and Border via Javascript jQuery Tutorial\"  \/><\/a><p class=\"wp-caption-text\">CSS Outline and Border via Javascript jQuery Tutorial<\/p><\/div>\n<p>There is more to the &#8220;Border Story&#8221; than presented back in May, 2015 when we presented <a title='Javascript jQuery More Filtering Tutorial' href='#jqmft'>Javascript jQuery More Filtering Tutorial<\/a>, albeit, this tutorial was more a tutorial about Javascript jQuery filtering.  We feel we need a makeover, allowing a user to be able to define, regarding the &#8220;Border Story&#8221; &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS border information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_border.asp'>border<\/a> or <a target=_blank title='CSS outline information from W3schools' href='https:\/\/www.w3schools.com\/css\/css_outline.asp'>outline<\/a><\/li>\n<li>border or outline line width<\/li>\n<li>border or outline type<\/li>\n<li>border or outline colour<\/li>\n<\/ul>\n<p> &#8230; in order to get a better picture of what CSS offers in this area as far as styling your webpages is concerned.<\/p>\n<p>And so where <a title='Javascript jQuery More Filtering Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-jquery-more-filtering-tutorial\/'>Javascript jQuery More Filtering Tutorial<\/a> says &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-jquery-more-filtering-tutorial\/'>\n<p>You&#8217;ll see with  the HTML(\/Javascript)\/jQuery source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html-GETME\" title='borderize.htm'>borderize.htm<\/a> that the &#8220;star&#8221; line of code &#8230;<\/p>\n<p><code>eval('$(\"body\").find(\"' + oisval + '\").css({\"color\": \"red\", \"border\": \"2px solid red\"})');<\/code><\/p>\n<p> &#8230; stays as is from yesterday &#8230; yayyyyyyyyy!!!!<\/p>\n<\/blockquote>\n<p> &#8230; today we have &#8230;<\/p>\n<blockquote>\n<p>You&#8217;ll see with  the HTML(\/Javascript)\/jQuery source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html--GETME\" title='borderize.htm'>the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html--GETME\" title='borderize.htm'>borderize.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.htm\" title='borderize.htm'>live run<\/a> that the &#8220;star&#8221; line of code &#8230;<\/p>\n<p><code><br \/>\n<font color=red>\/\/ These globals change depending on user selections<br \/>\nvar bmode='border';<br \/>\nvar thewidth=2;<br \/>\nvar thetype='solid';<br \/>\nvar thecolour='red';<\/font><br \/>\n<br \/>\neval('$(\"body\").find(\"' + oisval + '\").css({\"color\": \"<font color=red>' + thecolour + '<\/font>\", \"<font color=red>' + bmode + '<\/font>\": \"<font color=red>' + thewidth + '<\/font>px <font color=red>' + thetype + '<\/font> <font color=red>' + thecolour + '<\/font>\"})');<br \/>\n<\/code><\/p>\n<p> &#8230; changes <font color=red>this way<\/font> todayyyyyyyyy!!!!<\/p>\n<\/blockquote>\n<p> &#8230; which you might want to try out yourself, below.<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.htm\" title='borderize.htm'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/css=outline-and-border-via-javascript-jquery-tutorial\/'>CSS Outline and Border via Javascript jQuery Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jqmft'>Previous relevant <a target=_blank title='Javascript jQuery More Filtering Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-jquery-more-filtering-tutorial\/'>Javascript jQuery More Filtering Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript jQuery More Filtering Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.gif\"  title=\"Javascript jQuery More Filtering Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript jQuery More Filtering Tutorial<\/p><\/div>\n<p>The web (design and) styling and Javascript client event functionality worlds can feel more united using <a target=_blank title='Javascript jQuery library' href='https:\/\/jquery.com\/'>jQuery<\/a> (they all being aspects to web front-end (client) programming).  We are not going to extend the jQuery much on yesterday&#8217;s <a target=_blank title='Javascript jQuery Filter by Type Tutorial' href='#jjfbtt'>Javascript jQuery Filter by Type Tutorial<\/a> as shown below, today, but we do extend the CSS thoughts by adding in HTML element &#8220;class&#8221; and &#8220;ID&#8221; concepts (mainly in the HTML parts of the code &#8230; not the Javascript or jQuery) &#8230; two concepts that unite the CSS and Javascript <a target=_blank title='Javascript DOM information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/'>DOM<\/a> and jQuery coding worlds.<\/p>\n<p>An HTML element &#8220;class&#8221; is like a &#8220;classification&#8221; of HTML element, and the CSS references to class use the prefix &#8220;.&#8221;.  Bear in mind, though, an HTML element can have more than one class, and this can come in handy for CSS (Cascading Style Sheet) styling ideas, and Javascript DOM dynamic programming thoughts (and jQuery usage no doubt &#8230; though we don&#8217;t use this &#8220;feature&#8221; today).<\/p>\n<p>An HTML element &#8220;ID&#8221; is like an &#8220;identifier&#8221; of an HTML element, and the CSS references to ID use the prefix &#8220;#&#8221;.  Bear in mind, though, an HTML element can be identified uniquely (hopefully &#8230; but not enforced (if this interests, refer to <a target=_blank title='PHP Blog Summary Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-blog-summary-follow-up-tutorial\/'>PHP Blog Summary Follow Up Tutorial<\/a> for another way to look at this)) and so the <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_document_getelementbyid.asp' title='document.getElementById([ID])'>&#8220;document.getElementById([ID])&#8221;<\/a> refers to one HTML element, and the ID is also useful as a means to open the webpage and go to this &#8220;(hash)tag&#8221;.<\/p>\n<p>To be complete with the Javascript DOM business here we should mention that element types can be identified by the (array) result set of <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_document_getelementsbytagname.asp' title='document.getElementByTagName([ElementType])'>&#8220;document.getElementsByTagName([ElementType])&#8221;<\/a>, and &#8230; you guessed it &#8230; elements of a class can be identified in the manner of &#8230; <\/p>\n<p><code>if (document.getElementsByClassName) { var myclassarray=document.getElementsByClassName([ClassName]) }<\/code><\/p>\n<p> &#8230; the &#8220;if&#8221; being needed because not all the web browsers support this <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_document_getelementsbyclassname.asp' title='document.getElementByClassName([ClassName])'>method<\/a>.<\/p>\n<p>You&#8217;ll see with  the HTML(\/Javascript)\/jQuery source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html-GETME\" title='borderize.htm'>borderize.htm<\/a> that the &#8220;star&#8221; line of code &#8230;<\/p>\n<p><code>eval('$(\"body\").find(\"' + oisval + '\").css({\"color\": \"red\", \"border\": \"2px solid red\"})');<\/code><\/p>\n<p> &#8230; stays as is from yesterday &#8230; yayyyyyyyyy!!!!<\/p>\n<p>So try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.htm\" title='Click picture'>live run<\/a> or examine the code differences at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html-GETME\" title='borderize.htm'>borderize.htm<\/a><\/p>\n<hr>\n<p id='jjfbtt'>Previous relevant <a target=_blank title='Javascript jQuery Filter by Type Tutorial' href='http:\/\/www.rjmprogramming.com\/au\/ITblog\/javascript-jquery-filter-by-type-tutorial\/'>Javascript jQuery Filter by Type Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript jQuery Filter by Type Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.jpg\"  title=\"Javascript jQuery Filter by Type Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript jQuery Filter by Type Tutorial<\/p><\/div>\n<p>Today&#8217;s tutorial builds on yesterday&#8217;s <a target=_blank title='Javascript jQuery Traversing Primer Tutorial' href='#jjtpt'>Javascript jQuery Traversing Primer Tutorial<\/a> as shown below &#8230;<\/p>\n<blockquote>\n<p>Javascript brings great things to the client side of web applications. And within this Javascript world a wonderful library of functionality is <a target=_blank title='Javascript jQuery library' href='https:\/\/jquery.com\/'>jQuery<\/a>.<\/p>\n<p>The jQuery library starts you thinking in a jQuery way, admittedly, but you can mix and match it with traditional Javascript ways, as well if you wish, but just be easy on yourself with the &#8220;onload&#8221; event functionality, and adopt the jQuery approach, mixing the traditional Javascript in, as needed, rather than the other way around.<\/p>\n<p>Was looking at the jQuery &#8220;traversing&#8221; functionality &#8230; that is, &#8220;motoring&#8221; your way along the DOM &#8220;hierarchy&#8221; &#8220;tree&#8221; of HTML elements, and jQuery is really quite a good way to go, with some things happening on one line of code, that you cannot imagine happening in one line of code, such as &#8230;<\/p>\n<\/blockquote>\n<p> &#8230; to again use <a target=_blank title='Javascript jQuery library' href='https:\/\/jquery.com\/'>jQuery<\/a> to filter an HTML webpage&#8217;s contents, but this time it is more like the tutorial could be called &#8220;The Plucking Out&#8221; tutorial, because we identify parts of the webpage with similar HTML element type characters via the use of the jQuery <a target=_blank title='jQuery find() method information from w3schools' href='http:\/\/www.w3schools.com\/jquery\/traversing_find.asp'>find()<\/a> method to identify HTML elements we &#8220;borderize&#8221;.  You select what you want to &#8220;borderize&#8221; via a dropdown selection &#8230; (&#8220;oisval&#8221;, below, is the dropdown selection) &#8230;<\/p>\n<p><code>eval('$(\"body\").find(\"' + oisval + '\").css({\"color\": \"red\", \"border\": \"2px solid red\"})');<\/code><\/p>\n<p> &#8230; with the one &#8220;complication&#8221; being the &#8220;borderize&#8221; of the &#8220;body&#8221; tag, being as it is the parent to the &#8220;find()&#8221; method for non-body selections &#8230; weirdly, the &#8220;complication&#8221; solution is to leave out the find() call.  By the way, between selections the &#8220;document.body.innerHTML&#8221; redraw approach is used, just calling on an initial value snapshotted at the &#8220;onload&#8221; event.<\/p>\n<p>Here&#8217;s the HTML(\/Javascript)\/jQuery source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html_GETME\" title='borderize.html'>borderize.html<\/a> or try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/borderize.html\" title='Click picture'>live run<\/a>.  What do you think?<\/p>\n<hr>\n<p id='jjtpt'>Previous relevant <a target=_blank title='Javascript jQuery Traversing Primer Tutorial' href='http:\/\/www.rjmprogramming.com\/au\/ITblog\/javascript-jquery-traversing-primer-tutorial\/'>Javascript jQuery Traversing 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\/PHP\/jquery_parents_until.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Javascript jQuery Traversing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/jquery_parents_until.jpg\" id='ijpu' onmouseover=\" this.src=this.src.replace('.jpg','.xgif').replace('.gif','.xjpg').replace('.x','.');  \" title=\"Javascript jQuery Traversing Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Javascript jQuery Traversing Primer Tutorial<\/p><\/div>\n<p>Javascript brings great things to the client side of web applications. And within this Javascript world a wonderful library of functionality is <a target=_blank title='Javascript jQuery library' href='https:\/\/jquery.com\/'>jQuery<\/a>.<\/p>\n<p>The jQuery library starts you thinking in a jQuery way, admittedly, but you can mix and match it with traditional Javascript ways, as well if you wish, but just be easy on yourself with the &#8220;onload&#8221; event functionality, and adopt the jQuery approach, mixing the traditional Javascript in, as needed, rather than the other way around.<\/p>\n<p>Was looking at the jQuery &#8220;traversing&#8221; functionality &#8230; that is, &#8220;motoring&#8221; your way along the DOM &#8220;hierarchy&#8221; &#8220;tree&#8221; of HTML elements, and jQuery is really quite a good way to go, with some things happening on one line of code, that you cannot imagine happening in one line of code, such as &#8230;<\/p>\n<ul>\n<li>construct a jQuery <a target=_blank title='jQuery parentsUntil() information from w3schools' href='http:\/\/www.w3schools.com\/jquery\/traversing_parentsuntil.asp'>parentsUtil()<\/a> call and add a &#8230;<\/li>\n<li><a target=_blank title='jQuery css() method information from w3schools' href='http:\/\/www.w3schools.com\/jquery\/jquery_css.asp'>css()<\/a> method call that &#8230;<\/li>\n<\/ul>\n<p> &#8230; applies some CSS properties to all nested elements (in our case, amounts to a <a target=_blank title='HTML table information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_table.asp'>table<\/a> element made up of one <a target=_blank title='HTML a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'>a<\/a> tag and eight <a target=_blank title='Wordpress Recent Post Landing Page Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-landing-page-tutorial\/'>(recent post)<\/a> <a target=_blank title='HTML iframe information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> tags (nested in a <a target=_blank title='HTML div tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a>)) between a (child) (img) element type or ID and another (parent) (<a target=_blank title='HTML div tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a>) element type or ID &#8230; as per the <a target=_blank title='Javascript eval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval<\/a> assisted line of code (where &#8220;colis&#8221; is derived elsewhere) &#8230;<\/p>\n<p><code>  eval('$(\"img\").parentsUntil(\"div\").css({\"color\": \"' + colis + '\", \"border\": \"2px solid ' + colis + '\"})');<\/code><\/p>\n<p>&#8230; ends up as a method to &#8220;colour code&#8221; an action.  We use this to style a whole table element when a particular action happens with one cell.  You can do this with traditional Javascript as well, but it sure cuts down on coding to do such a task with jQuery.<\/p>\n<p>So we set out to apply a (more than usually concentrated) jQuery approach to the reworking of the &#8220;Recent Posts&#8221; ideas we&#8217;ve been developing at this blog we last talked about with <a target=_blank title='Wordpress Recent Post Landing Page Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-landing-page-tutorial\/'>WordPress Recent Post Landing Page Tutorial<\/a>.  So we latched onto what the Crontab\/Curl job uses to help this domain&#8217;s Landing Page hook into the list of Recent Posts, via the use of an <a target=_blank title='HTML iframe information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a>, for what it does, and this suited the task of making a new HTML(\/Javascript)\/jQuery web application that presents a table of images of these Recent Posts and lets the user click on the one that interests them, taking them to this blog posting in a new window via Javascript&#8217;s <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='Javascript window.open() method information from w3schools'>&#8220;window.open()&#8221;<\/a> &#8230; my apologies jQuery purists, for this slip up &#8230; instigated by the jQuery <a target=_blank title='jQuery click() method' href='http:\/\/www.w3schools.com\/jquery\/event_click.asp'>click()<\/a> method via &#8230;<\/p>\n<p><code>$(\"a\").click();<\/code><\/p>\n<p> &#8230; remember that &#8220;one&#8221; <a target=_blank title='HTML a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'>a<\/a> (link) tag.<\/p>\n<p>We start with these images having no title, and therefore, no (on)mouseover &#8220;hover&#8221; message usefulness, but jQuery traversing is quick enough to get in there and add this in in the time between the (on)mouseover &#8220;hover&#8221; and any &#8220;click&#8221; to activate the new blog posting window &#8230; by the way, apologies to all those mobile users without (on)mouseover &#8230; lately we&#8217;ve been doing quite a bit of this kind of event logic and hope to get back to more genericity soon &#8230; but today&#8217;s work&#8217;s functionality may not work for mobile users.<\/p>\n<p><b>Stop Press:<\/b><\/p>\n<p>Sun come up &#8230; sun goes down &#8230; we added an &#8220;onload&#8221; clause to the iframe and worked from here for the mobile scenario to resolve the mobile issue &#8230; with reference to the code below the code differences come sunrise plus a bit are <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/jquery_parents_until.html-GETME\" title='jquery_parents_until.html'>jquery_parents_until.html<\/a> &#8230; and so, resuming normal transmission &#8230;<\/p>\n<p>Here&#8217;s the HTML(\/Javascript)\/jQuery source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/jquery_parents_until.html-GETME\" title='jquery_parents_until.html'>jquery_parents_until.html<\/a> or try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/jquery_parents_until.html\" title='Click picture'>live run<\/a>.  What do you think?<\/p>\n<p>Used lots of useful links as below &#8230; all from that brilliant Open Source helper website <a target=_blank title='StackOverflow' href='http:\/\/stackoverflow.com'>StackOverflow<\/a>  &#8230; so, thanks (for getting so many of us through those scenarios where we are plain straight &#8220;fishing&#8221;) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='how-to-access-the-content-of-an-iframe-with-jquery' href='http:\/\/stackoverflow.com\/questions\/1796619\/how-to-access-the-content-of-an-iframe-with-jquery'>how-to-access-the-content-of-an-iframe-with-jquery<\/a><\/li>\n<li><a target=_blank title='get-html-inside-iframe-using-jquery' href='http:\/\/stackoverflow.com\/questions\/16103407\/get-html-inside-iframe-using-jquery'>get-html-inside-iframe-using-jquery<\/a><\/li>\n<li><a target=_blank title='how-to-remove-onclick-with-jquery' href='http:\/\/stackoverflow.com\/questions\/1687790\/how-to-remove-onclick-with-jquery'>how-to-remove-onclick-with-jquery<\/a><\/li>\n<li><a target=_blank title='jquery-click-fires-twice-when-clicking-on-label' href='http:\/\/stackoverflow.com\/questions\/8238599\/jquery-click-fires-twice-when-clicking-on-label'>jquery-click-fires-twice-when-clicking-on-label<\/a><\/li>\n<li><a target=_blank title='how-to-check-for-undefined-in-javascript' href='http:\/\/stackoverflow.com\/questions\/3390396\/how-to-check-for-undefined-in-javascript'>how-to-check-for-undefined-in-javascript<\/a><\/li>\n<\/ul>\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='#d14811' onclick='var dv=document.getElementById(\"d14811\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=jQuery\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14811' 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='#d14848' onclick='var dv=document.getElementById(\"d14848\"); 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='d14848' 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='#d14871' onclick='var dv=document.getElementById(\"d14871\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14871' 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='#d51180' onclick='var dv=document.getElementById(\"d51180\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/outline\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51180' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There is more to the &#8220;Border Story&#8221; than presented back in May, 2015 when we presented Javascript jQuery More Filtering Tutorial, albeit, this tutorial was more a tutorial about Javascript jQuery filtering. We feel we need a makeover, allowing a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-outline-and-border-via-javascript-jquery-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,37],"tags":[161,224,281,1664,3081,576,652,663,3521,997,1209,1319,2257],"class_list":["post-51180","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-border","tag-colour","tag-css","tag-global","tag-global-variable","tag-html","tag-javascript","tag-jquery","tag-outline","tag-programming","tag-style","tag-tutorial","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51180"}],"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=51180"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51180\/revisions"}],"predecessor-version":[{"id":51185,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51180\/revisions\/51185"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}