nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Adding Content using CSS3

CSS3 is an exciting new browser technology, it’s implementation is improving with every new browser release. Microsoft is adding a whole host of CSS3 selectors to the their next version of Internet Explorer, version 9. Until IE9 is released and the vast majority of users start using it, (2016 maybe?) it’s a case of having to use CSS3 quite cautiously.

Using the ‘progressive enhancement’ methodology, we build a website that works in all browsers first, then ‘layer on’ the cool features and ‘nice to haves’ after, so users with modern browsers get the full site experience and older browsers still have access to all the content. CSS3 sits in the ‘nice to have’ category for the moment.

While looking through the W3C CSS3 Working Draft I came across a section called ‘Inserting content into an element’. The CSS3 pseudo-elements listed here are used to add content to the page using CSS. Cool! ….wait a second; for years we’ve been separating layout from content, allowing us to easily edit a whole website layout from a single file. The pseudo-elements seem to be going against this mantra! Uh ohh! It’s controversial, but I believe if used responsibly the pseudo-elements shouldn’t cause any major accessibility issues.

::before & ::after
The ::before and ::after pseudo-elements are used to add content before and after the content inside the selected element (surprising huh!):

1
2
3
4
5
6
#element::before {
    content: "Paradox: ";
    }
#element::after {
    content: " Now my head hurts."
    }

View a demo here.

The specifications even allow you to add more content by iterating the pseudo-elements, so ::after::after (or ::after(2)) but this isn’t supported in current browsers I have tested. I’m personally hoping that part of the specification isn’t implemented, as you can have too much of a good thing. You could end up in the nightmare situation of pages completely generated using CSS3 using multiple levels of ::before and ::after.

The CSS3 specification has also outlined the pseudo-element ::outside but it hasn’t been implemented yet in the current version of Firefox I’m using (3.6.3).

Outline will allow you to wrap an element inside another element and then add styling to it. Usually you’d modify the source code by adding extra divs to do this, but it isn’t always possible. Outline would have been very useful over the past couple of years for adding ‘sliding doors’ and rounded corners where needed, without having to clutter up the mark-up with ‘for style’ only tags. Oh well it’s a tool for the future.

I can’t say I’m a big fan of these new pseudo-elements as they seem to be stepping on HTML’s toes. It’s hard to think of a situation where you’d want the CSS to be writing content to the pages since it isn’t accessible to screen readers or search engines, but I’m sure there are some. The only example that springs to mind is when you add a ‘:’ after the label on a form field, you don’t want a screen reader to read out the ‘colon’ so you add it using CSS.

I’d love to hear where other people plan on using ::before and ::after, or where you are using them at the moment.

CodeColorer Auto Expanding Code

Just quick post on a small feature I’ve just added to the site which I thought I’d share. It’s a slight addition to the CodeColourer plug-in for WordPress. CodeColourer formats and colourises code blocks in your blog posts for better readability. It comes with several different styles built in, or you can customise it using your own CSS file.

A feature that I saw on another site (although I can’t remember which) was when a user rolled over a code box it would expand to fit the code, allowing the user to see everything. Cool little addition, so I decided to create my own using jQuery. I’ve taken some of the code from the plug-in and pasted it below so you can see it in action:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
if($(".codecolorer-container").length){
    var $code = $(".codecolorer-container").each(function(){
        var $this = $(this);
       
        //Animation decision object
        var decisionObject = {
            w: false,
            h: false
        };
       
        //Original width / height of the displayed code
        var originalWidth = $this.width();
        var originalHeight = $this.height();
       
        //Width / height of hidden portion of code
        var mainWidth = $this.find(".codecolorer").width();
        var mainHeight = $this.find(".codecolorer").height();
        var lineWidth = $this.find(".line-numbers").width();
       
        //Only attach events if needed (ie has scroll bars)
        if((mainWidth + lineWidth) > originalWidth || mainHeight > originalHeight){
            /* and so on...... */
        }
    }
}

Since this action is fired on hover, I didn’t want the code boxes expanding immediately every time a user hovers over a box; as just scrolling down the page would expand the boxes which would become extremely annoying. The boxes should only expand when the cursor is left over the box; lucky there’s a plug-in for jQuery that already adds this functionality, it’s called $.event.special.hover.

Special hover simply replaces the standard hover event with one that monitors the speed of the cursor over a set period of time. If the cursor speed drops below the threshold the hover event fires. This is enough to stop random hover events firing when a user navigates over the page, simple!

I’d be interested to see if the code works for others using CodeColorer, there’s no reason why it shouldn’t. Download the code, give it a try and let me know what you think.

Audio Visualisation using HTML5 and Canvas

I’ve been interested in audio visualisations for some time, I first encountered them when I started using Sonique as my default audio player many years ago. I then started using the superb Milkdrop and G-Force plug-ins for Winamp, which are both in a league of their own for audio visualisation. So I jumped at the chance to create my own when I saw the Audio Data API on the Mozilla wiki.

The Audio Data API is a draft extension specification that allows developers to read and write raw audio data. As it’s only a draft specification I’ve had to use a custom build of Firefox 3.7 with the extension hacked into it (which you can download from here). The visualisations rely on a custom browser event displayed here:

1
<audio src="audio/Abigail.ogg" id="player" controls="true" onaudiowritten="visualisation.audioWritten(event);"></audio>

The onaudiowritten event fires when audio is played, the raw data is passed to a pre-calculated FFT (Fast Fourier Transform) from which you can start generating your visualisations; it is then written to the audio layer for users to hear.

Canvas visualizations using HTML5 and patched version of Firefox

Here are 6 visualisations I've built, using the modified version of Firefox you can switch between them with live data.

You can view a demo of my visualisations, or for those of you who don’t have the custom version of Firefox installed I’ve created a short video of them in action. Each visualisation lasts approximately 10 seconds before changing. The music is courtesy of a friends band called ‘Good Dangers‘.

I hope the Audio Data API is approved and other browsers implement it, as it’s an exciting use of browser technology and defiantly an area I’ll be keeping an eye on.

WordPress plug-in: Post Thesaurus

Over the past few days I’ve been working on a new WordPress plug-in, one that I personally have desperately needed recently. It’s called ‘Post Thesaurus’ and it does exactly what you’d expect it to do. It creates a little widget on the side of the ‘Add new post’ page which you can use to suggest new words of the same meaning.

After finding I use the word ‘great’ a little too much, I thought it was about time to do something about it. Here are a few screenshots of the plug-in in action:

Post Thesaurus before I've searched for a set of words.

Notice the widget in the top right corner.

Post Thesaurus after I've completed a word search

The widget has completed a search and populated the results panel.

Big thank you to Big Huge Labs for providing the excellent API. I’ve included an admin page with a few settings (under ‘settings’). One feature to note is the ability to enter your own API key. I’ve added this just in case the plug-in starts exceeding the 10,000 requests per day a single API key is allowed. Sign up is simple and only takes a couple of minutes, then you’ll have 10,000 requests per day all to yourself.

I’ve implemented the API using a little jQuery Ajax goodness and some JSONP. Since jQuery is used by the WordPress admin by default, there’s no additional overhead in having to add it manually.

Grab the plug-in off the WordPress site here, or you can download the zip from my site here (Version 1.0.0.0).

Hope you find it useful, any feature requests or bugs leave a comment below.

Shadowbox and NextGEN Gallery Sitting in a Tree

A project I’m currently working on requires a photo gallery, luckily with WordPress there are quite a few to choose from. Of the gallery plug-ins I’ve used NextGEN Gallery is without doubt my favorite, chocked full of useful features and easy to use; you could even let a client use it! My only issue is the way the images appear in a ‘lightbox’ when you click on them, the ‘lightbox’ is great, but it’s implementation seems a little clunky.

By default NextGEN adds a chunk of code to the WordPress header which is one of my pet hates, that has to go. NextGEN uses ThickBox, which is great, but as it says on the website “Thickbox had its day” so it’s time to use an alternative. One that’s really caught my eye is Shadowbox.js.

Shadowbox.js is a fully featured media viewer that supports the webs most popular formats (images, Flash, QuickTime, Windows Media Video and FLV via JW FLV Player). Pretty much every format you really need. It also has the added bonus of being available either as a standalone script or integrated with your favourite JavaScript library (jQuery, Prototype, MooTools, Dojo, YUI and Ext). For me personally, it ticks every box… and it also looks great and works well!

So now time to bring the two together. First you should install the NextGEN gallery plug-in which you may already have it installed. Next you need view the gallery ‘options’ and select the ‘Effects’ tab. Change the “JavaScript Thumbnail effect:” to Custom and add the following code to the text box:

1
rel="shadowbox[%GALLERY_NAME%]"
Settings to change in NextGEN gallery

Change a couple of setting in the WordPress admin.

The code will be added to each thumbnail generated by the gallery. Changing the dropdown to custom also removes various bits of default NextGEN code from the header, solving that problem too.

Next it’s time to download Shadowbox.js. You have a few options on this page, as I only want to display images I selected ‘Base (standalone)’, checked the images checkbox and unchecked “Include support for using CSS selectors to select links”. I don’t plan on using shadowbox with jQuery so I didn’t add the jQuery adapter, this also keeps the filesize to a minimum.

Simple Shadowbox download page

Check your preferred settings and download.

Hit the download button to download the ZIP. Once downloaded extract the CSS, JS and images into your WordPress theme directory. All thats left to do now is add a little code to your theme.

In your header.php add:

1
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/shadowbox.css" />

Or what I prefer to do is copy the CSS from shadowbox.css into my main style.css file, this way you keep everything in one place and you minimise HTTP requests. Then add the JavaScript to your footer.php (or header.php, but I prefer to put all JS in the footer.php).

1
2
3
4
<?php if(is_single()):?>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/shadowbox.js" type="text/javascript"></script>
    <script type="text/javascript">Shadowbox.init();</script>
<?php endif;?>

Note the use of the ‘is_single()’ WordPress conditional tag. Since I’m only planning to use Shadowbox on an individual blog post I only call it on those pages. Feel free to remove this if you plan on using it elsewhere on your site.

Shadowbox and NextGEN gallery

Great looking effects that work really well alongside NextGEN gallery.

Once those bits are added you’re all done! If you don’t see the any open, close, next, previous images make sure you are pointing to them correctly in your CSS file (since they are background images). Hurrah! Enjoy your new improved version of NextGEN Gallery complete with Shadowbox.js.

Currently on page 16 of 24« First1415161718Last »