{"id":14811,"date":"2015-05-15T05:01:28","date_gmt":"2015-05-14T19:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14811"},"modified":"2015-05-15T13:11:03","modified_gmt":"2015-05-15T03:11:03","slug":"javascript-jquery-traversing-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-jquery-traversing-primer-tutorial\/","title":{"rendered":"Javascript jQuery Traversing Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>Javascript brings great things to the client side of web applications. And within this Javascript world a wonderful library of functionality is jQuery. The jQuery library starts you thinking in a jQuery way, admittedly, but you can mix and match &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-jquery-traversing-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,37],"tags":[274,281,284,354,400,401,563,576,587,651,663,1546,861,870,871,877,1547,997,1031,1545,1200,1544,1304,1319],"class_list":["post-14811","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-crontab","tag-css","tag-curl","tag-dom","tag-event","tag-event-driven","tag-hierachy","tag-html","tag-iframe","tag-javascipt","tag-jquery","tag-nested","tag-onclick","tag-onload","tag-onmouseover","tag-open-source","tag-parentsuntil","tag-programming","tag-recent-posts","tag-stackoverflow","tag-stop-press","tag-traversing","tag-tree","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14811"}],"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=14811"}],"version-history":[{"count":17,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14811\/revisions"}],"predecessor-version":[{"id":14836,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14811\/revisions\/14836"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=14811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=14811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=14811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}