Hovercard
A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.What is so cool about this plugin!
- Smoothly fades the name into a hovered card (in place).
- Uses minimum css and no external stylesheets to download.
- Full control over html to be displayed.
- Comes with built in Twitter and Facebook hovercard.
- Supports callback functions on hover in and hover out.
- New! Auto adjust on the edges of viewport.
A hovercard comes handy when displaying Person bio, Book author and price, Loading related information with Ajax, Editing in place, and what not! Check out the following demos to see some of this stuff in action :)
- Display pdf in hovercard. http://jsfiddle.net/HVJU3/2/
- Display the content of a hidden div in hovercard. http://jsfiddle.net/HVJU3/2/
- Displaying multiple hovercards auto adjusting to the visible area.http://jsfiddle.net/callmepc/vHtxs/8/
- Using showCustomData to display local json data using plugin's social card format.http://jsfiddle.net/callmepc/XvGQ8/3/
How to use:
Following is a very basic example of how to use hovercard. You can also check out live demos with the source for each.
//html---
jQuery by is a cross-browser JS library
designed to simplify the client-side scripting of HTML. It was released
in January of 2006 at BarCamp NYC. Used by over 46% of the 10,000 most
visited websites, it's the most popular JavaScript library in use today.
//plugin script---
Plugin Options:
- width default value 300
Width in px for the hovercard i.e. 400, or 400px. - openOnLeft default value false
By default hovercard tries to expand towards right. And If there isn't enough available viewport on right, the plugin adjusts itself to open on left. Set 'openOnLeft' to true if want the hovercard to always open on left. See demo 2. - openOnTop default value false
By default hovercard tries to expand towards bottom. And If there isn't enough available viewport on below, the plugin adjusts itself to open on top. Set 'openOnTop' to true if want the hovercard to always open on top. See demo on jsFiddle. - cardImgSrc default value ''
The hovercard has an optional placeholder for one default image with a width of 70px. This image is positioned on top right for hovercard opening on right, and top left for hovercard opening on left. - detailsHTML default value ''
You can write any html markup (with your classes or ids) for your hovercard details. Or even a simple string would do! There will be no styles added by the plugin to this section of html. This gives you the flexibility to use the hovercard for anything you want. Make it an in place editor, use ajax, show tweets, flicker images etc. This is your html, do whatever! See demo 5 and 6. - background default value '#ffffff'
Background for your hovercard. You can use the css shorthand notation for setting backgrounds
i.e. background: #CCCCCC; or background: transparent url('your-background-image.jpg') no-repeat 0 0 scroll; - onHoverIn default value function () { }
Callback function when you hover in over the label (or any element) you are using hovercard for. See demo 4. - onHoverOut default value function () { }
Callback function when you are hovered out from the hovercard. See demo 4. - ---- Following options are available with version 2.0 and onwards ----
- showTwitterCard default value false
Displays a built in twitter card format for a twitter screenname. Maximum 150 twitter lookup per hour. The plugin only makes one twitter request (when first hovered) for each hovercard, avoiding subsequent lookups. See demo 8.
Note: When using TwitterCard or FacebookCard with detailsHTML, Twitter or Facebook profile data is added before details HTML. - twitterScreenName default value ''
Twitter screen name for the hovercard. See demo 8.
New!
Alternatively you can provide the username by adding a 'data-hovercard' attribute with the hovered label/link etc. Recommended when using multiple twitter/facebook hovercard on your page. Using data-hovercard will be as easy as this example:data-hovercard="chaudharyp"
Displays a built in facebook card format for a facebook username/pages/events etc. Works best with Facebook pages. See demo 7.
Facebook username/id/page/event/group/etc. for the hovercard. See demo 7.
Like twitterScreename, you can also provide the facebook username by adding a 'data-hovercard' attribute with the hovered label/link etc. Read data-hovercard details under twitterScreenName option.If no username/pagename/id/etc. is provided either by data-hovercard or in options, hovercard attempts to look up for hovered text.
You may now add your own custom data source and display the profile data using existing card format. Couple of ways to use this:
- Either provide the attribute data-hovercard with hovered label/link
to get the complete qualified url (including username) returning JSON.
//Required JSON format with both local or remote data source:
var myProfile = {
"name": "My profie name",
"image": "url_for_my_profile_image.jpg",
"link": "http://www.aboutmelink.com/",
"bio": "My bio or short description here",
"website": "http://mywebsite.com",
"email": "me@email.com"
}
$('.hoverme').hovercard({
showCustomCard: true,
customCardJSON: myProfile
});
Check this working example of showCustomCard
on jsFiddle. Provide the local json data to display with showCustomCard. See showCustomCard explanation on how to use this.
Add a delay in hovercard appearance. *Suggested by
Turn off the plugin's auto adjustment feature. *Requested by Ben Vernon
No comments:
Post a Comment