{"id":21999,"date":"2016-07-02T03:01:11","date_gmt":"2016-07-01T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=21999"},"modified":"2016-07-02T07:07:19","modified_gmt":"2016-07-01T21:07:19","slug":"iframe-onclick-event-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/iframe-onclick-event-primer-tutorial\/","title":{"rendered":"Iframe Onclick Event Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/iframe_click.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Iframe Onclick Event Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/iframe_click.jpg\" title=\"Iframe Onclick Event Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Iframe Onclick Event Primer Tutorial<\/p><\/div>\n<p>The HTML iframe element is a very useful &#8220;container&#8221; of content, and we normally think of the power of this element in terms of what its content is.  No arguments there, but can the &#8220;onclick&#8221; event of the surrounds of that content, in other words, the iframe frame or border, be useful in some practical way.<\/p>\n<p>Well, we think there could be some uses.  Two that we can think of, and the first we&#8217;ve tried somewhere before, are &#8230;<\/p>\n<ul>\n<li>use HTML iframe onclick event logic to change the opacity of the iframe contents (as we once referred to with <a target=_blank title='Canvas Annotation Email Attachment Clipboard Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotation-email-attachment-clipboard-tutorial\/'>Canvas Annotation Email Attachment Clipboard Tutorial<\/a>)<\/li>\n<li>use HTML iframe onclick event logic to &#8220;motor&#8221; through the slides of a slideshow using client pre-emptive iframe thoughts, or perhaps Ajax jQuery thoughts<\/li>\n<\/ul>\n<p>Perhaps you can think of the first as brightness control on a television.<\/p>\n<p>The second thought has more to it of real value, perhaps, in extensibility and practicality, in the sense of a slideshow probably being made up of slides with a URL involving a numerical component to their definitions.  Our program you could call <a target=_blank title='iframe_click.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/iframe_click.html_GETME'>iframe_click.html<\/a> with its <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/iframe_click.html'>live run<\/a> (default opacity functionality) or <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/iframe_click.html?slideshow=http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/ansible-92of.jpg'>live run<\/a> (slideshow example) modes of use shows these couple of ideas in action.<\/p>\n<p>For us the client pre-emptive iframe ideas all worked up to the point of a image URL that would involve a 404 (not found) error code, and how to check for that, but Ajax jQuery was the solution to cater for successful and unsuccessful image iframe URL calls.<\/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='#d21999' onclick='var dv=document.getElementById(\"d21999\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/membership\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d21999' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The HTML iframe element is a very useful &#8220;container&#8221; of content, and we normally think of the power of this element in terms of what its content is. No arguments there, but can the &#8220;onclick&#8221; event of the surrounds of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/iframe-onclick-event-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":[400,576,587,861,997,1151,1319],"class_list":["post-21999","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-event","tag-html","tag-iframe","tag-onclick","tag-programming","tag-slideshow","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21999"}],"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=21999"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21999\/revisions"}],"predecessor-version":[{"id":23237,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21999\/revisions\/23237"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=21999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=21999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=21999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}