Recent Blog Posts
Blogs » JavaScript & CSS
Stylish Scripting
: JavaScript & CSS BlogJavaScript Event Delegation is Easier than You Think
If you’re into adding a little JavaScript interactivity to your web pages, you may have heard of JavaScript event delegation and thought it was one of those convoluted design patterns that only hardcore JavaScript programmers worry about. You’d be wrong.
CSS Theme Week… And That’s All Folks!
We conclude our first ever CSS-themed week with a classic article that collates the most important CSS positioning properties.
Nigel Peck’s article CSS Positioning Properties At-A-Glance Guide was first published back in 2003, but five years later still stands strong as a compact summary of the basics of CSS positioning (although we updated a few points before republishing). In fact, the concept of this article formed the basis for the SitePoint CSS Reference, which was then expanded to include the HTML Reference, and we have a JavaScript Reference under development, so the article was quite seminal from our perspective.
In case you missed an article along the way, here’s the complete list of articles that we published this week:
- Monday: Nifty Navigation Tricks Using CSS (Rachel Andrews) — an article that is still popular for beginners looking to create visually interesting site navigation elements that are based on semantic markup
- Tuesday: Breaking Out of the Box With CSS Layouts (Jina Bolton) — a terrific example of what can be done to dispel the myth that all CSS layouts are boxy
- Wednesday: Warning: This Secret CSS Technique Will Surprise You! (Alex Walker) — just when you thought you’d seen everything that could …
CSS Animation: The Ultimate Web Design Easter Egg
Our third tutorial for CSS Theme Week went live today — a new article titled Warning: This Secret CSS Technique Could Surprise You!.
Read previous articles from CSS Theme Week:
- Monday: Nifty Navigation Tricks Using CSS
- Tuesday: Breaking Out of the Box With CSS Layouts
Today’s article was written by our own Alex Walker, a man with an unhealthy obsession for spotting an anomaly and exploring it in great detail (I sit next to Alex, so I know how much time he put into this tutorial). This article is the result of that exploring.
A while back Alex published a blog post about the fun that could be had when you explored overlapping CSS background images. At that stage, the effect he had produced was interesting and useful, though admittedly in limited cases (we applied it to the ad on the front page of sitepoint.com to promote our Art & Science of JavaScript book). While not immediately practical in every situation, it demonstrated one way of embedding a hidden feature into your page — an “easter egg” for your users.
Those easter eggs aren’t going to make or break your design — in fact, chances are that most of them won’t notice it …
CSS Theme Week: More CSS Tutorials Than You Can Handle!
It’s CSS Theme week on SitePoint!
What does that mean for you, dear reader?
Well, it means that we’ve trawled through the archives and hand-picked our favourite (and your favourite) CSS tutorials, and will be republishing one article per day for the next five days on the front page of sitepoint.com. Be sure to bookmark (you might even want to subscribe to the RSS feed for our articles if you haven’t done so yet). CSS has evolved and techniques have changed, but rest assured that these articles hold the test of time.
But that’s not all!
We also have a jaw-droppingly awesome new CSS technique that we’ll be throwing in there in the middle of the week. We’ve published some cutting-edge stuff in the past, but this is definitely up there in terms of pushing the envelope. I promise you haven’t seen CSS do this before … it’s awesome stuff.
In the mean time, though, I’d like to introduce you to our first article for CSS Theme Week. Allow me to reacquaint you with Rachel Andrew’s seminal article from last year …
Nifty Navigation Using CSS
This article is an excerpt from Rachel’s popular book The CSS Anthology, 2nd edition, and is one of …
In-browser Development Tools: Firebug Still King
At the start of this year, I sat down to write the “Errors and Debugging” chapter of Simply JavaScript. I cracked my fingers, dove into the landscape of JavaScript debugging tools, and emerged very disappointed several hours later. At the time, Firefox was the only browser with a JavaScript debugging tool worth writing about: Firebug.
Less than a year later, the landscape has changed dramatically. Every major browser has introduced new development tools that make it easier to diagnose problems with your HTML, CSS, and JavaScript code right inside the browser in question. But can any of these tools stack up against the slick and effortlessly powerful tools provided by Firebug? Let’s take a look.
Internet Explorer
Internet Explorer is notorious for coughing up mysterious rendering behavior and useless JavaScript error messages at every turn, and Microsoft is obviously making a concerted effort to improve not just the browser itself, but the tools available for developers to diagnose such issues.
The Internet Explorer Developer Toolbar for IE6 and IE7 is a useful tool for fiddling with page styles on the fly when you’re hunting for a work-around to the rendering issues in those browsers. Its features for diagnosing actual bugs in your CSS are …
Serve JavaScript Frameworks Faster with the Google AJAX Libraries API
Google has announced an extension to their Google AJAX APIs service: the AJAX Library APIs. They’ve assembled a collection of the most common JavaScript libraries and made them available on their content delivery network.
A common criticism leveled at JavaScript framework libraries is that the same code is downloaded from all the sites that use them, wasting bandwidth and creating duplicate files in the browser’s local cache. Google’s initiative is an effort to relieve that burden and create a kind of JavaScript Shangri La where all the frameworks hang out together, making efficient use of their time and possibly singing. if there’s a better way to ruin a decent plane-crash-survival movie than singing I haven’t seen it! Frank Capra has a lot to answer for.
Anyway, if enough sites use the Google CDN for their JavaScript libraries, the better the chance that the browser has already cached a local copy of it and can avoid having to download it again. Everyone reaps the performance benefits!.
Using the service is simple. You can directly reference the libraries via URI like so:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js”>
</script>
Alternatively, you can use Google’s API thusly:
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(”prototype”, “1.6.0.2″);
</script>
The first argument is the name of the …
Two Hidden Features New in Firefox 3
Firefox 3 Release Candidate 1 was revealed to the world last week, which means the final release is only about a month away. If you haven’t yet checked that your site works smoothly in the new browser, now’s the time!
Building The Matrix - Notes from The Architect
Matt Magain’s recent blog post about constructing the new SitePoint Book Matrix raised a couple of interesting questions, which I’m going to try to answer, since it was me who built it.
When is a table not a table?
When its data isn’t really tabular; in other words, when the data it represents isn’t really two-dimensional. What we have here is visually two-dimensional, hence at first glance it might seem reasonable to represent it as tabular data; but the data itself isn’t really two-dimensional at all, it’s linear.
A two-dimensional data set has two axes, each representing a different range or set of values, so we should be able to plot axes against the data and be able to make meaningful cross-references. But as the illustration below shows, we can’t:
Sure we can plot those lines and create that reference point, but they don’t mean anything, because the x and y axes both represent the same scale (skill level).
Before we can implement the design we need to decide how the data should be marked up, and that’s why it’s so crucial to determine the …
JavaScript MIME Type: Damned if You Do, Damned if You Don’t!
In an article he posted a little while back, Alex Walker mentioned some trouble he had with <script> tags when trying to add the type attribute. The Google script Alex was embedding had no type attribute but wouldn’t work when he added one. Douglas Crockford has suggested in his Advanced JavaScript videos that we drop the type attribute altogether since browsers default to JavaScript anyway. The problem is under HTML 4.01 and XHTML 1.0 the type attribute is required. So if you care about validation, like Alex does, then you’ll want to add it.
But, what is the correct type value for JavaScript? The other reason Mr Crockford provides for dropping the attribute is that that the value most people use, text/javascript, is wrong! It’s obsolete, according to rfc4329. This is also confirmed by Anne van Kesteren who has covered this issue already (way back in May of 2006 - yes Anne is one of the gurus and I am not), as well as the SitePoint HTML Reference.
The correct type value for JavaScript is actually application/javascript. But wouldn’t you know it, Internet Explorer will not execute the code if you use that type value. So here’s a hell of a situation, …
Is Your JavaScript Library Standards Compliant?
One of the things JavaScript libraries like jQuery, Dojo, and YUI can do for you is add support for features in the latest Web standards long before they are built into browsers. But are some libraries going too far?
For the developers of JavaScript libraries, there is a temptation to extend the features of the standard, and build something even better! A good example of this is the CSS selector queries that first made jQuery famous, but which are now available in most JavaScript libraries.
CSS queries provide an extremely convenient way of getting a list of elements from an HTML document that match certain criteria. As an example, you might write a script that opens all hyperlinks with the attribute rel=”external” in a new window. Using just the DOM API supported by all major browsers, the JavaScript code to retrieve that list of links is pretty cumbersome:
var anchors = document.getElementsByTagName(’a');
for (var i = 0; i < anchors.length; i++)
{
var href = anchors[i].getAttribute(’href’);
var rel = anchors[i].getAttribute(’rel’);
if (href != null && href.length > 0 &&
rel != null && /(^| )external( |$)/.test(rel))
{
// anchors[i] is a link with …
Sponsored Links
Logo Design, Web page Design and more!
- Custom logo designs created ‘just for you’.
- Pick the design you like best.
- Only pay if you’re satisfied with the result.
The most complete and up-to-date HTML Encyclopedia money can buy.
Learn about this Book
FREE SampleDownload sample chapters of any of our popular books.
