HTML/Javascript/CSS Reveal Top Left to Bottom Right Tutorial
We need to revisit the “Reveal” series of blog postings, and elaborate a bit. The reason is that something we were doing yesterday with presenting the top left “subset” picture (of the main tutorial picture at the top) you can see at Trip Mobile Device Usage Clock Tutorial reminded us of the powerful HTML div element CSS overflow: hidden; style property’s usefulness. Hence the reference to a “Reveal” tutorial of relevance below called HTML/Javascript/CSS Reveal Top to Bottom Primer Tutorial as shown below, which is built upon, with its top to bottom revealing talents, to present, today, a reveal from top to bottom and left to right. You will find with writing this code that all of the previous tutorial’s …
- CSS overflow: hidden; style property
- Encasing working visible HTML elements within div element for ease of:
- positioning
- scrolling, or not
- visibility control
- Javascript setInterval and clearInterval timer functionality
- Javascript DOM methods to dynamically change HTML (over time)
- HTML/CSS body element background URL (with fallback background colour) and the Javascript control of its fallback to just the background colour and that it is Clickable
… remain relevant, and some additional ideas as below …
- There were a lot of those old “sinful” align=’center’ usage we talked about at W3C XHTML Nu Checker Validation Primer Tutorial going on which we diligently changed to style=” width:100%;text-align:center; “ for most HTML elements, in order to preserve horizontal centering, which meant that …
- Window.getComputedStyle Javascript functionality that is needed to combine with …
- CSS margin-left style property
- Events onload helps us out initially and onresize helps us out should the window size change to contribute to the document.body width calculation required to derive a good margin-left value to use
… are needed to make the whole thing work.
We hope this is food for thought for you, and we’ll leave you with …
- Live Run
- HTML programming source code you could call reveal_lefttoright_toptobottom.html
- How we got there from the top to bottom logic of tutorial below can be seen here
Previous relevant HTML/Javascript/CSS Reveal Top to Bottom Primer Tutorial is shown below.
HTML/Javascript/CSS Reveal Top to Bottom Primer Tutorial
Welcome to a new discussion regarding HTML, Javascript and CSS on the theme of “reveal”. We’ll be doing several postings on this theme, and today we have the first.
Do you often wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise?
No?
Do you sometimes wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise?
Still no, huh? (Aside: two can play this little game)
Do you occasionally wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise … OR …
will allow those who have never had this thought in their life on Earth?
No again, huh? (Aside: two planets can play this puerile little game!)
Do you ever wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise … OR …
will allow those who have never had this thought in their life on Earth, nor Mars?
Non? Nicht? Good nicht! (chortle, chortle)
Well, that’s fixed their little red wagon.
Here is a tutorial that “reveals” a surprise from top to bottom using HTML, Javascript and CSS, featuring:
- CSS overflow: hidden; style property
- Encasing working visible HTML elements within div element for ease of:
- positioning
- scrolling, or not
- visibility control
- Javascript setInterval and clearInterval timer functionality
- Javascript DOM methods to dynamically change HTML (over time)
- HTML/CSS body element background URL (with fallback background colour) and the Javascript control of its fallback to just the background colour and that it is Clickable
So here is today’s tutorial’s live run, and here is the HTML programming source code you could call reveal_fromtoptobottom.html which called on the content of this tutorial.
Chow for now, brown cow (she’s always on(line), you know … but is anything sinking in?! … I haven’t been able to moo respectfully in public after 63.5 lessons?! … she still owes me that half lesson when she didn’t get up in time for milking).
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
