{"id":46173,"date":"2019-08-27T03:01:22","date_gmt":"2019-08-26T17:01:22","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46173"},"modified":"2019-08-26T20:22:03","modified_gmt":"2019-08-26T10:22:03","slug":"fixed-sticky-header-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fixed-sticky-header-primer-tutorial\/","title":{"rendered":"Fixed Sticky Header Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Fixed Sticky Header Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.jpg\" title=\"Fixed Sticky Header Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Fixed Sticky Header Primer Tutorial<\/p><\/div>\n<p>Just like with the <a target=_blank title='How To series from W3schools, thanks' href='\/\/www.w3schools.com\/howto\/'>W3schools How To series<\/a> inspired <a title='HTML and Javascript and CSS Survey Levelling Tutorial' href='#htmljcssslt'>HTML and Javascript and CSS Survey Levelling Tutorial<\/a> we have another <a target=_blank title='W3schools, thanks' href='\/\/www.w3schools.com\/'>W3schools<\/a> inspired web application idea called <a target=_blank title='' href='https:\/\/\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_js_sticky_header'>&#8220;Sticky Header&#8221;<\/a>.<\/p>\n<p>To quote <a target=_blank title='W3schools sticky header how to' href='https:\/\/www.w3schools.com\/howto\/howto_js_sticky_header.asp'>W3schools<\/a> regarding the design aspects to the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.html_GETME\" title=\"fixed_top.html\">fixed_top.html<\/a> &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.html\"title=\"Click picture\">web application<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/howto\/howto_js_sticky_header.asp'><p>\nOn Scroll Sticky Header<br \/>\nThe header will stick to the top when you reach its scroll position.<br \/>\nScroll back up to remove the sticky effect.\n<\/p><\/blockquote>\n<p>Which takes us to what we wanted to try as an inhouse addition to functionality.  We like emojis, as &#8220;text meets button design&#8221;.  Hence, we also like the &#8220;text&#8221; emoji being like an &#8220;a&#8221; link &#8220;button&#8221;, for two big<font size=1>gish<\/font> reasons &#8230;<\/p>\n<ul>\n<li>emoji buttons save space<\/li>\n<li>emoji buttons can look like images that can attract user attention, and be like an Internationizational improvement to your web application, given some careful consideration<\/li>\n<\/ul>\n<p> &#8230; that lead us to want to have the &#8220;Sticky Header&#8221; contain an &#8220;emoji menu&#8221; of &#8220;emoji buttons&#8221;, the &#8220;onclick&#8221; events of which show content below the &#8220;Sticky Header&#8221; in a one row table that pushes the latest content to the left of that row (so that our hashtagging logic will still see the emojis along with the latest selected content), yet allow an intrepid user venture right to &#8220;uncontrolled lands of functionality&#8221; should they wish.  <font size=1>We&#8217;re sticking left &#8230; chortle, chortle.<\/font><\/p>\n<hr>\n<p id='htmljcssslt'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Levelling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-levelling-tutorial\/'>HTML and Javascript and CSS Survey Levelling 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\/parallax_example.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Levelling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.jpg\" title=\"HTML and Javascript and CSS Survey Levelling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Levelling Tutorial<\/p><\/div>\n<p>With the &#8220;terrestrial&#8221; side to Land Surveying (ie. that of the small distances kind), two &#8220;get out there and do it&#8221; skills spring to mind, those being &#8230;<\/p>\n<ul>\n<li>performing a <i>traverse<\/i> via the use of a <i>theodolite<\/i> (or &#8220;total station&#8221;) (as the web application works the mathematics of, off the field book, with the previous <a title='HTML and Javascript and CSS Survey Traverse Tutorial' href='#htmljcssstt'>HTML and Javascript and CSS Survey Traverse Tutorial<\/a>) working out the (&#8220;X&#8221;,&#8221;Y&#8221;) of 2D &#8220;life&#8221; &#8230; and today, we add to that with &#8230;<\/li>\n<li>performing a <i>levelling run<\/i> via the use of a <i>level<\/i> (or &#8220;total station&#8221;) &#8230;<\/li>\n<\/ul>\n<p> &#8230; and with today&#8217;s web application we simulate, to some degree, minus &#8220;how to level a level&#8221;, looking through the &#8220;level&#8221; viewer towards a &#8220;surveying staff&#8221; (held level and straight) on a point of something you want to know the elevation (or (3D &#8220;life&#8221;) &#8220;Z&#8221;) of in terrestrial terms, relative to known elevations you will probably want to start pointing at (the &#8220;surveying staff&#8221; being on) with your first (often a known &#8220;datum&#8221;) &#8230;<\/p>\n<ul>\n<li>Backsight &#8230; then &#8230;<\/li>\n<li>(however many Inter Sights followed by a) Foresight (and then back to Backsight, as necessary)<\/li>\n<\/ul>\n<p> &#8230; series of measurements (or &#8220;reading&#8221;) to derive &#8220;reduced levels&#8221; for each point the &#8220;surveying staff&#8221; visits.  This, in most practice, involves alternately leapfrogging (each other, at different times) &#8230;<\/p>\n<ul>\n<li>Land Surveyor recording and levelling the &#8220;level&#8221; &#8230; and a &#8230;<\/li>\n<li>Chainperson levelling and straightening the &#8220;surveying staff&#8221;<\/li>\n<\/ul>\n<p> &#8230; the &#8220;surveying staff&#8221; we simulate in our web application (somewhat) thanks to <a target=_blank title='Laser Survey Equipment' href='\/\/www.lasersurveyingequipment.com.au\/'>Cody<\/a>.<\/p>\n<p>That&#8217;s the &#8220;what&#8221; of the web application, but what about the &#8220;how&#8221; (let alone the <a target=_blank title=\"?\" href='https:\/\/www.youtube.com\/watch?v=RatKhtboq2E'>who<\/a>)?  Here, we thank the great <a target=_blank title='Parallax information from W3schools, thanks' href='\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_parallax'>W3schools parallax ideas<\/a>.<\/p>\n<p>The &#8220;central CSS smart&#8221; of these parallax ideas is the idea of &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  \/* Create the parallax scrolling effect *\/<br \/>\n  background-attachment: fixed;<br \/>\n  background-position: center;<br \/>\n  background-repeat: no-repeat;<br \/>\n  background-size: contain;<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>So take a look at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.html_GETME\" title=\"parallax_example.html\">parallax_example.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.html\" title=\"Click picture\">live run<\/a> link to see what we mean.<\/p>\n<hr>\n<p id='htmljcssstt'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-tutorial\/'>HTML and Javascript and CSS Survey Traverse 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse Tutorial<\/p><\/div>\n<p>Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts.   The tutorial subject matter is a webpage to perform Survey Traverse calculations.   A Survey Traverse is:<\/p>\n<blockquote><p>Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:<\/p>\n<p>    Less reconnaissance and organization needed;<br \/>\n    While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;<br \/>\n    Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;<br \/>\n    Traverse networks are free of the strength of figure considerations that happen in triangular systems;<br \/>\n    Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.<\/p>\n<p>The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]<\/p><\/blockquote>\n<p>Let&#8217;s see some simple <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/'>HTML<\/a> in action in a tutorial &#8230;<\/p>\n<p>Link to HTML &#8220;spiritual home&#8221; &#8230; <a target=_blank title='W3Schools' href='http:\/\/www.w3schools.com\/html\/'>at W3Schools<\/a> has many tutorials.<br \/>\nLink to Survey Traverse live run &#8230; <a target=_blank title='Survey Traverse live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html'>here<\/a>.<br \/>\nLink to Survey Traverse live run (additional Google Line Chart functionality)  <a target=_blank title='Survey Traverse live run with Google Line Chart' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php'>here<\/a>.<br \/>\nLink to Survey Traverse information &#8230; <a target=_blank title='Survey Traverse information' href='http:\/\/en.wikipedia.org\/wiki\/Traverse_(surveying)'>from Wikipedia from which quote above comes<\/a>.<br \/>\nLink to some downloadable HTML code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html_GETME' title='Download me'>SurveyTraverse.html<\/a> which packages up a lot of Javascript and a little bit of CSS &#8230; or JaCvasScriptS &#8230; not sure whether this would ever catch on.<br \/>\nLink to some downloadable PHP programming code (additional Google Line Chart functionality) &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php_GETME' title='Download me'>SurveyTraverse.php<\/a>\n<\/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='#d1271' onclick='var dv=document.getElementById(\"d1271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d1271' 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='#d46062' onclick='var dv=document.getElementById(\"d46062\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46062' 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='#d46173' onclick='var dv=document.getElementById(\"d46173\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/menu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46173' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Just like with the W3schools How To series inspired HTML and Javascript and CSS Survey Levelling Tutorial we have another W3schools inspired web application idea called &#8220;Sticky Header&#8221;. To quote W3schools regarding the design aspects to the fixed_top.html &#8220;proof of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/fixed-sticky-header-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":[281,385,3037,1996,576,652,770,997,1198,1319],"class_list":["post-46173","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-css","tag-emoji","tag-fixed","tag-header","tag-html","tag-javascript","tag-menu","tag-programming","tag-sticky","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46173"}],"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=46173"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46173\/revisions"}],"predecessor-version":[{"id":46178,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46173\/revisions\/46178"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}