log

September 11, 2010

Trolls

Holy shit, Edward O’Connor read my mind.

posted by Andrew
Filed under Personal at 6:16 am | Add a comment »

September 10, 2010

Breaking news advertisements

posted by Andrew
Filed under Personal at 11:29 pm | 1 comment »

September 9, 2010

Arrrggghhhhh

http://www.w3.org/Bugs/Public/show_bug.cgi?id=10581

I am an HTML author since 1994, a JS & PHP programmer, and a teacher in those three fields. I will use this feature. My students are excited about this feature. This feature is easy to use, cleanly solves a common need in Content Management Systems and other web apps, is backwards-compatible with existing user agents, greatly improves accessibility by allowing user agents to adjust the picker for OS-native accessibility settings and tools, works in restricted environments where JavaScript support isn’t available, and can be overridden by specialised JavaScript libraries should advanced functionality be required. Oh yes, sure, remove the feature. Brilliant.

Can I file a Change Proposal to remove the Shelley section from the HTML Working Group? This section consistently goes against real-world use cases, wastes reader CPU cycles with needless verbiage and appears to be ignored by implementers.

Every time I open my HTMLWG mail folder I’m reminded as to why the practical technical discussion is held on WHATWG.

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

September 4, 2010

Hilarious: News.com.au classed as ‘adult website’ in audit of politicians’ internet use

No comment; the article itself is more than enough.

Both news.com.au and smh.com.au were classified as adult sites in the audit.

“The definition of what has been classed as an adult site is something we’re reviewing,” [Legislative Council president Amanda Fazio] said.

posted by Andrew
Filed under Personal at 2:03 pm | Add a comment »

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.

posted by Andrew
Filed under Personal at 1:58 pm | Add a comment »

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
Filed under Personal at 10:19 pm | 1 comment »