log

August 29, 2010

jQuery Article Expander plugin v1.0

Earlier this week a friend and I discussed using JavaScript to collapse and expand news articles to reduce page loads, so I played with a snippet of code over the weekend and then turned it into a jQuery plugin. It was fun getting my hands dirty with jQuery again — I’d forgotten how concise and beautiful the code can be.

See the demos

Installing and basic usage

  1. Download jQuery and save it into the folder containing your other website files.
  2. Download jquery.articleexpander.1.0.zip and extract the JS & CSS files into the folder above.
  3. Insert the following lines into the <head> section of your HTML file:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.articleexpander.1.0.minified.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.articleexpander.1.0.css">
    <script type="text/javascript">
        $(function() {
            $(".article").articleExpander();
        });
    </script>
    		
  4. Change the jquery.js reference in the code above to match your jquery file’s filename.
  5. Write your news articles, blog posts or whatever to use this HTML structure:

    <div class="article">
        <h2>Article Heading 1</h2>
        <div>
            <p>The first line of your article content.</strong></p>
            <p>The second line of your article content.</strong></p>
            <p>The nth line of your article content.</strong></p>
        </div>
    </div>
    		
  6. See if it works :)

Changing options and using different HTML structures

Like most jQuery addons, this one lets you change options with a JS object passed to the plugin. For example, the code below customises the expand and collapse text while making the animation a little faster:

    <script type="text/javascript">
        $(function() {
            $(".article").articleExpander({
               expandText: "See more",
               collapseText: "See less",
               speedInMilliseconds: 1000
            });
        });		
    </script>

The full list of the options

expandText
The text shown in the ‘read more’ button when the article is collapsed.
collapseText
The text shown in the ‘read more’ button when the article is expanded.
headingSelector
The CSS selector used to find the heading element inside the article. The selector is relative to the article element.
contentSelector
The CSS selector used to find the content element inside the article. Note the selector is relative to the article element.
headingClickable
If true, the article heading can be clicked to trigger the expand/collapse.
contentClickable
If true, the article content can be clicked to trigger the expand/collapse. Note this will get in the way of copy/paste operations and possibly links.
speedInMilliseconds
The length of time the animation takes to execute. 1000 milliseconds = 1 second.
cursor
The mouse cursor shown when hovering over clickable headings and content.

A full config example

    <script type="text/javascript">
        $(function() {
            $(".article").articleExpander({
                expandText: "&raquo; Read more",
                collapseText: "&laquo; Collapse article",
                headingSelector: "> div gt; :first-child",
                contentSelector: "> div gt; div",
                headingClickable: true,
                contentClickable: true,
                speedInMilliseconds: 300,
                cursor: 'pointer'
            });
        });		
    </script>

Licensing, feedback and modifications

jQAE is dual licensed under the MIT or GPL Version 2 licenses, like jQuery itself. This leaves your options for re-use pretty open.

Feedback and comments are welcome; patches and improvements even more so! Thanks for your interest.

posted by Andrew

August 28, 2010

Brittle

From public-html-wg-announce:

Testing front: We approved 25 canvas tests. Work is still on going on the underlying test framework to make tests more automatic: we are now going to allow reftests (but our framework will run them manually). We’re running into a serious limitation of the W3C test server (test.w3.org): it cannot run PHP code. This is preventing us from hosting the XHR test suite at the moment and will affect the HTML test suite in the medium term. We’re looking for a solution.

Emphasis mine.

posted by Andrew

August 27, 2010

Australian Election Pokémon

Absolutely hilarious. Two thumbs up.

Also see: doesaustraliahaveagovernmentyet.com

posted by Andrew

August 26, 2010

The new DevMo: when designers get near documentation websites


Egads. Overwhelming much? This new frontend-heavy design for the Mozilla Developer Network sure is disorienting until you learn to ignore most of the front page and realise all the useful content is halfway down, beneath the fold. Because it’s important that you know it’s the last week to vote for your favorite Firefox Home iPhone Skin (!), an entire sidebar, almost a third of the screen wide, is dedicated to Twitter posts. Significant screen space is set aside for an enormous swiping advert for projects you already know about (being a web developer and all) or that would be better delivered near a link to their relevant category.

A huge red bar dominates the front page like an error box that won’t go away, and sadly contains only one useful link (“Here’s how to get started”). Even that could be filed away near the login/register panel at the top right, which also really needs some loving. This red bar turns into a different bar when you navigate away from the front page, but it still doesn’t contain anything of merit (twitter, feed and forum links should not be in a dedicated horizontal bar that results in the actual page content being shoved down by 85px).

I initially disregarded the entire ‘WEB MOBILE ADD-ONS APPLICATIONS’ strip across the top since it just looked like an ugly way to state what you’d find on the site. Only by accident (noticing the mouse cursor change as I moved nearby) did I discover they’re actually links; without the traditional underline (or button/tab-styling) chunks of randomly-coloured capitalised text do not signify a link.

Clicking the large ‘WEB’ link at the top takes you to a page with only four ‘popular’ web documentation categories, so finding stuff on, say, the DOM requires clicking the small, light blue ‘All web development documentation’ link underneath. At this point you actually transition from the shell of the new design to the sane, reasonably simple old MDN pages.

I filed a bunch of “I suggest” requests through a support system that’s also quite needlessly confusing and operates on ‘points’ as if it’s some kind of democratic social network; here’s hoping something comes of it. Maybe I’ll just deep bookmark into the site proper instead…

posted by Andrew

August 25, 2010

Amazing colour photos from 100 years ago

Just an amazing photo link this time.

posted by Andrew

August 21, 2010

Last minute voting choices

Not sure which party represents your personal policies? Have a look at this great post at The Progressive Reformist that breaks down each party/candidate’s policies in a readable fashion (and has links to each party’s site!).

Easy-to-read information on party preferences can be found on the ABC Elections site.

Afterwards, visit BelowTheLine.cc to build your personal Senate voting sheet before visiting the polling booth. Thanks for the awesome tool Cameron McCormack!

posted by Andrew