Tag Archives: jquery

Posted on
by

Hovercards are business card like popups which appear when your mouse hovers over, for example, a user name.

They’re useful to display summary information without the requirement for the visitor to click on a link and navigate away from the current page.

I needed this functionality for a couple of client sites, so I put together a quick Elgg plugin to implement hovercard functionality via the very cool hovercard.js library written by Prashant Chaudhary.

Out of the box, the plugin provides hovercard functionality for most occurrences of a user’s name in user listings and the site river. I didn’t want to get too carried away, since I was in a hurry and I didn’t want to override every user view in Elgg! However, you should be able to see how I used the view system to provide a hovercard view on the data.

Usage

Checkout the repository and install it into your mod directory as elgg-hovercard, and activate it in the usual way.

The plugin makes use of the Elgg view system and creates a hovercard data view on user objects, accessible by appending a view=hovercard onto any profile URL. This endpoint returns a JSONP object containing basic hovercard profile data, which is automatically rendered by hovercard.js.

The simplest way to display a hovercard for a user is to use this endpoint via the data-hovercard attribute, e.g.

<a class="hovercard-custom" data-hovercard="<?= $user->getUrl(); ?>?view=hovercard" href="<?= $user->getUrl(); ?>"><?= $user->name; ?></a>

This code (which I have highlighted the important parts of), will cause the library to fetch the hovercard data for the given user via ajax.

To provide further customisation, or to display hovercards for things other than user details, you can take advantage of the output/hovercard view, passing it the contents of the hovercard and a jquery style selector to bind to.

Anyway, have a play!

» Visit the project on Github…

Posted on
by

JQueryJQuery is a popular, fantastically useful, and not to mention powerful, Javascript library used by many web applications around the Internet.

The current version of it is 1.9.1, but unfortunately the latest release of Elgg is still tied to a frankly ancient version (1.6).

Recently, I needed a more recent version of jquery in order to take advantage of the Bootstrap framework. So I put together a quick plugin which lets you easily use the latest version of JQuery in Elgg.

This saved me from a number of headaches, and I hope it’ll do the same for you.

Enjoy!

» Visit the project on Github…

Posted on
by

It’s a brand new year!

Well, it’s been a new year for a little while actually, but 2013 has been a busy one so far. I’ve been working hard on some interesting things, but I still managed a sneaky skiing trip.

2012 was an awesome year; I welcomed it in rawkus style with my former housemates, and then a few days later, after the hangover had cleared of course, flew my first passengers as a newly qualified pilot!

I went to birthday parties, ate some great food, climbed, and enjoyed the company of some great people. I played Capoeira with my group at the Oxford Olympic Torch event, but otherwise managed to miss the worst of the Olympics by camping in the Czech wilderness followed by some epic climbing in Italy.

I have some big plans in motion for 2013, hopefully I’ll be able to dial up the awesome a few more notches! I want to finally get to grips with a foreign language, and ideally live abroad for a while in the native country. I want to progress my flying career in some way, advance to more complicated aircraft or perhaps do an aerobatic qualification. I intend to see more of the world, and climb more mountains (both figuratively and literally!).

Work wise, I’m working on a few exciting things (some of which will see the light of day really soon). As an FYI, I’m always interested to hear about your projects, especially if you need some technical and strategic muscle to help you!

Lets go!