Another tire kicker up to the line - interactive tutorial

[weegillis]

This was originally created for the tutorial contest but got too complicated and lengthy and was very dependent on the web browser support that a DOC file can't give it. Behind the tutorial is an interface that will itself become a tutorial as a companion to this one. Of course, it's put up here so we can put some polish on it, hopefully. Input is welcome and desired, for learning purposes, not for show.

Animated Sidebar Navigation using CSS

[weegillis]

The interactive bit is the style sheet switching. In each section the user can revert to the minimum styles that would be in place at that point. It's a tiny bit out of synch at first, but gets in step by the third section.

The window.history object is manipulated to rewrite query strings in the location bar, though I haven't worked out how to engage or restore the back button yet. A Reload button is included any time the main style sheet is not in effect. It recalls the native page.

The 'Restore Style' button will only show in the section that called up a style sheet switch. It reloads the page and restores the current section in its viewer window. The section navigation works with all style sheets, so it is possible to navigate through the entire lesson in any one of the seven that are present. (Well, six, actually. The seventh is identical to the first except in name.) It was either switch the style sheets or have fly-out screen shots. I went with the former as it is programmatic and requires only plain text downloads. And it's real, right in the page itself.

Browsers that do not support "position: fixed;" will scroll the navigation. Figures have been left full width to reduce wrapping of code. Opacity is set to .66 on the right navigation so we can see that text is hidden. Unfortunately, this has the effect of softening link text. Any help to harden the text would be welcome. Thanks in advance.

The content of the page is irrelevant to this posting. I'm mostly interested in learning how to construct interactive interfaces using HTML5 and CSS3, and of course JavaScript. Writing a tutorial about coding is one thing, but presenting it as content while writing about it is another, entirely. It's the old, "You're soaking in it, Madge" scenario. This is how HTML, CSS and JavaScript should be taught, imho. See and feel it in action, and view the source code. It's how I learned, and how many have and continue to learn.

There are 10 kinds of people that understand computing. Those who do, and those who don't. If you're born on X-mas, a computer geek would say you were born on Hallow e'en. If out of the box is the only way a person can mount a site, or is interested in, then this is not a thread for that person. They are not web creators. The purpose of this thread is to create. We're here to kick some tires!

There is probably a way to replace all the existing, outdated code with jQuery, which is really where I'd like to take this. Been hoping someone would pipe in with some suggestions...

[AciveLite2k]

That's a neat effect! Thanks for the tutorial!

[weegillis]

That's a neat effect! Thanks for the tutorial!

As stated, the tutorial is not the topic of this thread. The interface is.

[weegillis]

Playing with the interface so much I neglected to test the ASN effect in Opera. Darn. Not so pleasant a result in version 11.51 Windows XP or Windows 7 in the form of strange behavior with the SPAN. First it appears lower in the background but zoomed about 1000%, then it slowly shrinks down in scale with a couple more steps to the finished overlay, each time flashing into and out of view until coming to rest. The overlay does not disappear on mouse out, and stays even while scrolling. It disappears on any click to the page, though. Immaterial to the real problem, I suspect.

It's not the first time I've seen strange behavior in Opera, but this is right off the scale (pun intended). Can anyone point to the idiosyncrasy in Opera's rendering of CSS3 that is causing this behavior?

Negative left indent is applied to the static state text node in the span. The span is shaped to match the image view port then transitioned to the new shape on mouse over. Position may have a role in this behavior as there is some juggling, but it doesn't seem to cause problems in other browsers on XP or Windows 7.