{"id":60876,"date":"2023-09-25T03:01:06","date_gmt":"2023-09-24T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60876"},"modified":"2023-09-24T16:15:27","modified_gmt":"2023-09-24T06:15:27","slug":"interactively-change-background-image-on-scroll-user-settings-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-user-settings-tutorial\/","title":{"rendered":"Interactively Change Background Image on Scroll User Settings 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 User Settings Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll_more.jpg\" title=\"Interactively Change Background Image on Scroll User Settings Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Interactively Change Background Image on Scroll User Settings Tutorial<\/p><\/div>\n<p>If you are a regular reader, you&#8217;ll know with the web applications presented here, we usually try to allow the user to control &#8230;<\/p>\n<ul>\n<li>how they function &#8230; and\/or sometimes &#8230;<\/li>\n<li>how they look<\/li>\n<\/ul>\n<p> &#8230; in the ephemeral &#8220;this session&#8221; sense, and sometimes follow that up, depending, with recallable settings often calling on window.localStorage or HTTP Cookies, associated with the web browser being used.<\/p>\n<p>Regarding that <i>ephemeral &#8220;this session&#8221; sense<\/i> above, building on the work of yesterday&#8217;s <a title='Interactively Change Background Image on Scroll Tutorial' href='#icbist'>Interactively Change Background Image on Scroll Tutorial<\/a>, we now allow the user control over defining any\/all &#8230;<\/p>\n<ul>\n<li>Background Image source URL<\/li>\n<li>Refresh delay (in seconds)<\/li>\n<li>Text Wording<\/li>\n<li>Text Background Image source URL<\/li>\n<\/ul>\n<p> &#8230; and regarding the use of that last one, we&#8217;ve decided, somewhat, to take over with the CSS regarding the Text Wording showing through amongst so many &#8220;image interests&#8221; with various opacities &#8230;<\/p>\n<p><code><br \/>\n  var mode='dw';<br \/>\n  <br \/>\n  function preask() {<br \/>\n   if (backimg.trim() != '') {<br \/>\n    if (backimg.toLowerCase().replace(\/\\ \/g,'') == 'lorempicsum') {<br \/>\n       backimg='\/\/picsum.photos\/600\/400' + suffix + '?random=' + Math.floor(Math.random() * 198765643);<br \/>\n       if (mode == 'dw') {<br \/>\n       mode='';<br \/>\n       document.write('&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;');<br \/>\n       } else {<br \/>\n       document.getElementById('dstyle').innerHTML+='&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;';<br \/>\n       }<br \/>\n       backimg='lorempicsum';<br \/>\n    } else {<br \/>\n       if (mode == 'dw') {<br \/>\n       mode='';<br \/>\n       document.write('&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;');<br \/>\n       } else {<br \/>\n       document.getElementById('dstyle').innerHTML+='&lt;style&gt; .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(\"' + backimg + '\"); background-size: contain; background-repeat: repeat;  text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9;  } &lt;\/style&gt;';<br \/>\n       }<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Which beggars the observation &#8230;<\/p>\n<blockquote><p>\nIsn&#8217;t the CSS <a target=_blank title='CSS text-shadow information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_text-shadow.php'>text-shadow<\/a> property just great?!\n<\/p><\/blockquote>\n<p>We use it more and more often to help out foreground text presented with a lot of &#8220;overlay imagery&#8221; going on behind it.<\/p>\n<p>Here is the Javascript prompt window &#8220;blurb&#8221; presented to the user should they want to delve into this woooooorrrrrlllllldddd just by clicking or touching in the non-text part of the webpage &#8230;<\/p>\n<blockquote><p>\n      <font size=1>var ansis=prompt(&#8216;<\/font>Optionally enter in background source URL prefix [&#8216; + prefix + midbit + suffix + &#8216;] ( or type Lorem Picsum or for blog posting images you could try \/\/www.rjmprogramming.com.au\/ITblog\/&#8217; + sixhundred + &#8216;\/&#8217; + fourhundred + &#8216;\/ ), hashtag delimited from an optional imagery refresh rate in seconds [&#8216; + ten + &#8216;], hashtag delimited from an optional Text element background image (or type Lorem Picsum), hashtag delimited from optional Text wording [&#8216; + tcont + &#8216;] we will assume involves a space.<font size=1>&#8216;, &#8221;);<\/font>\n<\/p><\/blockquote>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html-GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html-GETME\">interactively_change_background_image_on_scroll.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interactively_change_background_image_on_scroll.html\">web application<\/a> you can <a href='#myicbios'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-user-settings-tutorial\/'>Interactively Change Background Image on Scroll User Settings Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icbist'>Previous relevant <a target=_blank title='Interactively Change Background Image on Scroll Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-tutorial\/'>Interactively Change Background Image on Scroll Tutorial<\/a> is shown below.<\/p>\n<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 id=myicbios 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<hr>\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='#d60876' onclick='var dv=document.getElementById(\"d60876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text-shadow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60876' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are a regular reader, you&#8217;ll know with the web applications presented here, we usually try to allow the user to control &#8230; how they function &#8230; and\/or sometimes &#8230; how they look &#8230; in the ephemeral &#8220;this session&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/interactively-change-background-image-on-scroll-user-settings-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":[4,12,14,37],"tags":[126,127,2442,281,318,342,400,3037,573,576,590,599,1525,2469,652,673,3982,4490,860,1705,876,894,1988,997,1917,1107,1254,2567,1319,3048,1418,2257],"class_list":["post-60876","post","type-post","status-publish","format-standard","hentry","category-animation","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-opacity","tag-overlay","tag-position","tag-programming","tag-scroll","tag-scrolling","tag-text","tag-text-shadow","tag-tutorial","tag-w3schools","tag-webpage","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60876"}],"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=60876"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60876\/revisions"}],"predecessor-version":[{"id":60878,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60876\/revisions\/60878"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}