log

August 29, 2010

jQuery Article Expander plugin v1.0

Ear­li­er this week a friend and I dis­cussed using JavaScript to col­lapse and expand news arti­cles to reduce page loads, so I played with a snip­pet of code over the week­end and then turned it into a jQuery plu­g­in. It was fun get­ting my hands dirty with jQuery again — I’d for­got­ten how con­cise and beau­ti­ful the code can be.

See the demos

Installing and basic usage

  1. Down­load jQuery and save it into the fold­er con­tain­ing your oth­er web­site files.
  2. Down­load jquery.articleexpander.1.0.zip and extract the JS & CSS files into the fold­er above.
  3. Insert the fol­low­ing lines into the <head> sec­tion 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 ref­er­ence in the code above to match your jquery file’s filename.
  5. Write your news arti­cles, blog posts or what­ev­er 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 plu­g­in. For exam­ple, the code below cus­tomis­es the expand and col­lapse text while mak­ing the ani­ma­tion a lit­tle faster:

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

The full list of the options

expand­Text
The text shown in the ‘read more’ but­ton when the arti­cle is collapsed.
col­lapse­Text
The text shown in the ‘read more’ but­ton when the arti­cle is expanded.
head­ingS­e­lec­tor
The CSS selec­tor used to find the head­ing ele­ment inside the arti­cle. The selec­tor is rel­a­tive to the arti­cle element.
con­tentS­e­lec­tor
The CSS selec­tor used to find the con­tent ele­ment inside the arti­cle. Note the selec­tor is rel­a­tive to the arti­cle element.
head­ingClick­able
If true, the arti­cle head­ing can be clicked to trig­ger the expand/collapse.
con­tentClick­able
If true, the arti­cle con­tent can be clicked to trig­ger the expand/collapse. Note this will get in the way of copy/paste oper­a­tions and pos­si­bly links.
speed­In­Mil­lisec­onds
The length of time the ani­ma­tion takes to exe­cute. 1000 mil­lisec­onds = 1 second.
cur­sor
The mouse cur­sor shown when hov­er­ing over click­able head­ings 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 Ver­sion 2 licens­es, like jQuery itself. This leaves your options for re-use pret­ty open.

Feed­back and com­ments are wel­come; patch­es and improve­ments even more so! Thanks for your interest.

posted by Andrew
Filed under at 10:19 pm | 3 comments »

August 28, 2010

Brittle

From pub­lic-html-wg-announce:

Test­ing front: We approved 25 can­vas tests. Work is still on going on the under­ly­ing test frame­work to make tests more auto­mat­ic: we are now going to allow reftests (but our frame­work will run them man­u­al­ly). We’re run­ning into a seri­ous lim­i­ta­tion of the W3C test serv­er (test.w3.org): it can­not run PHP code. This is pre­vent­ing us from host­ing the XHR test suite at the moment and will affect the HTML test suite in the medi­um term. We’re look­ing for a solution.

Empha­sis mine.

posted by Andrew
Filed under at 7:39 pm | Add a comment »

August 27, 2010

Australian Election Pokémon

Absolute­ly hilar­i­ous. Two thumbs up.

Also see: doesaustraliahaveagovernmentyet.com

posted by Andrew
Filed under at 7:09 am | Add a comment »

August 26, 2010

The new DevMo: when designers get near documentation websites


Egads. Over­whelm­ing much? This new fron­tend-heavy design for the Mozil­la Devel­op­er Net­work sure is dis­ori­ent­ing until you learn to ignore most of the front page and realise all the use­ful con­tent is halfway down, beneath the fold. Because it’s impor­tant that you know it’s the last week to vote for your favorite Fire­fox Home iPhone Skin (!), an entire side­bar, almost a third of the screen wide, is ded­i­cat­ed to Twit­ter posts. Sig­nif­i­cant screen space is set aside for an enor­mous swip­ing advert for projects you already know about (being a web devel­op­er and all) or that would be bet­ter deliv­ered near a link to their rel­e­vant category.

A huge red bar dom­i­nates the front page like an error box that won’t go away, and sad­ly con­tains only one use­ful link (“Here’s how to get start­ed”). Even that could be filed away near the login/register pan­el at the top right, which also real­ly needs some lov­ing. This red bar turns into a dif­fer­ent bar when you nav­i­gate away from the front page, but it still does­n’t con­tain any­thing of mer­it (twit­ter, feed and forum links should not be in a ded­i­cat­ed hor­i­zon­tal bar that results in the actu­al page con­tent being shoved down by 85px).

I ini­tial­ly dis­re­gard­ed 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 acci­dent (notic­ing the mouse cur­sor change as I moved near­by) did I dis­cov­er they’re actu­al­ly links; with­out the tra­di­tion­al under­line (or but­ton/tab-styling) chunks of ran­dom­ly-coloured cap­i­talised text do not sig­ni­fy a link.

Click­ing the large ‘WEB’ link at the top takes you to a page with only four ‘pop­u­lar’ web doc­u­men­ta­tion cat­e­gories, so find­ing stuff on, say, the DOM requires click­ing the small, light blue ‘All web devel­op­ment doc­u­men­ta­tion’ link under­neath. At this point you actu­al­ly tran­si­tion from the shell of the new design to the sane, rea­son­ably sim­ple old MDN pages.

I filed a bunch of “I sug­gest” requests through a sup­port sys­tem that’s also quite need­less­ly con­fus­ing and oper­ates on ‘points’ as if it’s some kind of demo­c­ra­t­ic social net­work; here’s hop­ing some­thing comes of it. Maybe I’ll just deep book­mark into the site prop­er instead…

posted by Andrew
Filed under at 9:11 pm | Add a comment »

August 25, 2010

Amazing colour photos from 100 years ago

Just an amaz­ing pho­to link this time.

posted by Andrew
Filed under at 12:39 pm | Add a comment »

August 21, 2010

Last minute voting choices

Not sure which par­ty rep­re­sents your per­son­al poli­cies? Have a look at this great post at The Pro­gres­sive Reformist that breaks down each party/candidate’s poli­cies in a read­able fash­ion (and has links to each par­ty’s site!).

Easy-to-read infor­ma­tion on par­ty pref­er­ences can be found on the ABC Elec­tions site.

After­wards, vis­it BelowTheLine.cc to build your per­son­al Sen­ate vot­ing sheet before vis­it­ing the polling booth. Thanks for the awe­some tool Cameron McCor­ma­ck!

posted by Andrew
Filed under at 3:49 am | Add a comment »