Fork me on GitHub

Fork hovercard and ddslick plugins on Github!

After being on my ToDo list for months now, it was finally time to host the hovercard and ddslick on Github! Lot of people were asking for this and many reached me with multiple updates to the plugins, my apologies to all for responding to their requests so late. A lot has been happening in last few months including me moving back to India! But I’m all settled and ready for some more action, will be adding a few more interesting plugins I’ve been working on! 

Following are links to Github repos:

ddslick: https://github.com/prashantchaudhary/ddslick

hovercard: https://github.com/prashantchaudhary/hovercard

Also, I’d like to thank you all for loving these plugins! Please continue to share your love and support by forking them on Github.

-PC

1 note

ddSlick - new plugin for Custom Drop Down with Images and Description

A friend of mine recently needed help in including images and description in HTML drop down list. Since it wasn’t possible with regular HTML <select> options, so I wrote some javascript to help him set up his custom drop down list, which I later converted into a jquery plugin of its own, named ddSlick!

ddSlick is a free jquery plugin to create a custom drop down list with images and description. The plugin:

  • Adds images and description to otherwise boring drop downs.
  • Uses JSON to populate the drop down options.
  • Uses Minimum css and no external stylesheets to download.
  • Supports callback functions on selection.
  • Works as good even without images or description!

ddSlick - drop down with images

Visit ddSlick plugin page for complete documentation and live demos

Happy Friday!
PC

1 note

Hovercard plugin release 2.0! Now with built in Twitter and Facebook hover cards

So far the initial release for Hovercard plugin has received a decent traction with increased traffic and page ranks. And now its time for another release (version 2.0) with fixes and updates based on user’s suggestions and feedbacks. 

What’s new with version 2.0:

  1. Built in Twitter card: (with follow button)
  2. Built in Facebook card: (with like button)

When hovered over the text, the hovercard emerges with the twitter or facebook profile for the hovered name. The username to be displayed can also be passed via plugin options. Click here to read more and view demo on how to use Twitter and Facebook hover cards.

What’s fixed:

  1. Hovercard attempts to adjusts itself to the available viewport width 
  2. Z-index issue with adjacent hovercards
  3. Minor CSS changes
6 notes

Use jQuery plugin with WordPress in 5 easy steps

Below are 5 steps to make any jquery plugin work with wordpress. I’ll use the hovercard plugin as an example, but these steps should be helpful with any plugin.

STEP 1:

Create a folder with the plugin name (i.e. Hovercard) in /wp-content/plugins directory.

STEP 2:

Copy all your jQuery plugin files like script, stylesheets, images etc. in this folder. In our case we only need hovercard.js Also create a file named init.php in the same folder. We’ll add some information to this file in next step.

STEP 3:

 Copy following information to init.php :

<?php
/*
Plugin Name: Simple yet sexy Hovercard
Plugin URI: http://designwithpc.com/post/9639968851/plugin-available-for-simple-and-sexy-hovercard
Description: Simple yet sexy hovercard with minimum CSS. Like the one used by Twitter. 
Version: 1.0 
Author: PC - Prashant Chaudhary
Author URI: http://designwithpc.com
License: Creative Commons Attribution-ShareAlike 
*/
wp_enqueue_script('jquery');
wp_enqueue_script('jquery.hovercard',WP_PLUGIN_URL.'/Hovercard/hovercard.js',array('jquery'),'1.0',1);
?>

Note: Make sure there are no whitespace before <?php and after ?>

The above information is specific to hovercard plugin. Don’t forget to replace this information if using for different plugin. WordPress reads this description to display plugin information on its dashboard.

STEP 4:

You should now see this plugin available in your WordPress dashboard:

Activate your plugin and you should be all set to go!

STEP 5: (For Hovercard plugin users)

To use this plugin in your WordPress post, give id (from HTML editor) to the text or label you want to apply hovercard on. 

To make sure there is no conflict with other js libraries, it is recommended to use 

jQuery(document).ready(function($){

//plugin code…

});

That is it!

3 notes

A bookmarklet to clean a web page from unwanted images and graphics.

Long time ago I wrote and shared this tiny script for personal use, which helped me to gracefully turn off any inappropriate images and graphics on the currently open website. And I think it’s worth sharing again with everybody on this design blog.

You can drag and drop this link — CleanIt!  — to your browser’s bookmarks toolbar and that’s it.

Demo: click here

0 notes

Plugin available for simple and sexy hovercard!

IMPORTANT UPDATE: Please visit the new hovercard plugin page. This plugin has a new home and all the documentation, demos, and updates are available there. No future updates will be made here. Thank you - PC.


After finishing up last post on simple yet sexy hovercard with minimum css I decided to wrap up its functionality into a plugin itself. So if you don’t want to do the extra work of showing and hiding details with your hovercard, this plugin is for you! 

Download: http://dl.dropbox.com/u/40036711/jquery.hovercard.js 

Live Demo: Live Demo for Hovercard jQuery plugin

Screenshot:


How to use, example: (Visit Hovercard plugin’s page for full documentation)

$("#some-id-for-name").hovercard({
    detailsHTML : 'your html mark up for the details, or even a simple string would do',
    width: 400,
    cardImgSrc: 'someImageToBeDisplayedWithCard.jpg',
    background: "#ffffff"
});

Remember don’t forget to reference the latest version of jquey from http://jquery.com/.

That’s it!

3 notes

Simple yet sexy hovercard with minimum CSS

Update: This hovercard is now available as a plugin too!


So you’ve seen and loved Twitter’s and Facebook’s hovercard, now its time to make one for your website! A hovercard is a way to show related information in card format when you hover over some username, text or a link. 

Lets build:

So you have a user and his bio that you want to display using hovercard. To add a further slickness to our design, instead of showing a new card we’ll just make the name fade into a detailed card (in place). The only trick with this approach is positioning:

  • Preview card - (position:relative):
    • Name - (position: relative, z-index: higher than details)
    • Details - (position: absolute)

Details are initially hidden and displayed (or loaded via ajax) on hover. The absolute positioned details will now fade in to a card with enough top padding i.e. 2em to overlay the name (with higher z-index) in card itself. You may either use jQuery to add fadein effect or straight forward CSS to toggle display.

HTML:

<span id="preview-card">
    <label class="name">Prashant Chaudhary</label>
    <span class="details">
        <img src="http://30.media.tumblr.com/avatar_d3eadb3e29f8_128.png" alt="PC"/>        
        Web developer. Loves UI/UX.<br/>
        Indianapolis IN<br/>
        <a href="#">http://callmepc.com</a>
    </span>
</span>

CSS:

#preview-card
{
    position:relative;            
}
.name
{    
    font-weight:bold;    
    position:relative;    
    z-index:100; /*greater than details, to still appear in card*/
}
.details
{            
    background:#fff ;    
    border:solid 1px #ddd;      
    position:absolute ;
    width:300px;
    left:-10px;
    top:-10px;
    z-index:50; /*less than name*/
    padding:2em 10px 10px; /*leave enough padding on top for the name*/   
    display:none;
}
.details img
{
    width:70px;    
    float:right;
    margin-top:-1em;
}

Hover on the name in this jsFiddle to view a live demo.

Some ways you can use hovercard to delight your users:

  1. Show Person bio, book author and price, etc.
  2. Offer a link preview before navigating.
  3. Edit in place options.
  4. Load related information with Ajax.
  5. Use it for ‘word-meanings’ and what not!
2 notes