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 โSticky Headerโ.
To quote W3schools regarding the design aspects to the fixed_tophtml โproof of conceptโ web
application โฆ
On Scroll Sticky Header
The header will stick to the top when you reach its scroll position.
Scroll back up to remove the sticky effect.
Which takes us to what we wanted to try as an inhouse addition to functionality. We like emojis, as โtext meets button designโ. Hence, we also like the โtextโ emoji being like an โaโ link โbuttonโ, for two biggish reasons โฆ
- emoji buttons save space
- 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
โฆ that lead us to want to have the โSticky Headerโ contain an โemoji menuโ of โemoji buttonsโ, the โonclickโ events of which show content below the โSticky Headerโ 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 โuncontrolled lands of functionalityโ should they wish. Weโre sticking left โฆ chortle, chortle.
Previous relevant HTML and Javascript and CSS Survey Levelling Tutorial is shown below.
With the โterrestrialโ side to Land Surveying (ie. that of the small distances kind), two โget out there and do itโ skills spring to mind, those being โฆ
- performing a traverse via the use of a theodolite (or โtotal stationโ) (as the web application works the mathematics of, off the field book, with the previous HTML and Javascript and CSS Survey Traverse Tutorial) working out the (โXโ,โYโ) of 2D โlifeโ โฆ and today, we add to that with โฆ
- performing a levelling run via the use of a level (or โtotal stationโ) โฆ
โฆ and with todayโs web application we simulate, to some degree, minus โhow to level a levelโ, looking through the โlevelโ viewer towards a โsurveying staffโ (held level and straight) on a point of something you want to know the elevation (or (3D โlifeโ) โZโ) of in terrestrial terms, relative to known elevations you will probably want to start pointing at (the โsurveying staffโ being on) with your first (often a known โdatumโ) โฆ
- Backsight โฆ then โฆ
- (however many Inter Sights followed by a) Foresight (and then back to Backsight, as necessary)
โฆ series of measurements (or โreadingโ) to derive โreduced levelsโ for each point the โsurveying staffโ visits. This, in most practice, involves alternately leapfrogging (each other, at different times) โฆ
- Land Surveyor recording and levelling the โlevelโ โฆ and a โฆ
- Chainperson levelling and straightening the โsurveying staffโ
โฆ the โsurveying staffโ we simulate in our web application (somewhat) thanks to Cody.
Thatโs the โwhatโ of the web application, but what about the โhowโ (let alone the who)? Here, we thank the great W3schools parallax ideas.
The โcentral CSS smartโ of these parallax ideas is the idea of โฆ
<style>
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
</style>
So take a look at parallax_examplehtmlโs live
run link to see what we mean.
Previous relevant HTML and Javascript and CSS Survey Traverse Tutorial is shown below.
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:
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:
Less reconnaissance and organization needed;
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;
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;
Traverse networks are free of the strength of figure considerations that happen in triangular systems;
Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]
Letโs see some simple HTML in action in a tutorial โฆ
Link to HTML โspiritual homeโ โฆ at W3Schools has many tutorials.
Link to Survey Traverse live run โฆ here.
Link to Survey Traverse live run (additional Google Line Chart functionality) here.
Link to Survey Traverse information โฆ from Wikipedia from which quote above comes.
Link to some downloadable HTML code โฆ rename to SurveyTraversehtml which packages up a lot of Javascript and a little bit of CSS โฆ or JaCvasScriptS โฆ not sure whether this would ever catch on.
Link to some downloadable PHP programming code (additional Google Line Chart functionality) โฆ rename to SurveyTraversephp
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.