{"id":51477,"date":"2021-01-21T03:01:34","date_gmt":"2021-01-20T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51477"},"modified":"2021-01-21T06:43:26","modified_gmt":"2021-01-20T20:43:26","slug":"javascript-document-queryselectorall-user-styled-clickable-border-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselectorall-user-styled-clickable-border-tutorial\/","title":{"rendered":"Javascript document.querySelectorAll User Styled Clickable Border Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll User Styled Clickable Border Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_border_clickable.gif\" title=\"Javascript document.querySelectorAll User Styled Clickable Border Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll User Styled Clickable Border Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Javascript document.querySelectorAll Primer Tutorial' href='#j.sapt'>Javascript document.querySelectorAll Primer Tutorial<\/a> has been &#8220;stretched&#8221; in functionality in two ways &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s user defined selector but static styling is now opened up to user defined styling as well &#8230;<\/li>\n<li>we wanted to allow a user defined CSS styling that involves the use of &#8221; BORDER&#8221; somewhere adds border clickable elements that satisfy the selector criteria <font color=blue>used in<\/font> &#8230;<\/p>\n<\/ul>\n<p><code><br \/>\n function checkif(iois) {<br \/>\n  var ij;<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n      if (aconto.document) { aconto = aconto.document; }<br \/>\n      if (selectoris != '') {<br \/>\n       if (selectorplusis != '') {<br \/>\n        aconto.body.innerHTML+=' &lt;style&gt; ' + selectorplusis + '&lt;\/style&gt; ';<br \/>\n        if (selectorplusis.indexOf(' BORDER') != -1) {<br \/>\n          <font color=blue>eles=aconto.querySelectorAll(selectoris);<\/font><br \/>\n          for (ij=eval(-1 + eles.length); ij&gt;=0; ij--) {<br \/>\n            froms.push(eles[ij].outerHTML);<br \/>\n            tos.push('&lt;a onclick=\"alert(this.innerHTML);\" style=\"cursor:pointer;text-decoration:none;\" title=\"Border clickable\"&gt;' + eles[ij].outerHTML + '&lt;\/a&gt;');<br \/>\n          }<br \/>\n          for (ij=0; ij&lt;froms.length; ij++) {<br \/>\n            aconto.body.innerHTML=aconto.body.innerHTML.replace(froms[ij], tos[ij]);<br \/>\n          }<br \/>\n        }<br \/>\n       } else {<br \/>\n        eles=aconto.querySelectorAll(selectoris);<br \/>\n        for (ij=0; ij&lt;eles.length; ij++) {<br \/>\n          eles[ij].style.border='1px dashed red';<br \/>\n        }<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Yes, we needed <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=onclick+just+for+border&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=onclick+just+for+border&#038;aqs=chrome..69i57j33i160.6888j1j4&#038;sourceid=chrome&#038;ie=UTF-8'>to ask for help<\/a>, and <a target=_blank title='Good help, thanks' href='https:\/\/www.sitepoint.com\/community\/t\/how-to-do-a-border-onclick\/334962'>got good help here<\/a>, thanks <font size=1>(for that <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=cnaeIAEp2pU'>doh!<\/a> moment)<\/font>.<\/p>\n<p> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html-GETME\" title=\"qsall.htm\">Today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link is worth it to try the (Pure) Javascript meets CSS ideas above.<\/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\/javascript-document.queryselectorall-user-styled-clickable-border-tutorial\/'>Javascript document.querySelectorAll User Styled Clickable Border Tutorial<\/a>.<\/p-->\n<hr>\n<p id='j.sapt'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-primer-tutorial\/'>Javascript document.querySelectorAll 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\/qsall.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall.gif\" title=\"Javascript document.querySelectorAll Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll Primer Tutorial<\/p><\/div>\n<p>&#8220;Pure Javascript&#8221; versus &#8220;jQuery&#8221; is an issue for many developers of client side web application code logic.  More often than not we plump for the former, though there are notable exceptions for us, such as <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a> is often of use, and we have used the very apt <font size=1>(for today&#8217;s topic)<\/font> <a tareget=_blank title='jQuery CSS' href='https:\/\/api.jquery.com\/css\/'>jQuery CSS<\/a> on occasions.  But for today&#8217;s proof of concept test run of &#8230;<\/p>\n<p><code><br \/>\ndocument.<a target=_blank title='HTML DOM querySelectorAll() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselectorall.asp'>querySelectorAll<\/a>([CSS-selector]);<br \/>\n<\/code><\/p>\n<p> &#8230; it&#8217;s all &#8220;Pure Javascript&#8221;.  In today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html_GETME\">qsall.html<\/a> HTML and &#8220;Pure Javascript&#8221; code you will not find the string &#8220;document.<a target=_blank title='HTML DOM querySelectorAll() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselectorall.asp'>querySelectorAll<\/a>&#8221; anywhere because our web application is &#8230;<\/p>\n<ul>\n<li>just some header HTML elements and one HTML input type=text &#8220;textbox&#8221; element and one containing div element and one input type=text to avoid &#8220;tabbing out&#8221; annoyances &#8230;<\/li>\n<li>&#8220;textbox&#8221; accepts a relative URL in two parts as per &#8230;<br \/>\n<code><br \/>\n[relativeURLTo-\/\/www.rjmprogramming.com.au\/]#[CSS-selector]<br \/>\n<\/code>\n<\/li>\n<li>that relative URL is the &#8220;src&#8221; property to an HTML iframe element that overlays <font size=1>(made to be barely visible)<\/font> header HTML elements and one HTML input type=text &#8220;textbox&#8221; element &#8230; and whose &#8230;<\/li>\n<li>&#8220;onload&#8221; event logic goes &#8230;<br \/>\n<code><br \/>\n function checkif(iois) {<br \/>\n  var ij;<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n      if (aconto.document) { aconto = aconto.document; }<br \/>\n      if (selectoris != '') {<br \/>\n        eles=aconto.querySelectorAll(selectoris);<br \/>\n        for (ij=0; ij&lt;eles.length; ij++) {<br \/>\n          eles[ij].style.border='1px dashed red';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; that you can try for yourself with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html\" title=\"Click picture\">live run<\/a> link.<\/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='#d51472' onclick='var dv=document.getElementById(\"d51472\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/querySelectorAll\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51472' 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='#d51477' onclick='var dv=document.getElementById(\"d51477\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51477' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Javascript document.querySelectorAll Primer Tutorial has been &#8220;stretched&#8221; in functionality in two ways &#8230; yesterday&#8217;s user defined selector but static styling is now opened up to user defined styling as well &#8230; we wanted to allow a user defined CSS &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselectorall-user-styled-clickable-border-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,3543,211,212,576,652,3542,663,1807,861,997,1986,2854,1212,1319],"class_list":["post-51477","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-border","tag-border-click","tag-click","tag-client","tag-html","tag-javascript","tag-javascript-document-queryselectorall","tag-jquery","tag-link","tag-onclick","tag-programming","tag-proof-of-concept","tag-queryselectorall","tag-styling","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51477"}],"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=51477"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51477\/revisions"}],"predecessor-version":[{"id":51482,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51477\/revisions\/51482"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}