Thursday, August 17, 2006

Javascript Triggers


The front end of a website consists of three layers. XHTML forms the structural layer, which contains structural, semantic markup and the content of the site. To this layer you can add a presentation layer (CSS) and a behavior layer (JavaScript) to make your website more beautiful and user-friendly. These three layers should remain strictly separate. For instance, it should be possible to rewrite the entire presentation layer without touching either the structural or the behavior layer.
        Despite this strict separation, the presentation and behavior layers need instructions from the structural layer. They must know where to add that touch of style, when to initiate that smooth bit of behavior. They need triggers.
        CSS triggers are well known. The class and id attributes allow you to fully control the presentation of your websites. Although it is possible to work without these triggers, by putting the instructions in inline style attributes, this method of coding is deprecated. If you want to redefine your site’s presentation while using them you’re forced to change the XHTML structural layer, too; their presence violates the separation of presentation and structure. Read more on Javascript Triggers at this post

Tags: , , , , ,


Wednesday, August 16, 2006

Animated Page Scrolling with Javascript


It might seem like nothing but eye candy, but it can be a great way to lead a user around a page while still giving them some context as to where they are. Clicking on an anchor link that jumps straight to another part of the page can be jarring and disorienting. Animating the scroll shows clearly where they came from and how to get back there. It's also a great example of how to create private methods and members in Javascript objects. See the code in action on the example page.


The fundamental idea is simple: using window.scrollTo(x, y), it's possible to jump the scroll bar to any point on the page. If we were to jump a couple of pixels at a time, over 2 or 3 seconds, it would look like the window was being scrolled through. Couple that with some functions that find all links to an anchor on a page (#home, #end, etc.) and attach an onclick event to them, and you have a flashy effect that degrades gracefully on browsers that don't have Javascript enabled. Non-JS users still get the normal anchor links, and everyone else gets the scrolling animation. Read more


Tags: , , ,