August 29, 2010
See the demos
- Basic demo: get started here
- Options demo: customising the plugin
- Integrated demo: see it used in a real layout
Installing and basic usage
- Download jQuery and save it into the folder containing your other website files.
- Download jquery.articleexpander.1.0.zip and extract the JS & CSS files into the folder above.
Insert the following lines into the <head> section of your HTML file:
- Change the jquery.js reference in the code above to match your jquery file’s filename.
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>
- 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:
The full list of the options
- The text shown in the ‘read more’ button when the article is collapsed.
- The text shown in the ‘read more’ button when the article is expanded.
- The CSS selector used to find the heading element inside the article. The selector is relative to the article element.
- The CSS selector used to find the content element inside the article. Note the selector is relative to the article element.
- If true, the article heading can be clicked to trigger the expand/collapse.
- 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.
- The length of time the animation takes to execute. 1000 milliseconds = 1 second.
- The mouse cursor shown when hovering over clickable headings and content.
A full config example
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.
August 28, 2010
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.
August 27, 2010
August 26, 2010
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…
August 25, 2010
August 21, 2010
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.