{"id":55187,"date":"2022-03-20T03:01:40","date_gmt":"2022-03-19T17:01:40","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55187"},"modified":"2022-03-20T20:59:22","modified_gmt":"2022-03-20T10:59:22","slug":"contenteditable-outerhtml-ideas-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/contenteditable-outerhtml-ideas-primer-tutorial\/","title":{"rendered":"Contenteditable OuterHTML Ideas Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contenteditable_outerhtml_ideas.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Contenteditable OuterHTML Ideas Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contenteditable_outerhtml_ideas.jpg\" title=\"Contenteditable OuterHTML Ideas Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Contenteditable OuterHTML Ideas Primer Tutorial<\/p><\/div>\n<p>Javascript <a target=_blank title='Javascript DOM information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_htmldom.asp'>DOM<\/a> (document object model) work can be very rewarding, and you can achieve a lot of client based webpage work in a very dynamic way using its techniques.  Of the gobsmacking highlights we well remember &#8230;<\/p>\n<ul>\n<li><font size=1>very early on &#8230; seeing how useful was &#8230; <\/font> <a target=_blank title='HTML innerHTML property' href='https:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> for HTML elements with proper endtag arrangements<\/li>\n<li><font size=1>years later &#8230; seeing how useful was &#8230; <\/font> <a target=_blank title='HTML outerHTML property' href='https:\/\/www.w3schools.com\/jsref\/prop_html_outerhtml.asp'>outerHTML<\/a> for piecing together content for inline HTML emails, for example<\/li>\n<li><font size=1>and later again &#8230; seeing how useful was &#8230; <\/font> <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true for a CMS (content management system) feel to HTML elements with proper endtag arrangements<\/li>\n<\/ul>\n<p> &#8230; and we&#8217;d like to condense that length of time for some potential readers interested in seeing these <i>Javascript DOM stars<\/i> all in action together in the one proof of concept web application.  Its design is just a 3&#215;3 grid table in the background with each table cell populated by div contenteditable content the user can change (ie. their content changes are reflected in the look of the div elements afterwards).<\/p>\n<p>We also use the wonderful CSS <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a>() function as a precision HTML element placement tool that also may interest the user of our proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contenteditable_outerhtml_ideas.html_GETME\" title=\"contenteditable_outerhtml_ideas.html\">contenteditable_outerhtml_ideas.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contenteditable_outerhtml_ideas.html\" title=\"Click picture\">web application<\/a> ideas &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contenteditable_outerhtml_ideas.html\" style=\"width:100%;height:900px;\"><\/iframe><\/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='#d55187' onclick='var dv=document.getElementById(\"d55187\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/outerHTML\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55187' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Javascript DOM (document object model) work can be very rewarding, and you can achieve a lot of client based webpage work in a very dynamic way using its techniques. Of the gobsmacking highlights we well remember &#8230; very early on &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/contenteditable-outerhtml-ideas-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":[2422,2442,281,354,576,1525,652,1861,997,1319],"class_list":["post-55187","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-calc","tag-contenteditable","tag-css","tag-dom","tag-html","tag-innerhtml","tag-javascript","tag-outerhtml","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55187"}],"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=55187"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55187\/revisions"}],"predecessor-version":[{"id":55200,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55187\/revisions\/55200"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}