{"id":54709,"date":"2022-01-24T03:01:24","date_gmt":"2022-01-23T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54709"},"modified":"2022-01-23T12:04:13","modified_gmt":"2022-01-23T02:04:13","slug":"element-object-scrolling-word-break-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/element-object-scrolling-word-break-tutorial\/","title":{"rendered":"Element Object Scrolling Word Break Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Element Object Scrolling Word Break Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view_word_break.gif\" title=\"Element Object Scrolling Word Break Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Element Object Scrolling Word Break Tutorial<\/p><\/div>\n<p>We continue on the CSS styling themes of yesterday&#8217;s <a title='Element Object Scrolling CSS Styling Tutorial' href='#eoscssst'>Element Object Scrolling CSS Styling Tutorial<\/a> because our <a style=text-decoration:underline;cursor:pointer; onclick=\"document.getElementById('newdivif').innerHTML=String.fromCharCode(60) + 'br' + String.fromCharCode(62) + String.fromCharCode(60) + document.getElementById('newdivif').title + String.fromCharCode(62) + String.fromCharCode(60) + '\/iframe' + String.fromCharCode(62);\">&#8220;try below&#8221;<\/a> <span id=newdivif title='iframe style=width:100%;height:800px; src=\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html'><\/span> HTML iframe incarnation of the use of our &#8220;Element Object (Programmatic) Scrolling&#8221; web application got us thinking about quite a few styling issues, such as &#8230;<\/p>\n<ul>\n<li>&#8220;off to the right&#8221; (initially disappearing) word break solutions &#8230; combination of &#8230;\n<ol>\n<li>CSS &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\nh1 {   \/* Thanks to <a target=_blank title='https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/' href='https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/'>https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/<\/a> *\/<br \/>\n  overflow-wrap: break-word;<br \/>\n  word-wrap: break-word;<br \/>\n  hyphens: auto;<br \/>\n  overflow-wrap: break-word;<br \/>\n  word-wrap: break-word;<br \/>\n<br \/>\n  -ms-word-break: break-all;<br \/>\n  \/* This is the dangerous one in WebKit, as it breaks things wherever *\/<br \/>\n  word-break: break-all;<br \/>\n  \/* Instead use this non-standard one: *\/<br \/>\n  word-break: break-word;<br \/>\n<br \/>\n  \/* Adds a hyphen where the word breaks, if supported (No Blink) *\/<br \/>\n  -ms-hyphens: auto;<br \/>\n  -moz-hyphens: auto;<br \/>\n  -webkit-hyphens: auto;<br \/>\n  hyphens: auto;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<li>HTML element encouragement (regarding places to word break, for those smaller device width scenarios) &#8230;<br \/>\n<code><br \/>\n&lt;!--h1 style=\"position:fixed;top:0px;left:62%;max-width:38%;\"&gt;Element&lt;sub&gt;.&lt;\/sub&gt; scrollInto&lt;sub style=\"overflow-x:hidden;max-width:1px;width:1px;color:transparent;margin-left:-10px;\"&gt; &lt;\/sub&gt;View Find a Lost Element&lt;\/h1--&gt;<br \/>\n&lt;h1 style=\"position:fixed;top:0px;left:62%;max-width:38%;\"&gt;Element.&lt;sub style=\"overflow-x:hidden;max-width:1px;width:1px;color:transparent;margin-left:-4px;\"&gt; &lt;\/sub&gt;scrollIntoView Find a Lost Element&lt;\/h1&gt;<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<li>&#8220;best we can manage&#8221; getting &#8220;select&#8221; element &#8220;option&#8221; (at least the one selected) to have their text centered (as the table cells do) &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\ntd {<br \/>\n  text-align: center;<br \/>\n}<br \/>\n<br \/>\nselect {  \/* Thanks to <a target=_blank title='https:\/\/www.jotform.com\/answers\/983388-how-can-i-center-align-the-options-in-a-drop-down-field' href='https:\/\/www.jotform.com\/answers\/983388-how-can-i-center-align-the-options-in-a-drop-down-field'>https:\/\/www.jotform.com\/answers\/983388-how-can-i-center-align-the-options-in-a-drop-down-field<\/a> *\/<br \/>\n   text-align-last: center;<br \/>\n   text-align: center;<br \/>\n   -ms-text-align-last: center;<br \/>\n   -moz-text-align-last: center;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<li>improving on exorbitant amount of white space between input type=number (id=&#8221;isiv&#8221;) and the select dropdown (id=&#8221;selsiv&#8221;) for the laptop wider device width scenarios (via document.body onload event (and redraw logic) Javascript function) &#8230;<br \/>\n <code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  function posttable() {<br \/>\n    var fifteen=15.0;<br \/>\n    var isivwisfifteen=eval('' + document.getElementById('isiv').getBoundingClientRect().width);<br \/>\n    var isivr=eval('' + document.getElementById('isiv').getBoundingClientRect().right);<br \/>\n    var isivl=eval('' + document.getElementById('isiv').getBoundingClientRect().left);<br \/>\n    var selsivl=eval('' + document.getElementById('selsiv').getBoundingClientRect().left);<br \/>\n    var lastisr=isivr;<br \/>\n    lastisr++;<br \/>\n <br \/> <br \/>\n    while (eval(selsivl - isivr) &gt; eval(isivwisfifteen \/ 10) && lastisr != isivr) {<br \/>\n      fifteen+=0.1;<br \/>\n      isivwisfifteen+=10;<br \/>\n      lastisr=isivr;<br \/>\n      document.getElementById('isiv').style.width='' + isivwisfifteen + 'px';<br \/>\n      isivr=eval('' + document.getElementById('isiv').getBoundingClientRect().right);<br \/>\n     }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>&#8220;off to the right&#8221; (initially cluttering) vertical text positioning solutions tweaked inline CSS style &#8220;top&#8221; properties (which were increased) of a few elements <font color=blue>such as for<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;h3 style=\"position:fixed;top:<font color=blue>260px<\/font>;left:62%;max-width:38%;\"&gt;RJM Programming - January, 2022&lt;\/h3&gt;<br \/>\n<\/code>\n<\/ul>\n<p> &#8230; to make the whole presentation that bit more presentable!<\/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\/element-object-scrolling-word-break-tutorial\/'>Element Object Scrolling Word Break Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eoscssst'>Previous relevant <a target=_blank title='Element Object Scrolling CSS Styling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/element-object-scrolling-css-styling-tutorial\/'>Element Object Scrolling CSS Styling Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Element Object Scrolling CSS Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view_css.jpg\" title=\"Element Object Scrolling CSS Styling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Element Object Scrolling CSS Styling Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Element Object Scrolling Primer Tutorial' href='#eospt'>Element Object Scrolling Primer Tutorial<\/a>&#8216;s &#8220;first draft&#8221; web application was functional as a &#8220;proof of concept&#8221; way to show how [Element].<a target=_blank title='Element.scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp'>scrollIntoView<\/a>() could work practically.<\/p>\n<p>To help out a web application that is just &#8220;functional&#8221; and improve <i>the way the web application works<\/i> <font size=1>(okay &#8230; you twisted my arm &#8230; the <i>&#8220;user experience&#8221;)<\/i>)<\/font> you can improve its styling, perhaps via &#8230;<\/p>\n<ul>\n<li>internal CSS (in some HTML codefile) within &#8220;style&#8221; element(s) &#8230; today&#8217;s way &#8230; or &#8230;<\/li>\n<li>external CSS (in an external CSS codefile called by some HTML codefile) via a &#8220;link&#8221; call &#8230; or &#8230;<\/li>\n<li>internal CSS (in some HTML codefile) wia element &#8220;style&#8221; attributing &#8230; or &#8230;<\/li>\n<li>internal CSS (in some HTML codefile) via Javascript DOM &#8220;style&#8221; coding &#8230; or &#8230;<\/li>\n<li>internal CSS (in some HTML codefile) via jQuery &#8220;.CSS&#8221; coding<\/li>\n<\/ul>\n<p>Basically CSS here, and the &#8220;way in&#8221; is to understand <a target=_blank title='CSS selectors information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css_selectors.asp'>CSS selectors<\/a>, in all their glory and almost infinite variety.  And yet, for all that, we like a CSS simple approach, for the most part, fitting into our &#8220;mind paradigm&#8221; &#8230;<\/p>\n<ul>\n<li>if it&#8217;s CSS styling you want for HTML element(s) introduce a &#8220;class&#8221; (in CSS selector land &#8220;.class&#8221;) attribute into the HTML element &#8230; whereas &#8230;<\/li>\n<li>if it&#8217;s action items you want for HTML element(s) introduce an &#8220;id&#8221; (in CSS selector land &#8220;#id&#8221;) attribute into the HTML element (to suit Javascript DOM document.getElementById(&#8220;id&#8221;) usage)<\/li>\n<\/ul>\n<p>And so, to style the table cell we are interested in regarding [Element].<a target=_blank title='Element.scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp'>scrollIntoView<\/a>() <font color=blue>we introduced the CSS<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\ntd {<br \/>\n  text-align: center;<br \/>\n}<br \/>\n<br \/>\n<font color=blue>.thecur {<br \/>\n  border: 3px dotted red;<br \/>\n}<\/font><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; into <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html-GETME\" title='scroll_into_view.html'>the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html-GETME\" title='scroll_into_view.html'>scroll_into_view.html<\/a> HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html\" title=\"Click picture\">live run<a\/>, in order to make the functionality clearer to the user.<\/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\/element-object-scrolling-css-styling-tutorial\/'>Element Object Scrolling CSS Styling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eospt'>Previous relevant <a target=_blank title='Element Object Scrolling Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/element-object-scrolling-primer-tutorial\/'>Element Object Scrolling Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Element Object Scrolling Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.jpg\" title=\"Element Object Scrolling Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Element Object Scrolling Primer Tutorial<\/p><\/div>\n<p>If you are a programmer of web applications, are you of the view that the interesting &#8220;object&#8221; regarding the topic of programmatic &#8220;scrolling&#8221; is the &#8230;<\/p>\n<ul>\n<li>window object &#8230; or the &#8230;<\/li>\n<li>document object &#8230; or the &#8230;<\/li>\n<li>element object<\/li>\n<\/ul>\n<p>?  Well, for the most part, we think &#8220;element object&#8221;, because we are normally wanting a particular &#8220;display thing&#8221; be visible on the &#8220;webpage screen&#8221; at a particular point of time.<\/p>\n<p>Hashtag navigation such as involving some Javascript codeline such as &#8230;<\/p>\n<p><code><br \/>\n location.href='#myelement';<br \/>\n<\/code><\/p>\n<p> &#8230; can satisfy our &#8220;majority wish&#8221; above.  But that strategy has an implication.  We stay on the same webpage, but <i>location.hash<\/i> changes.  No big deal most of the time, probably, but you can have Javascript logic that pivots according to <i>location.hash<\/i>, as we can recall, personally, quite a bit, actually.<\/p>\n<p>Is there an &#8220;element object&#8221; based scrolling alternative?  Yes, take a look at Javascript &#8220;Element object&#8221; method [Element].<a target=_blank title='Element.scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp'>scrollIntoView<\/a>() as an approach to simulating &#8220;hashtag navigation&#8221; without the affect on <i>location.hash<\/i>, an equivalent to above going like &#8230;<\/p>\n<p><code><br \/>\n document.getElementById('myelement').scrollIntoView();<br \/>\n<\/code><\/p>\n<p>We&#8217;ve written a &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html_GETME\" title='scroll_into_view.html'>scroll_into_view.html<\/a> HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html\" title=\"Click picture\">live run<a\/>, or <a style=text-decoration:underline;cursor:pointer; onclick=\"document.getElementById('divif').innerHTML=String.fromCharCode(60) + document.getElementById('divif').title + String.fromCharCode(62) + String.fromCharCode(60) + '\/iframe' + String.fromCharCode(62);\">try below<\/a>, for you to try out this great Javascript client-side, but not &#8220;window object&#8221; based, functionality.<\/p>\n<div id=divif title='iframe style=width:100%;height:800px; src=\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html'><\/div>\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='#d54690' onclick='var dv=document.getElementById(\"d54690\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54690' 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='#d54702' onclick='var dv=document.getElementById(\"d54702\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54702' 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='#d54709' onclick='var dv=document.getElementById(\"d54709\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/word-break\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54709' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We continue on the CSS styling themes of yesterday&#8217;s Element Object Scrolling CSS Styling Tutorial because our &#8220;try below&#8221; HTML iframe incarnation of the use of our &#8220;Element Object (Programmatic) Scrolling&#8221; web application got us thinking about quite a few &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/element-object-scrolling-word-break-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":[1580,210,281,354,1549,576,2846,652,849,2561,3897,997,1986,1075,1917,1107,3896,1953,1209,1212,1238,1319,1425,2962],"class_list":["post-54709","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cell","tag-class","tag-css","tag-dom","tag-element","tag-html","tag-id","tag-javascript","tag-object","tag-overflow","tag-overflow-wrap","tag-programming","tag-proof-of-concept","tag-row","tag-scroll","tag-scrolling","tag-scrollintoview","tag-selector","tag-style","tag-styling","tag-table","tag-tutorial","tag-whitespace","tag-word-break"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54709"}],"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=54709"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54709\/revisions"}],"predecessor-version":[{"id":54719,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54709\/revisions\/54719"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=54709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=54709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=54709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}