Skip to content

Instantly share code, notes, and snippets.

@1337
Last active October 11, 2015 21:28
Show Gist options
  • Save 1337/3922075 to your computer and use it in GitHub Desktop.
Save 1337/3922075 to your computer and use it in GitHub Desktop.
Bring you to the definition.
/*
when you click on <a class="dt">Hello</a> and a
<dt>Hello</dt> is on the same page, the page scrolls
to that location.
*/
$(document).ready(function () {
$('a.dt', document).each(function () {
var that = $(this), rel = that.attr('href') ||
that.text().replace(/\s+/g, ' ');
if (!rel) {
return;
}
var correspondingDT = $('dt', document).filter(function (idx) {
return ($(this).text().toLowerCase() === rel.toLowerCase());
});
if (!(correspondingDT && correspondingDT.length)) {
return;
}
that.click(function (event) {
event.preventDefault();
$('html, body').animate({
'scrollTop': correspondingDT.offset().top
}, 650);
// highlight
var oldBg = correspondingDT.css('background-color') || 'transparent';
correspondingDT.css({'background-color': '#ff0'})
// requires $.Color
.animate({'background-color': oldBg}, 2500)
.css({'background-color': oldBg});
}).prop('title',
rel + '\n\n' + correspondingDT.next('dd').text().replace(/\s+/g,
' ')).css('cursor', 'help');
// reverse highlight
var thatBg = that.css('background-color') || 'transparent';
correspondingDT.mouseenter(function () {
that.css({'background-color': '#ff0'});
}).mouseout(function () {
that.animate({'background-color': thatBg}, 2500)
.css({'background-color': thatBg});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment