Element Object Scrolling CSS Styling Tutorial
Yesterday’s Element Object Scrolling Primer Tutorial‘s “first draft” web application was functional as a “proof of concept” way to show how [Element].scrollIntoView() could work practically.
To help out a web application that is just “functional” and improve the way the web application works (okay … you twisted my arm … the “user experience”)) you can improve its styling, perhaps via …
- internal CSS (in some HTML codefile) within “style” element(s) … today’s way … or …
- external CSS (in an external CSS codefile called by some HTML codefile) via a “link” call … or …
- internal CSS (in some HTML codefile) wia element “style” attributing … or …
- internal CSS (in some HTML codefile) via Javascript DOM “style” coding … or …
- internal CSS (in some HTML codefile) via jQuery “.CSS” coding
Basically CSS here, and the “way in” is to understand CSS selectors, 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 “mind paradigm” …
- if it’s CSS styling you want for HTML element(s) introduce a “class” (in CSS selector land “.class”) attribute into the HTML element … whereas …
- if it’s action items you want for HTML element(s) introduce an “id” (in CSS selector land “#id”) attribute into the HTML element (to suit Javascript DOM document.getElementById(“id”) usage)
And so, to style the table cell we are interested in regarding [Element].scrollIntoView() we introduced the CSS …
<style>
td {
text-align: center;
}
.thecur {
border: 3px dotted red;
}
</style>
… into the changed scroll_into_view.html HTML/Javascript live run, in order to make the functionality clearer to the user.
Previous relevant Element Object Scrolling Primer Tutorial is shown below.
Element Object Scrolling Primer Tutorial
If you are a programmer of web applications, are you of the view that the interesting “object” regarding the topic of programmatic “scrolling” is the …
- window object … or the …
- document object … or the …
- element object
? Well, for the most part, we think “element object”, because we are normally wanting a particular “display thing” be visible on the “webpage screen” at a particular point of time.
Hashtag navigation such as involving some Javascript codeline such as …
location.href='#myelement';
… can satisfy our “majority wish” above. But that strategy has an implication. We stay on the same webpage, but location.hash changes. No big deal most of the time, probably, but you can have Javascript logic that pivots according to location.hash, as we can recall, personally, quite a bit, actually.
Is there an “element object” based scrolling alternative? Yes, take a look at Javascript “Element object” method [Element].scrollIntoView() as an approach to simulating “hashtag navigation” without the affect on location.hash, an equivalent to above going like …
document.getElementById('myelement').scrollIntoView();
We’ve written a “proof of concept” scroll_into_view.html HTML/Javascript live run, or try below, for you to try out this great Javascript client-side, but not “window object” based, functionality.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
