{"id":65359,"date":"2024-10-30T03:01:00","date_gmt":"2024-10-29T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65359"},"modified":"2024-10-28T12:27:26","modified_gmt":"2024-10-28T02:27:26","slug":"wordpress-iphone-twentyten-theme-search-scrolling-revisited-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-iphone-twentyten-theme-search-scrolling-revisited-tutorial\/","title":{"rendered":"WordPress TwentyTen Theme Search Scrolling Revisited Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/less_stingy_lobbing.gif' title='WordPress TwentyTen Theme Search Scrolling Revisited Tutorial' rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/less_stingy_lobbing.gif\"  \/><\/a><p class=\"wp-caption-text\">WordPress TwentyTen Theme Search Scrolling Revisited Tutorial<\/p><\/div>\n<p>Belief systems can stick, perhaps to your detriment, on occasions.  Until recently, somehow, we thought it was asking too much of Javascript DOM, that we can dynamically change an HTML element attribute &#8230;<\/p>\n<ul>\n<li>id<\/li>\n<li>name<\/li>\n<\/ul>\n<p> &#8230; as if they were sacrosanct attributes, or something.  This belief, regarding <i>name<\/i> is doubly naive, as <i>name<\/i> is used in form navigation, flagging the element values that will be passed on through to the destination webpage.<\/p>\n<p>Recently we&#8217;ve been debunking such naivety, using methodology always available to you regarding the extremely flexible, and non-damaging, ways of Javascript and DOM, on the clientside of the webpage &#8220;client\/server equation&#8221;.  In other words &#8230;<\/p>\n<blockquote><p>\nIf you don&#8217;t know if something will work, or not, using clientside Javascript, and it&#8217;s Document Object Model (ie. DOM) arrangements, just try it.  What harm can it do, except to something in the webpage session you are in, or perhaps HTTP Cookies or perhaps window.localStorage, all of which can be repaired, and, for that matter examined, using a web inspector?\n<\/p><\/blockquote>\n<p>Here&#8217;s a case in point, for us.  The other day, with <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-iphone-twentyten-theme-search-scrolling-tutorial\/' title='WordPress iPhone TwentyTen Theme Search Scrolling Tutorial' rel=\"noopener\">WordPress iPhone TwentyTen Theme Search Scrolling Tutorial<\/a> we referenced an inhouse WordPress Blog TwentyTen theme&#8217;s header.php&#8217;s PHP (writing Javascript) code snippet &#8230;<\/p>\n<blockquote><p>\n&lt;?php<br \/>\n<code><br \/>\nfunction captionsearchit() {<br \/>\n  var ps=document.getElementsByTagName(\"p\");<br \/>\n  for (var i=0; i&lt;ps.length; i++) {<br \/>\n    if (('' + ps[i].className) == 'wp-caption-text') {<br \/>\n       ps[i].innerHTML+=\"&amp;nbsp;&amp;nbsp;&amp;nbsp;<font color=blue>&lt;a onclick=\\\"document.getElementById('s').scrollIntoView();\\\" style=text-decoration:none;cursor:pointer; title=Search&gt;&amp;#128269;&lt;\/a&gt;<\/font>\";<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;\n<\/p><\/blockquote>\n<p> &#8230; which &#8220;did the job&#8221;, but on us mulling over it&#8217;s stinginess regarding where any Back &#128281; link would lob you back onto (ie. not showing up the top the blog posting&#8217;s full title <span style=display:none;> nor it&#8217;s accompanying &#8220;header media&#8221;<\/span> always), we thought an improvement could be made by &#8230;<\/p>\n<ol>\n<li>prefixing an &#8220;<strong>a<\/strong>&#8221; to the caption emoji &#128269; link&#8217;s <i>id<\/i> attribute and &#8230;<\/li>\n<li>assign <i>what we used to have<\/i> as this emoji link <i>id<\/i> attribute to the hosting element &#8230;<\/li>\n<\/ol>\n<p> &#8230; which we&#8217;ll (more happily, and more contextually, and less stingily) lob back onto <font color=blue>as per, the new header.php (PHP writing Javascript) snippet<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nfunction captionsearchit() {<br \/>\n  var fone=-1, was_ih='';<br \/>\n  var ps=document.getElementsByTagName(\"p\");<br \/>\n  for (var i=0; i&lt;ps.length; i++) {<br \/>\n    if (('' + ps[i].className) == 'wp-caption-text') {<br \/>\n       if (fone &lt; 0) { fone=i; }<br \/>\n       was_ih=ps[i].innerHTML;<br \/>\n       <font color=blue>if (('' + ps[i].id).indexOf('psi') != -1) {<br \/>\n       ps[i].innerHTML+=\"&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a title='Search ...' data-title='\" + was_ih + \"' id=<strong>a<\/strong>psi\" + i + \" onclick=\\\"if (document.getElementById('spanback')) { document.getElementById('spanback').style.display='inline-block'; document.getElementById('aback').title='Back to reading ' + this.getAttribute('data-title') + ' ...'; this.title=this.getAttribute('data-title'); document.getElementById('aback').href=('#' + this.id).replace('#a','#'); } document.getElementById('s').scrollIntoView();\\\" style=text-decoration:none;cursor:pointer; title=Search&gt;&amp;#128269;&lt;\/a&gt;\";<br \/>\n       } else {<br \/>\n       <\/font><font color=purple>ps[i].id='psi' + i;<\/font><font color=blue><br \/>\n       ps[i].innerHTML+=\"&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a title='Search ...' data-title='\" + was_ih + \"' id=<strong>a<\/strong>psi\" + i + \" onclick=\\\"if (document.getElementById('spanback')) { document.getElementById('spanback').style.display='inline-block'; document.getElementById('aback').title='Back to reading ' + this.getAttribute('data-title') + ' ...'; this.title=this.getAttribute('data-title'); document.getElementById('aback').href=('#' + this.id).replace('#a','#'); } document.getElementById('s').scrollIntoView();\\\" style=text-decoration:none;cursor:pointer; title=Search&gt;&amp;#128269;&lt;\/a&gt;\";<br \/>\n       }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n  postcaptionsearchit();<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; our <font color=purple>ps[i].id=&#8217;psi&#8217; + i;<\/font> being a case in point where the dynamic assignment of an element <i>id<\/i> attribute is quite handy!<\/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='#d65359' onclick='var dv=document.getElementById(\"d65359\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65359' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Belief systems can stick, perhaps to your detriment, on occasions. Until recently, somehow, we thought it was asking too much of Javascript DOM, that we can dynamically change an HTML element attribute &#8230; id name &#8230; as if they were &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-iphone-twentyten-theme-search-scrolling-revisited-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":[112,151,1887,327,354,385,2846,631,652,1807,2505,870,877,932,997,1126,1268,1282,1319,1324,1325,2099,1456,1458],"class_list":["post-65359","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-attribute","tag-blog","tag-codex","tag-did-you-know","tag-dom","tag-emoji","tag-id","tag-iphone","tag-javascript","tag-link","tag-name","tag-onload","tag-open-source","tag-php","tag-programming","tag-settimeout","tag-theme","tag-timer","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-web-inspector","tag-wordpress","tag-wordpress-org"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65359"}],"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=65359"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65359\/revisions"}],"predecessor-version":[{"id":65378,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65359\/revisions\/65378"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}