September 4, 2010
A photo corkboard using jQuery
Inspired by Vladimir Vukićević’s photos.svg demo, I tried building something similar using CSS/JS instead of SVG/JS. This first version of the photo corkboard is nowhere near parity with Vlad’s on a performance or intuitiveness scale. When I get some more time I’ll strip out the jQuery and look into using a resize/rotate handle similar to Vlad’s.
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
- 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:
<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> - 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:
<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: "» Read more",
collapseText: "« 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.
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.
August 27, 2010
Australian Election Pokémon
Absolutely hilarious. Two thumbs up.
Also see: doesaustraliahaveagovernmentyet.com
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…