jDrawer

1. Unzip jDrawer.zip.

2. Copy jDrawer folder and jDrawerTest.html into document root folder (into the root or in a subfolder), for example: C:/wamp/www/ or

C:/wamp/www/mysubfolder/

1. Open your browser and enter the url to access to test.html for example: http://localhost/jDrawerTest.html or http://localhost/mysubfolder/jDrawerTest.html

2. Making jDrawerTest.html:

Version 2.0:

Include this code into your head tag:

<script type="text/javascript" src="jDrawer/jDrawerInit.js"></script>

Call jDrawer function to insert the social tabs : Include this code before close body tag:

$(document).ready(function() 
{
    $.jDrawer(
    {
        align : "top",/* drawer alignment: left,right,top,bottom*/
        twitter : true,/* show twitter tab*/
        facebook : false,/*show facebook tab*/
        youtube : false,/*show youtube tab*/
        twitter_screen_name : "alexanderwebdev",/*Twitter screen name*/
        twitter_count : 5,/*Maximum of Tweets to show in tab*/
        height:300
    });
    $.jDrawer(
    {
        align : "left",
        twitter : false,
        facebook : false,
        youtube : true,
        youtube_user_name : "acruzcontreraswebdev",
        height:600
    });

});

Version 1.x:

Include this code into your head tag:

<link href="jDrawer/jDrawer.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jDrawer/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jDrawer/jDrawer.js"></script>

Include divs to render tabs:

<div class="drawerleft"></div>
<div class="drawerright"></div>

Call jDrawer function from the object where social tabs will be inserted (In this example are two divs: div.drawerleft and div.drawerright): Include this code before close body tag:

$(document).ready(function() 
{
    $(".drawerright").jDrawer(
    {
        align : "right",/* drawer alignment: left,right*/
        twitter : true,/* show twitter tab*/
        facebook : true,/*show facebook tab*/
        youtube : false,/*show youtube tab*/
        twitter_screen_name : "alexanderwebdev",/*Twitter screen name*/
        twitter_count : 5,/*Maximum of Tweets to show in tab*/
        facebook_profile_id : "alexander.webdeveloper",/*facebook profile id or profile alias*/
        height:300
    });
    $(".drawerleft").jDrawer(
    {
        align : "left",
        twitter : false,
        facebook : false,
        youtube : true,
        youtube_user_name : "acruzcontreraswebdev",
        height:600
    });

});

1. You should be able to view socialnetworks tabs.

View jDrawer 2.0 Install