Skip to content

Instantly share code, notes, and snippets.

@gyrus
Created July 27, 2012 17:41
Show Gist options
  • Save gyrus/3189303 to your computer and use it in GitHub Desktop.
Save gyrus/3189303 to your computer and use it in GitHub Desktop.
Make containing elements into links
/**
* Make containing elements into links
*
* jQuery, in conjunction with two CSS classes:
*
* 'make-link' - Makes containing elements into links. Add the class '.make-link-target'
* to the descendant anchor that is linked to the URL you want the ancestor element to
* link to. The JS handles making the cursor into a pointer and adds the class 'hover'
* to the target anchor when the ancestor is hovered.
*
* 'make-sibling-link' - Like 'make-link', but this looks for a parent with the
* 'make-link-container' class, then a child of it with the 'make-link-target' class.
*/
if ( $( '.make-link' ).length ) {
$( '.make-link' ).css( 'cursor', 'pointer' ).hover(
function() {
window.status = $( this ).find( 'a.make-link-target' ).attr( 'href' );
$( this ).find( 'a.make-link-target' ).addClass( 'hover' );
},
function() {
window.status = '';
$( this ).find( 'a.make-link-target' ).removeClass( 'hover' );
}
).click( function() {
window.location = $( this ).find( 'a.make-link-target' ).attr( 'href' );
});
}
if ( $( '.make-sibling-link' ).length ) {
$( '.make-sibling-link' ).css( 'cursor', 'pointer' ).hover(
function() { window.status = $( this ).parents( '.make-link-container' ).find( 'a.make-link-target' ).attr( 'href' ); },
function() { window.status = ''; }
).click( function() {
window.location = $( this ).parents( '.make-link-container' ).find( 'a.make-link-target' ).attr( 'href' );
});
}
if ( $( '.make-link, .make-sibling-link' ).length ) {
$( 'a.make-link-target' ).click( function(e) { e.preventDefault(); });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment