{"id":60859,"date":"2023-09-24T03:01:53","date_gmt":"2023-09-23T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60859"},"modified":"2023-09-23T15:12:18","modified_gmt":"2023-09-23T05:12:18","slug":"interactively-change-background-image-on-scroll-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-tutorial\/","title":{"rendered":"Interactively Change Background Image on Scroll Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interactively Change Background Image on Scroll Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.gif\" title=\"Interactively Change Background Image on Scroll Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Interactively Change Background Image on Scroll Tutorial<\/p><\/div>\n<p>Regarding today&#8217;s &#8220;Interactively Change Background Image on Scroll&#8221; topic, we&#8217;d like to thank, profusely, two sources &#8230;<\/p>\n<ul>\n<li>Ideas and Initial Code &#8230; <a target=_blank href='https:\/\/www.w3schools.com\/'>W3School<\/a>&#8216;s <a target=_blank href='https:\/\/www.w3schools.com\/howto\/howto_css_bg_change_scroll.asp' title='How TO - Change Background on Scroll'>How TO &#8211; Change Background on Scroll<\/a><\/li>\n<li>Background Image Content &#8230; <a target=_blank href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a><\/li>\n<\/ul>\n<p>Queue &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=yTapoA5RQyo'>Lulu<\/a> <font size=1>(no, not <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/Android\/NalaLuna.jpg'>the dog<\/a>, this time)<\/font>!<\/p>\n<p>Yes, we&#8217;ve just added &#8220;Interactively&#8221;, we hear you say <font size=1>(just maybe, perhaps, a tad sarcastically, shall we say &#8230; huh?!!!!)<\/font>.  But, it&#8217;s the &#8230;<\/p>\n<ul>\n<li><i><a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable=true<\/a><\/i> HTML div <font size=1>(not new by itself &#8230; but combined with)<\/font> &#8230;<\/li>\n<li>text length calculator logic (using an HTML canvas element&#8217;s <a target=_blank title='Canvas measureText information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/canvas_measuretext.asp'>measureText<\/a> functionality), thanks to <a target=_blank href='https:\/\/stackoverflow.com\/questions\/31305071\/measuring-text-width-height-without-rendering' title='https:\/\/stackoverflow.com\/questions\/31305071\/measuring-text-width-height-without-rendering'>https:\/\/stackoverflow.com\/questions\/31305071\/measuring-text-width-height-without-rendering<\/a> &#8230; calling on &#8230;<\/li>\n<li><a target=_blank title='HTML onkeydown event information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/event_onkeydown.asp'><i>onkeydown<\/i><\/a> logic &#8230; to be a bit savvy regarding the text element width (along with use of <a target=_blank title='Javascropt DOM innerText information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/prop_node_innertext.asp'>innerText<\/a> and the <a target=_blank title='HTML onblur event information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/event_onblur.asp'><i>onblur<\/i><\/a> event logic backup)<\/li>\n<\/ul>\n<p> &#8230; that is all a bit new, at least to us, today, continuing on the recent wonder regarding <i>contenteditable=true<\/i>, mentioned in the recent <a target=_blank title='Animated GIF SVG Quiz Automation Interaction Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-quiz-automation-interaction-tutorial\/'>Animated GIF SVG Quiz Automation Interaction Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-svg-quiz-automation-interaction-tutorial\/'><p>\nAnd did you know, at least for non-mobile platforms, you can set the focus (on non-mobile platforms only, as there are the \u201ckeyboard getting in the way\u201d issues we\u2019re thankful for with mobile platforms which preclude any thoughts of a programmed [element].focus() operation) to one of these \u201ccontenteditable=true style elements\u201d? We\u2019d never been sure, only focussing to HTML input textboxes and textareas up to now, we believe.\n<\/p><\/blockquote>\n<p> &#8230; whereby non-mobile focus to a contenteditable=true HTML div type (innerHTML style) element is possible, adding to the original W3School&#8217;s content ideas swirling around &#8230;<\/p>\n<ul>\n<li>CSS position: fixed; &#8230; for foreground text, in relation to &#8230;<\/li>\n<li>scrolling &#8230; with &#8230;<\/li>\n<li>background image<sub>ry<\/sub><\/li>\n<\/ul>\n<p> &#8230; for topics we hope you find as interesting as we did, in our new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html_GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\"><\/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='#d60859' onclick='var dv=document.getElementById(\"d60859\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/fixed\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60859' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Regarding today&#8217;s &#8220;Interactively Change Background Image on Scroll&#8221; topic, we&#8217;d like to thank, profusely, two sources &#8230; Ideas and Initial Code &#8230; W3School&#8216;s How TO &#8211; Change Background on Scroll Background Image Content &#8230; Lorem Picsum Queue &#8230; Lulu (no, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-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":[126,127,2442,281,318,342,400,3037,573,576,590,599,1525,2469,652,673,3982,4490,860,1705,1988,997,1917,1107,1254,1319,3048,1418,2257],"class_list":["post-60859","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-background-image","tag-contenteditable","tag-css","tag-design","tag-div","tag-event","tag-fixed","tag-hotkey","tag-html","tag-image","tag-img","tag-innerhtml","tag-innertext","tag-javascript","tag-keyboard","tag-lorem-picsum","tag-measuretext","tag-onblur","tag-onkeydown","tag-position","tag-programming","tag-scroll","tag-scrolling","tag-text","tag-tutorial","tag-w3schools","tag-webpage","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60859"}],"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=60859"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60859\/revisions"}],"predecessor-version":[{"id":60875,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60859\/revisions\/60875"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}