Unobtrusive Javascript Unobtrusive Javascript Javascript is a wonderful tool to enhance the usability of web sites. It is the extra layer above the mark-up "what is this text" and the CSS "how should it be displayed". Javascript adds a new dimension, the "how should this element behave". Get the Coursebook This course is now also available in printable format. Rewritten and amended course material Syntax highlighted code examples Two extra chapters: DOM accidents - explaining accessibility problems to avoid when scripting the DOM Outdated JavaScript techniques - why not to use and how to replace them with more modern techniques You can download a sample chapter (120KB, PDF format) or buy the course as a book or an ebook at lulu.com. On the following pages we will discuss and see how we can use Javascript, but still maintain accessibility. Anyways, let's cut to the chase. Thanks for Hosting Hosting by media temple Get my book! Interact Donations welcome. Comment on the Blog Other Versions Similar Content Changelog
problem with easy mod rewrite That won't work, for a couple of reasons. First, the flags syntax is wrong -- It should be [R=301,L], and second, your other "site1" rule will rewrite the request right back to /site1 and the result will be an "infinite" loop -- actually either a browser timeout or a 500-Server Error, depending on which end gives up first. The rules in this post should work all together as shown, but they won't work if the full path is used in the second two rules, because then you'll end up with conflicting external redirects; Regardless of whether the domain is on a different server, an external redirect (involving the client) is the result of including the [domain...] or an [R] flag in the rule. In short, test this code without modification. In case there is a misunderstanding, your users will now see only www.site1.com and www.site2.com -- They will no longer see, nor be able to directly access, www.domain.com/site1/<anything> or www.domain.com/site2/<anything> Jim
JavaScript Fading Tooltips Wednesday Aug 31 2005 Introducing: Sweet Titles No. It's not a knock-off from NICE Titles nor is it trying to improve on Dunstan's revised attempt. And it most definitely isn't ripped from one of those event-handler infested scripts from Dynamic Drive No. I feel I have achieved both and for what I would call innovating the wheel. What's the big deal? Well, for starters as I mentioned the code is "a lot" less than the original scripts by Stuart and Dunstan. Tooltip Usability One other thing to note on the difference between Sweet Titles and Nice Titles is that I cut off the URI at 25 characters for the main reason of unwanted lengthiness. How do I implement this on 'my' website Please Note: The Following instructions have been deprecated
My Great Data (migratedata) Suckerfish Dropdowns - HTML Dog Single-level Dropdowns Right. Let's not beat around the bush. The initial HTML we're dealing with will look something like this: <ul id="nav"><li><a href="#">Percoidei</a><ul><li><a href="#">Remoras</a></li><li><a href="#">Tilefishes</a></li><li><a href="#">Bluefishes</a></li><li><a href="#">Tigerfishes</a></li></ul></li><li><a href="#">Anabantoidei</a><ul><li><a href="#">Climbing perches</a></li><li><a href="#">Labyrinthfishes</a></li><li><a href="#">Kissing gouramis</a></li><li><a href="#">Pike-heads</a></li><li><a href="#">Giant gouramis</a></li></ul></li></ul> A good wholesome structured unordered list. To set things up we need some basic styling: Note that you need to specify a width in the #nav li selector or else Opera will chuck a wobbly. The CSS specs say that top, right, bottom and left values should offset an absolutely positioned box from its containing block. And there you go. Multi-level Dropdowns There are a few things we need to add to the single-level method. Examples
The Ultimate Website Launch Checklist | Our Blog We launched the original website launch checklist back in 2009 and, as is rapidly becoming tradition, have revisited it to check it's still relevant, valuable and useful. So, take a look and make sure you're ready to launch in style. Why are you launching a website? Let’s start by asking the most important question of all - why are you about to launch something new? It’s only possible to measure success if there are defined goals and targets against which you can analyse and compare results. Those same targets are the basis for determining if new content is appropriate, if a design choice is likely to be effective, and helps drive testing of the underlying code as well. Website goals and supporting objectives are documented What kind of website are you launching? A website can come in all shapes and sizes and these days there are very few limits to what is possible, especially at Box UK! The boundaries of your expectations for launch have been defined. Measuring success Content Design
domCollapse Update: If you want an animated version that is even better to maintain, check out YUI DomCollapse. What is domCollapse? domCollapse allows you to collapse and expand parts of page by activating other parts of a page. To define a element that expands or collapses others add the class trigger to it as an attribute. The collapsing and expanding is achieved by adding and removing classes from the elements. How to install domCollapse To install domCollapse, simply add it to the head of your HTML document: domCollapse adds itself to the onload event of the current window, and does not overwrite other scripts. domCollapse checks if the browser is capable of collapsing and expanding elements and only applies the functionality if that is the case. How to use domCollapse Using domCollapse with your HTML/CSS To use domCollapse in your pages simply add the class trigger to any element, and it will be converted into a clickable element that collapses and expands the following element. triggerElements:'*'
The window.onload Problem - Solved! Well, when I say solved I mean solved for the two most important browsers – Internet Explorer and Mozilla/Firefox. Still that’s good enough isn’t it? First, let me define the problem. The window.onload event is used by programmers to kick-start their web applications. This could be something trivial like animating a menu or something complex like initialising a mail application. The problem is that the onload event fires after all page content has loaded (including images and other binary content). Mozilla provides an (undocumented) event tailor-made for this: DOMContentLoaded. if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } So what about Internet Explorer? IE supports a very handy (but non-standard) attribute for the <script> tag: defer. Using the handy defer attribute we can create a mini-script that calls our onload handler: The contents of this external script would be a single line of code to call our onload event handler: init();
10 Tips To A Better Form Introduction The most monotonous entities in the known universe, forms, are a staple of every web programmer’s balanced diet. Whether we like them or not, forms are the gatekeepers to our site’s goodies and often their design alone determines whether a user will try what you’re selling or simply walk away. Without pomp or circumstance, here are ten tips to transform your plain vanilla into double chocolate chunk with marshmallows. The Code The code examples below will not work “as is.” 1. We’ve notice a lot of people forgetting to use the tools that are already made accessible to them by the very medium that they work in. Label A label is used to attach information to a control. <label for="email">Email: </label><input type="text" id="email"> or <label>Email: <input type="text" id="email"></label> Fieldset “The FIELDSET element allows authors to group thematically related controls and labels. Legend “The LEGEND element allows authors to assign a caption to a FIELDSET. Tabindex Accesskey Password
JavaScript Kit- Comprehensive JavaScript, DHTML, CSS tutorials and over 400+ free JavaScripts!