Subscribe by RSS
If Only Everything Could Hover Like These Hovercards…
7/26/2010 9:00 AM By Jeff BLast time we discussed some simple @Anywhere implementations; now let’s dive in to some of the more advanced applications of using Twitter on your website. Let’s check out some of the options for Hovercards.
First, note that the hovercards method implicitly calls the linkifyUsers method against its scope (<body> by default). If you want to disable the linkification, you can do so like this:
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#main-content").hovercards({ linkify: false });
});
</script>Now all of the @username mentions in #main-content won’t be automatically linkified. But what if we want a hovercard on an entire element, not just the username itself? Use:
<a href="http://twitter.com/artisantalent class="username-mention">Follow @ArtisanTalent on Twitter!</a>The infer option allows you to trigger a Hovercard for an entire element. This will also refrain from calling the linkifyUsers method, so it’s best to use it on a class of links, like so:
<script type="text/javascript">
twttr.anywhere(function (T) {
T("a.username-mention").hovercards({
infer: true
});
});
</script>You can even specify a Hovercard be triggered if the username is part of the element’s attributes (like title), instead of the text itself. Like infer, this username method also implicitly does not call linkifyUsers. This works like so:
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#section>img").hovercards({
username: function(node) {
return node.alt;
}
});
});
</script>In this case, an image with the username in the alt attribute will be given a Hovercard. If you want to mix in the default Hovercard behavior with some of this more specific behavior, you can just call the hovercards method more often! Here we are:
<script type="text/javascript">
twttr.anywhere(function (T) {
T.hovercards();
T("#sidebar a.username-mention").hovercards({
username: function(node) {
return node.title;
}
});
});
</script>The above example will linkify & add Hovercards to every @username mention, but when it encounters any links with class username-mention in #sidebar, it will look for the title attribute and add a Hovercard for that instead.
Lastly, you can set up Hovercards to be expanding by default. Normally, you hover over an @username metnion, and it gives you a little info, and then you can click a “more” button to expand the Hovercard, revealing the user’s bio & latest tweet. However, you can also set up the Hovercard(s) so that they are always in expanded state, as if the “more” button has already been clicked. Here’s what you need:
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#main").hovercards({ expanded: true });
});
</script>With the above code, every @username mention in #main will be in the expanded state by default.
That’s it for now, we’ll check out some more @Anywhere capabilities next time!
Tags: twitter
