irama.org » Technology

Get the text within an element—including alt text—using jQuery

Andrew Ramsden — Sat, 20 Aug 2011 00:11:12 +0000

When working on the butterfly lightbox I needed a way to grab the text with a link including the alt text from any images within.

I couldn’t find any existing approaches, so I put together this small plugin to do the job. I thought I should post it here before I forget, or in case anyone else might find it useful too.

Example

If you had the following html:

The symbol for happiness is

You could grab the accessible text using the jQuery plugin like this:

$('#smiley').accessibleText();

Which would return the text ‘The symbol for happiness is a smiley face‘.

Plugin code

/**
 * jQuery plugin that returns the text nodes within the target element, combined/concatenated
 * with any alt text or input values.
 */
$.fn.accessibleText = function() {
	if (this.is('img')) {
		return this.attr( 'alt' );
	} else if (this.is('input')) {
		return this.attr( 'value' );
	} else {
		return $.map( this.contents(), function( domElement ) {
			if ( domElement.nodeType === 3 ) {
				return domElement.data;
			} else if ( domElement.nodeType === 1 ) {
				var $element = $( domElement );
				if ( $element.is( 'img, imput' ) || $element.find( 'img[alt], input[value]' ).length > 0 ) {
					return $element.accessibleText();
				} else {
					return $element.text();
				}
			}
		}).join( '' );
	}
};

Let me know if you found this useful, or if you know of a better solution!

Edit: Much improved version above, thanks to Ben!
Edit again: I have updated it again to support input elements, and support using the plugin on inputs and imgs directly (this should really go on github).
Final edit: Here it is, accessibleText on github.

Butterfly lightbox, now with gallery support

Andrew Ramsden — Mon, 06 Jun 2011 14:27:09 +0000

By popular demand (thanks Ray) the butterfly lightbox has been extended with new functionality.

The biggest new feature is the addition of support for galleries. Specify a gallery using either a container element to wrap the related links, or by using the same rel attribute on related links allows a series of lightbox links to work together, with ‘next’ and ‘previous’ controls presented beside the lightbox content to allow navigation between each gallery item.

Try it out here:

See full examples, downloads and changelog for more detail.

Cached images have no width or height in webkit (e.g. Chrome or Safari)

Andrew Ramsden — Sun, 05 Jun 2011 02:03:15 +0000

Stackoverflow (SO) has always been a handy resource. Today I noticed a particularly valuable comment with 0 votes.

I created an SO account with the explicit purpose of voting this comment upwards, but unfortunately, I have no reputation on SO, and am not able to do this (yet).

For lack of a better way to credit JKS for his insightful solution I thought I’d recognise it here.

Problem

In webkit browsers (e.g: Chrome or Safari) the onload event fires for both cached and non-cached images, but images loading from cache seem to return dimensions of 0—for both width and height.

Solution

JKS proposes a simple solution, a seemingly redundant setTimeout before taking your measurements seems to magically restore cached image dimensions. In jQuery, that would look like this:

$('img').load(function(){
    setTimeout(function(){
        // do something based on $('img').width and/or $('img').height
    }, 0);
});

Thanks

Thanks again to JKS for the tip!

Cache manifests and Firefox

Andrew Ramsden — Sun, 20 Mar 2011 09:32:19 +0000

I’ve been playing with offline web applications this afternoon. Generally, it’s pretty straightforward:

Reference your manifest file in the tag of each page.
Fill out your .manifest file with the relevant resources you want to be cached and available offline.
Configure your server to serve .manifest files at text/cache-manifest.

Most browsers picked this up fine (tested: Opera 11, Chrome 7, Mobile Safari iOS 4.3), but unfortunately I ran into…

Firefox issues

Firefox (tested: 3.6.13 and 4.0b11) refused to pull resources back from appCache—even though it reported successfully caching 175kB of data—or request any resources that weren’t cached. Firefox just presented the plain HTML for each pages without loading images, stylesheets, scripts or any other assets.

After much searching and trial and error, I came across a recommendation on stackoverflow to use http://* within the NETWORK section of the manifest for the sake of Firefox, and sure enough…

It works!

Final code samples as follows…

HTML (`/index.html`)

...

Manifest (`/path/to/my.manifest`)

CACHE MANIFEST
#ver0.08
CACHE:
images/bg-noise-tile.png
images/site-name-bg.png
images/menu-bar-divide.png
# etc ...
NETWORK:
http://*
*

Apache configuration (`/.htaccess`)

# Ensure manifests are served using the correct mime type
AddType text/cache-manifest .manifest

Thank you

Thanks to dalibor for pointing out that http://* is required for Firefox.

One other handy resource is Mark Pilgrim‘s Let’s take this offline, and if it had mentioned http://* it would have been perfect!

unrecognized expression: #

Andrew Ramsden — Mon, 15 Nov 2010 11:32:59 +0000

I’ve tried to use one of my own jQuery plugins—that I know works—only to receive the following console messages without any reference to a code line number, hence no way to track down the culprit:

uncaught exception: Syntax error, unrecognized expression: #

I’m sure this has caught me out a number of times. Each time is far enough apart that I have forgotten how I debugged the issue previously. And each time I search the interwebs in vain. No one seems to have clearly explained what causes this exception!

Next time I encounter this problem, hopefully I remember—or find—this post, solution follows…

Solution

This exception is thrown by jQuery when you ask it to resolve the selector '#' without an id following. In my case it is often caused by my plugin code assuming an element has an id. If the element doesn’t have an id, the exception is thrown, for example:

...
var storedID = $(this).attr('id');
...
$('#'+storedID).doSomething();
...

When this doesn’t have an id, I’ve essentially asked jQuery to resolve the following:

...
$('#').doSomething();
...

Which jQuery doesn’t like to do, hence the exception.

HTH

irama.org » Technology

Get the text within an element—including alt text—using jQuery

Example

Plugin code

Butterfly lightbox, now with gallery support

Cached images have no width or height in webkit (e.g. Chrome or Safari)

Problem

Solution

Thanks

Cache manifests and Firefox

Firefox issues

It works!

HTML (/index.html)

Manifest (/path/to/my.manifest)

Apache configuration (/.htaccess)

Thank you

unrecognized expression: #

Solution

HTML (`/index.html`)

Manifest (`/path/to/my.manifest`)

Apache configuration (`/.htaccess`)