Facebook Style Hovercard using JQuery and CSS

Facebook has a feature of displaying the hover card when you hover over a link of a user, page or a group. I always wondered how this could be done. I tried creating my own hover card feature like facebook and came up with this.

I used CSS to give facebook like feel to the hover card.

#hoverbox {
    background-color: white;
    border: solid 1px #BCBCBC;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    color: #666;
    font-size: 13px;
    width: 350px;
    height: 230px;
    overflow: hidden;
    position: absolute;
    word-wrap: break-word;
    z-index: 1202;
    display: none;
    margin-top: -10px;
}

#hoverbox img#cover {
    width: 100%;
    height: 62%;
    float: left;
}

#hoverbox img#profile {
    width: 90px;
    height: 90px;
    position:absolute;
    bottom:20%;
    left:3%;
    z-index: 1234;
    background-color: #FFFFFF;
    border: 3px solid #FFFFFF;
    border-radius:1px;
}

#hoverbox_name{
    font-size: 17px;
    position: absolute;
    top:50%;
    left: 35%;
    color:#FFFFFF;
}

#hoverbox_bottom{
    width:100%;
    height:18%;
    position:absolute;
    bottom:0px;
    background-color: #eee;
}

#fbstyle_button{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #EEEEEE;
    background-image: linear-gradient(#F5F6F6, #E4E4E3);
    border-color: #999999 #999999 #888888;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #FFFFFF inset;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font: bold 11px 'lucida grande',tahoma,verdana,arial,sans-serif;
    margin: 0;
    overflow: visible;
    padding: 0.3em 0.6em 0.375em;
    position: relative;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;  
}
a{
    font-size: 18px;
    margin-top:10px;
    margin-bottom:10px;
    text-decoration: none;
    color:#444;
    padding: 5px;
}  

The javsacript code is as below. The mouseenter event is caught when the user moves the mouse over the link or image and hover card is displayed at the position of the cursor. You can fetch the data from the database by making an ajax call if necessary.

            $(function(){
                $('#hoverbox').mouseleave(function(){
                    $('#hoverbox').hide();
                });
                
                $(".trigger").mouseenter(function(e){                  
                    //you can get picture addresses and the user_name from the database by making an ajax at this point.
                    //You can either store used id or the full link in an attribute in the hyperlink or photo.
                    var  cover_pic = "abc.jpg";
                    var  profile_pic = "xyz.jpg";
                    var  user_name = "Chethan";
                    var display_content =  '

' + user_name + '


';
                    
                    var pos = {
                        top: (e.clientY ) + 'px',
                        left: (e.clientX ) + 'px'
                    };
                    $('#hoverbox').css(pos).html(display_content).show(400);
                }).mouseleave(function(e) {
             if ($(e.relatedTarget).attr('id') != "hoverbox") {
                $('#hoverbox').hide();
            };
            });
            });            
       

Try Demo Download Script

Simple Database design to support multiple blogs in MySQL

MySQL is open source, very powerful and the most used database. In this post I explain how one can easily create a database in MySQL that can support multiple blog.

I have kept the design simple keeping only the elements absolutely necessary in order to keep the design simple to understand for those who are new to designing databases. The key idea here is to explain about the foreign keys in MySQL.

The central idea here is to maintain a proper relations among the tables. Relationship between the parent and child table is achieved by using foreign key constrain. It helps you in maintaining the structural integrity of the database, deletion of unnecessary data, joining of tables and gives you many more advantages.

The figure below explains the relationship among the tables.

You can download the script below.

Download the script

Editable Countdown timer for online events

The script  allows you to create a countdown timer for any events. In order to use this file in any of the application just edit the start and end dates of the event.

The code is written in JavaScript and PHP.

The timer counts down till the beginning of the event and again from the beginning till the end of the event.

Both start and end time are editable.

The code can be used in any online sites where one has to keep track of the time ( time constrained online events ). The code can also be used to show remaining days for a particular event for the visitors.

The event to be triggered when the countdown reaches zero can be edited.

Download the script   View Demo