{"id":14507,"date":"2015-04-25T05:01:37","date_gmt":"2015-04-24T19:01:37","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14507"},"modified":"2015-04-29T18:36:58","modified_gmt":"2015-04-29T08:36:58","slug":"internet-explorer-8-with-no-canvas-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/internet-explorer-8-with-no-canvas-primer-tutorial\/","title":{"rendered":"Internet Explorer 8 with No Canvas Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ie8_no_canvas.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Internet Explorer 8 with No Canvas Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ie8_no_canvas.jpg\" title=\"Internet Explorer 8 with No Canvas Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Internet Explorer 8 with No Canvas Primer Tutorial<\/p><\/div>\n<p>Was gobsmacked the other day trying <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/worldold.htm' title='Map web application'>worldold.htm<\/a> on Internet Explorer 8, because I&#8217;d forgotten that the &#8220;canvas&#8221; element is not supported in IE8 or below.   This web application uses the HTML5 <a target=_blank title='HTML5 canvas element' href='http:\/\/www.w3schools.com\/html\/html5_canvas.asp'>&#8220;canvas&#8221;<\/a> element not natively available in IE8 or below.  We talked about such code last with <a target=_blank title='HTML5 Canvas Map Clickaround Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-canvas-map-clickaround-follow-up-tutorial\/'>HTML5 Canvas Map Clickaround Follow Up Tutorial<\/a>.<\/p>\n<p>However, this web application, and its like, use an image whose &#8220;onclick&#8221; event could be made to simulate functionality currently done by the &#8220;canvas&#8221; element, in order for these web applications to work for IE8 and below.<\/p>\n<p>So thought you might like to try out this IE8 friendly web application as &#8230; <\/p>\n<p>Live run &#8230;<\/p>\n<ul>\n<\/li>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.htm\" title='World Clickable Map (with nearby Airports)'>World Clickable Map (with nearby Airports)<\/a><\/li>\n<\/li>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html\" title='World Clickable Map'>World Clickable Map<\/a><\/li>\n<\/ul>\n<p>HTML Code &#8230;<\/p>\n<ul>\n<\/li>\n<\/li>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html---GETME\" title='world.htm'>World Clickable Map (with nearby Airports)<\/a><\/li>\n<\/ul>\n<p>Changes to HTML Code &#8230;<\/p>\n<ul>\n<\/li>\n<\/li>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html---GETME\" title='Changes to world.htm'>World Clickable Map (with nearby Airports)<\/a><\/li>\n<\/ul>\n<p> &#8230; and you&#8217;ll see that &#8230;  <i>&#8220;elements.forEach(function(element)&#8221;<\/i> no longer works and that <i>&#8220;elem.addEventListener(&#8216;click&#8217;, function(event)&#8221;<\/i> needed to be <i>&#8220;elem.attachEvent(&#8216;onclick&#8217;, function(event)&#8221;<\/i> and that the recognized mouse position co-ordinate system is <i>&#8220;(event.clientX, event.clientY)&#8221;<\/i> (rather than (event.pageX, event.pageY)) and additional  <i>&#8220;position:absolute;left:0;top:0;&#8221;<\/i> &#8220;img&#8221; element styling was needed for IE8 and below &#8230; some useful links &#8230;<\/p>\n<ul>\n<li><a target=_blank title='javascript - addEventListener not working in IE8 - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9769868\/addeventlistener-not-working-in-ie8'>javascript &#8211; addEventListener not working in IE8 &#8211; Stack Overflow<\/a><\/li>\n<li><a target=_blank title='internet explorer - Best way to check for IE less than 9 in JavaScript without library - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/5574842\/best-way-to-check-for-ie-less-than-9-in-javascript-without-library'>internet explorer &#8211; Best way to check for IE less than 9 in JavaScript without library &#8211; Stack Overflow<\/a><\/li>\n<li><a target=_blank title='best way to check for ie less than 9 in javascript without library' href='http:\/\/stackoverflow.com\/questions\/5574842\/best-way-to-check-for-ie-less-than-9-in-javascript-without-library'>best way to check for ie less than 9 in javascript without library<\/a><\/li>\n<\/ul>\n<p> &#8230; all a &#8220;trap for young players&#8221; perhaps?! &#8230; or just a reason to call myself &#8220;young&#8221; &#8230; chortle, chortle.<\/p>\n<p>Maybe some of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ie8_no_canvas.jpg\" title='Click picture'>this<\/a> is a cross-browser issue for you as well?<\/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='#d14507' onclick='var dv=document.getElementById(\"d14507\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=internet-explorer\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14507' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Was gobsmacked the other day trying worldold.htm on Internet Explorer 8, because I&#8217;d forgotten that the &#8220;canvas&#8221; element is not supported in IE8 or below. This web application uses the HTML5 &#8220;canvas&#8221; element not natively available in IE8 or below. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/internet-explorer-8-with-no-canvas-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,17,37],"tags":[184,275,400,513,518,576,578,622,1516,652,684,719,862,997,1319,1404],"class_list":["post-14507","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gui","category-tutorials","tag-canvas","tag-cross-browser","tag-event","tag-google","tag-google-chart","tag-html","tag-html5","tag-internet-explorer","tag-internet-explorer-8","tag-javascript","tag-latitude","tag-longitude","tag-onclick-event","tag-programming","tag-tutorial","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14507"}],"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=14507"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14507\/revisions"}],"predecessor-version":[{"id":14568,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14507\/revisions\/14568"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=14507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=14507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=14507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}