JavaScript

        var obj = document.getElementById('fullScreenContainer');

        // Activate fullscreen
        if ((document.fullScreenElement && document.fullScreenElement !== null) ||
        (!document.mozFullScreen && !document.webkitIsFullScreen)) {
            if (obj.requestFullScreen) {
                obj.requestFullScreen();
            } else if (obj.mozRequestFullScreen) {
                obj.mozRequestFullScreen();
            } else if (obj.webkitRequestFullScreen) {
                obj.webkitRequestFullScreen();
            }
        }else {
            // Cancel FullScreen
            if (document.cancelFullScreen) {
                document.cancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }

        }

The fullScreenContainer is the element id which you want to show in fullscreen mode. In Chrome the content will automatically comes to the center, but on Firefox it doesn’t.

View Demo

VIEW DEMO      DOWNLOAD       GIT

You need to create a Twitter Application and set the “Read and Write” permission in the settings tab.

Twitter OAuth is dealing with tokens and scecret keys, it doesn’t need username or passwords.
So Copy the CONSUMER_KEY and CONSUMER_SECRET from the Application.

If we want to get all details of the user, we need to Authenticate the user to the Twitter App.

STEP: 1

We pass the CONSUMER_KEY and CONSUMER_SECRET to the TwitterOAuth Class to get the Authorize.

$twitterConnect = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET);//Will establish the connection with Twitter using KEYS

And the 2nd thing is, need a Request Token to generate the Authorize URL.

  $_SESSION['twitter_oauth'] = $twitterToken = $twitterConnect->getRequestToken(CALLBACK_URL);

The CALLBACK_URL is optional, but if you leave this as EMPTY, the CALLBACK_URL from the Twitter Application will be use.
Note: If there is no CALLBACK_URL present in the Twitter App or in the Code, it will not work.
The $_SESSION['twitter_oauth'] used for the future reference.
$twitterToken is an array, which contains two values, oauth_token and oauth_token_secret
We will pass the $twitterToken to the next function
ie

 $twitter_login_url = $twitterConnect->getAuthorizeURL($twitterToken, true);

To get the Login URL.

You can use this url in the Sign In With Twitter link . like <a href="<?=$twitter_login_url?>">Sign in with Twitter </a>

So the user is about to login the with Twitter. Once he/she press the button it will redirected to the Twitter’s Auhorization page.
If the user completed the login process successfuly on Twitter, it will redirected to our site, ie the url of the CALLBACK_URL
Twitter add a url param oauth_token along with the callback url, actualy we dont use it anywhere, but we use it for the successful login.

STEP 2:

The next step is to generate the access tokens using the $twitterToken ie oauth_token and oauth_token_secret.
Here we are establising a new Twitter connection using the following temperory credentials

 $twitterConnect = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['twitter_oauth']['oauth_token'], $_SESSION['twitter_oauth']['oauth_token_secret']);

with this $twitterConnect object we request access token

 $_SESSION['twitter_access'] = $token_credentials = $twitterConnect->getAccessToken($_REQUEST['oauth_verifier']);

$token_credentials is also an array with two keys, oauth_token and oauth_token_secret the names are same as above
but here it know as access tokens.

You can save this access tokens in database or session variable to the feature use. Once you have this access tokens,
you dont need to login the user each time. You can post or access informations without login into Twitter.
This key is valid until the user press Reinvoke button from the users App settings panel.

Note: Dont call this step again, because the Request Tokens valid only once. That is the reason we are redirecting after the success.

STEP 3:

To get the user details, using the
CONSUMER_KEY, CONSUMER_SECRET and ACCESS TOKENS

$twitterConnect = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['twitter_access']['oauth_token'], $_SESSION['twitter_access']['oauth_token_secret']);
$content = $twitterConnect->get('account/verify_credentials');

So the final code looks like

Config.php

@session_start();
include('config.php');

if( isset( $_SESSION['twitter_oauth']['oauth_token'] ) && isset( $_REQUEST['oauth_token'] ) ) {
	$twitterConnect = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['twitter_oauth']['oauth_token'], $_SESSION['twitter_oauth']['oauth_token_secret']);
	$_SESSION['twitter_access'] = $token_credentials = $twitterConnect->getAccessToken($_REQUEST['oauth_verifier']);

	$_SESSION['twitter_status'] = true;
	header('Location: twitter_connect.php');

}

callback.php

@session_start();
include('config.php');

if( isset( $_SESSION['twitter_oauth']['oauth_token'] ) && isset( $_REQUEST['oauth_token'] ) ) {
	$twitterConnect = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['twitter_oauth']['oauth_token'], $_SESSION['twitter_oauth']['oauth_token_secret']);
	$_SESSION['twitter_access'] = $token_credentials = $twitterConnect->getAccessToken($_REQUEST['oauth_verifier']);

	$_SESSION['twitter_status'] = true;
	header('Location: twitter_connect.php');

}

twitter_connect.php

@session_start();
include('config.php');

// Clear all Twitter session
if ($_REQUEST['logout'] == true) {
	unset( $_SESSION['twitter_oauth'] );
	unset( $_SESSION['twitter_access'] );
	unset( $_SESSION['twitter_status'] );
}

if( !isset($_SESSION['twitter_oauth']['oauth_token']) || $_SESSION['twitter_status'] == false && !isset( $_REQUEST['oauth_token'] ) ) {

	$twitterConnect = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET);
	$_SESSION['twitter_oauth'] = $twitterToken = $twitterConnect->getRequestToken(CALLBACK_URL);
	$twitter_login_url = $twitterConnect->getAuthorizeURL($twitterToken, true);
	$_SESSION['twitter_status'] = false;
}

// If it was a successfull authentication
if( isset($_SESSION['twitter_access']['oauth_token']) && isset($_SESSION['twitter_access']['oauth_token_secret']) ) {

	$twitterConnect = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['twitter_access']['oauth_token'], $_SESSION['twitter_access']['oauth_token_secret']);
	$content = $twitterConnect->get('account/verify_credentials');

}

if ( $twitter_login_url ) {

	echo "<a href='{$twitter_login_url}' ><img src='sign-in-with-twitter-l.png' /></a>";

}

Screens

I have added some custom fields to the add_meta_box and hooked a function to edit_post, publish_post, save_post. Everything is working fine, but unfortunately the autosave destroy all the efforts. I didn’t find any hook to control autosave.

Solution:

I just added a if condition to my hook function. Many of them suggest to increase the autosave time to months/years etc. but I prefer this

This is the condition a simple hack.

if ($_REQUEST['action'] == 'autosave') return;

So final script looks like below

PHP Script:

add_action( 'save_post', 'save_request_data' );
add_action( 'edit_post', 'save_request_data' );

function save_request_data() {
	global $post;
        // Will return if it an Ajax Autosave action. We are safe now
	if ($_REQUEST['action'] == 'autosave') return;

	// ALL YOUR CODES COMES HERE...
}

Hope this will solve your problem with autosave. Thank you

Previous Version you can find here. and also applicable for this (Facebook/Twitter style Scrollbar Using jQuery and CSS).

View Demo

Here am updating the complete JavaScript.

JavaScript

$(document).ready(function(){

    var _offsetY = 0,
    _startY = 0,
    scrollStep = 10,
    isScrollBarClick = false,
    contentDiv,
    scrubber,
    scrollHeight,
    contentHeight,
    scrollFaceHeight,
    initPosition,
    initContentPos,
    moveVal,
    scrubberY = 0;

    element = document.getElementById("updateHolder");
    if (element.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        element.addEventListener('DOMMouseScroll', wheel, false);
    /** IE/Opera. */
    element.onmousewheel = document.onmousewheel = wheel;

	// To resize the height of the scroll scrubber when scroll height increases.
	setScrubberHeight();

	contentDiv = document.getElementById('updateContainer');

	scrubber = $('#updateScollScrubber');

	scrollHeight = $('#updateScollBar').outerHeight();

	contentHeight = $('#updateContent').outerHeight();

	scrollFaceHeight = scrubber.outerHeight();

    initPosition = 0;

	initContentPos = $('#updateHolder').offset().top;

	// Calculate the movement ration with content height and scrollbar height
	moveVal = (contentHeight - scrollHeight)/(scrollHeight - scrollFaceHeight);

	$('#updateHolder').bind('mousewheel', wheel);

	$("#updateScollScrubber").mouseover(function() {
		// Enable Scrollbar only when the content height is greater then the view port area.
		isScrollBarClick = false;
		if(contentHeight > scrollHeight) {
			// Show scrollbar on mouse over
			$(this).animate({opacity: 1});
			scrubber.bind("mousedown", onMouseDown);
		}
	}).mouseout(function() {
	    isScrollBarClick = false;
		if(contentHeight > scrollHeight) {
			// Hide Scrollbar on mouse out.
			$(this).animate({opacity: 0.25});
			$('#updateHolder').unbind("mousemove", onMouseMove);
		    scrubber.unbind("mousedown", onMouseDown);
		}
	});

    $("#updateScollBar").mousedown(function(){
        isScrollBarClick = true;
    }).mouseout(function(){
        isScrollBarClick = false;
    }).mouseup(function(event) {
        if( isScrollBarClick == false )
             return;
        if ((event.pageY - initContentPos) > (scrollHeight - scrubber.outerHeight())) {
            scrubber.css({top: (scrollHeight - scrubber.outerHeight())});
        }else{
            scrubber.css({top: (event.pageY - initContentPos) - 5});
        }
        $('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
    });

	function onMouseDown(event) {
		$('#updateHolder').bind("mousemove", onMouseMove);
		$('#updateHolder').bind("mouseup", onMouseUp);
		_offsetY = scrubber.offset().top;
		_startY = event.pageY + initContentPos;
		// Disable the text selection inside the update area. Otherwise the text will be selected while dragging on the scrollbar.
		contentDiv.onselectstart = function () { return false; } // ie
		contentDiv.onmousedown = function () { return false; } // mozilla
	}

	function onMouseMove(event) {

        isScrollBarClick = false;
		// Checking the upper and bottom limit of the scroll area
		if((scrubber.offset().top >= initContentPos) && (scrubber.offset().top  (initContentPos + scrollHeight - scrollFaceHeight)) {
				scrubber.css({top: (scrollHeight-scrollFaceHeight-2)});
				$('#updateContent').css({top: (scrollHeight - contentHeight + initPosition)});
			}
			$('#updateHolder').trigger('mouseup');
		}
	}

	function onMouseUp(event) {
		$('#updateHolder').unbind("mousemove", onMouseMove);
		contentDiv.onselectstart = function () { return true; } // ie
		contentDiv.onmousedown = function () { return true; } // mozilla
	}

	function setScrubberHeight() {
		cH = $('#updateContent').outerHeight();
		sH = $('#updateScollBar').outerHeight();
		if(cH > sH) {
			// Set the min height of the scroll scrubber to 20
			if(sH / ( cH / sH ) < 20) { 				$('#updateScollScrubber').css({height: 20 }); 			}else{ 				$('#updateScollScrubber').css({height: sH / ( cH / sH ) }); 			} 		} 	} 	function onMouseWheel(dir) {         scrubberY = scrubber.offset().top + (scrollStep * dir) - initContentPos;         if ((scrubberY) > (scrollHeight - scrubber.outerHeight())) {
            scrubber.css({top: (scrollHeight - scrubber.outerHeight())});
        }else {
            if(scrubberY < 0) scrubberY = 0;
            scrubber.css({top: scrubberY});
        }
        $('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
	}

	/** This is high-level function.
	 * It must react to delta being more/less than zero.
	 */
	function handle(delta) {
	        if (delta < 0) {
			    onMouseWheel(1);
	        }
	        else {
			    onMouseWheel(-1);
	        }
	}

	/** Event handler for mouse wheel event.
	 */
	function wheel(event){
	        var delta = 0;
	        if (!event) /* For IE. */
	                event = window.event;
	        if (event.wheelDelta) { /* IE/Opera. */
	                delta = event.wheelDelta/120;
	        } else if (event.detail) { /** Mozilla case. */
	                /** In Mozilla, sign of delta is different than in IE.
	                 * Also, delta is multiple of 3.
	                 */
	                delta = -event.detail/3;
	        }
	        /** If delta is nonzero, handle it.
	         * Basically, delta is now positive if wheel was scrolled up,
	         * and negative, if wheel was scrolled down.
	         */
	        if (delta)
	                handle(delta);
	        /** Prevent default actions caused by mouse wheel.
	         * That might be ugly, but we handle scrolls somehow
	         * anyway, so don't bother here..
	         */
	        if (event.preventDefault)
	                event.preventDefault();
	        event.returnValue = false;
	}

});

You can find the application here
If you want to use this in your web site, just copy the following code and paste anywhere on your web page.

I just created this for fun, the disadvantages are, It can’t Identify the Twitter logged in user, because of that follow icon always show in the same color.

I will add more feature when Twitter publish those apis.

Code

<div class="twitter-follow-box"></div>
<script type="text/javascript" src="http://apps.tutorboy.com/twitterfollowbox/twitterfollowscript.js"></script>
<script type="text/javascript">
TwitterBox.Init({
username : 'midhundevasia',
width : 350,
height : 244,
header : true,
});
</script>

// IDs and CLASS
$('#my_id, .css_class, .className, #another_id');
// HTML Tags
$('body, h1');

JavaScript

function $(selectors) {
	var result = new Array();
	if(!document.getElementsByTagName) return result;
	// Removing unwanted spaces
	selectors = selectors.replace(/\s*([^\w])\s*/g,"$1");
	// Extracting the selectors from the param
	selectors = selectors.split(",");
	// Store all dom elements
	var elements = document.getElementsByTagName('*');
	// Parse the selectors list
	for(var i = 0; (selector = selectors[i]) != null ; i++) {
		// If ID
		if(selector.indexOf("#") == 0) {
			selector = selector.split("#");
			result[result.length] = document.getElementById(selector[1]);
		}
		// If CLASS
		else if(selector.indexOf(".") == 0) {
			selector = selector.split(".");
			// If the browser support HTML 5
			if(document.getElementsByClassName) {
				result[result.length] = document.getElementsByClassName(selector[1]);
			}
			// for browsers such as IE
			else {
				var hasClassName = new RegExp("(?:^|\\s)" + selector[1] + "(?:$|\\s)");
				var element;
				// Parse all DOM elements
				for(var j = 0; (element = elements[j]) != null; j++ ) {
					if(element.className && element.className.match(hasClassName)) {
						result[result.length] = element;	

					}
				}
			}
		}
		// If tag
		else {
			result[result.length] = document.getElementsByTagName(selector);
		}
	}
	return result;
}

Finally I tried to trim all \r from the file content then use preg_split function to split by \n. This works fine for me.

PHP Code

$file_content = file_get_contents('readme.txt');
// Removing all carriage returns
$file_content = preg_replace("/\r/", "", $file_content);
// Split lines with new line
$lines = preg_split("/\n/", $file_content);

If you have any other better solution for this problem, please share with me.

1. The Scrollbar shows only when the content is greater thatn the view port(ie content height).

2. The scroll scrubber height will change when the height of the scroll length increase/decrease.

3. No Mouse Wheel scroll features.

See also: Facebook/Twitter style Scrollbar Using jQuery and CSS

View Demo

Step 1:

<div id="updateHolder">
    <div id="updateContainer">
    <div id="updateContent">
    <!-- You can add all your contents here -->
     Dummy Text 
    </div>
    <!--// don't remove this: the scrollbar and scrollscrubber place holder -->
    <div id="updateScollBar">
        <div id="updateScollScrubber">
        </div>
    </div>
    <!-- scrollbar end //-->
    </div><!-- end of updateContainer //-->
</div><!-- end of updateHolder //-->

Step 2:

Copy paste the CSS to your style sheet. For customization please edit the width and height in the specified lines.

#updateHolder {
    width: 300px;  /* <= For Width: change the width value */
    color: #333;
    margin-top: 10px;
    overflow: hidden;
    border:1px solid #CCCCCC;
}

#updateContainer {
    background-color: white;
    position: relative;
    cursor: pointer;

}

#updateContent {
    background: #fff;
    position: absolute;
    padding-right: 12px;
}

#updateScollBar {
    background: #F2F2F2;
    border-left: 1px solid #DADADA;
    position: absolute;
    width: 10px;
    right: 0;
    bottom: 0;
    cursor: default;
    zoom: 1;
    filter: alpha(opacity=25); /* For IE8 and earlier */
    opacity: 0.25;
}

#updateScollScrubber {
    background-color: 909090;
    width: 9px;
    height: 100px;
    position: absolute;
    border-left:1px solid #676767;
    border-top:1px solid #676767;

}

#updateScollBar, #updateContainer, #updateHolder {
    height: 500px; /* <= For Height: change the height value */
}

Step 3:

Add the following jQuery script to your header or footer section.

$(function(){

	_offsetY = 0;
	_startY = 0;

	// To resize the height of the scroll scrubber when scroll height increases.
	setScrubberHeight();

	var contentDiv = document.getElementById('updateContainer');
	scrubber = $('#updateScollScrubber');
	scrollHeight = $('#updateScollBar').outerHeight();
	contentHeight = $('#updateContent').outerHeight();
	scrollFaceHeight = scrubber.outerHeight();

	initPosition = 0;
	initContentPos = $('#updateHolder').offset().top;
	// Calculate the movement ration with content height and scrollbar height
	moveVal = (contentHeight - scrollHeight)/(scrollHeight - scrollFaceHeight);

	$("#updateScollBar").mouseenter(function() {
		// Enable Scrollbar only when the content height is greater then the view port area.
		if(contentHeight > scrollHeight) {
			// Show scrollbar on mouse over
			$(this).animate({opacity: 1});
			scrubber.bind("mousedown", onMouseDown);
		}

	}).mouseleave(function() {

		if(contentHeight > scrollHeight) {
			// Hide Scrollbar on mouse out.
			$(this).animate({opacity: 0.25});
			$('#updateHolder').unbind("mousemove", onMouseMove);
			  scrubber.unbind("mousedown", onMouseDown);
		}
	});

	function onMouseDown(event) {
		$('#updateHolder').bind("mousemove", onMouseMove);
		$('#updateHolder').bind("mouseup", onMouseUp);
		_offsetY = scrubber.offset().top;
		_startY = event.pageY + initContentPos;
		// Disable the text selection inside the update area. Otherwise the text will be selected while dragging on the scrollbar.
		contentDiv.onselectstart = function () { return false; } // ie
		contentDiv.onmousedown = function () { return false; } // mozilla
	}

	function onMouseMove(event) {

		// Checking the upper and bottom limit of the scroll area
		if((scrubber.offset().top >= initContentPos) && (scrubber.offset().top <= (initContentPos+scrollHeight - scrollFaceHeight))) {
			// Move the scrubber on mouse drag
			scrubber.css({top: (_offsetY + event.pageY - _startY)});
			// Move the content area according to the scrubber movement.
			$('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
		}else{
			// Reset when upper and lower limits are excced.
			if(scrubber.offset().top <= initContentPos){
				scrubber.css({top: 0});
				$('#updateContent').css({top: 0});
			}

			if(scrubber.offset().top > (initContentPos + scrollHeight - scrollFaceHeight)) {

				scrubber.css({top: (scrollHeight-scrollFaceHeight-2)});
				$('#updateContent').css({top: (scrollHeight - contentHeight + initPosition)});
			}

			$('#updateHolder').trigger('mouseup');
		}

	}

	function onMouseUp(event) {
		$('#updateHolder').unbind("mousemove", onMouseMove);
		contentDiv.onselectstart = function () { return true; } // ie
		contentDiv.onmousedown = function () { return true; } // mozilla
	}

	function setScrubberHeight() {
		cH = $('#updateContent').outerHeight();
		sH = $('#updateScollBar').outerHeight();

		if(cH > sH) {
			// Set the min height of the scroll scrubber to 20
			if(sH / ( cH / sH ) < 20) {
				$('#updateScollScrubber').css({height: 20 });
			}else{
				$('#updateScollScrubber').css({height: sH / ( cH / sH ) });
			}
		}
	}

});

View Demo

The scroll scrubber height will change when the height of the content increases, and the minimum height of the scrubber is 20px. The scrollbar will show when the mouse moves over the content area.

Step 1:

Just keep the structure of the HTML element as same as here. Put all your contents in the DIV called <div id="updateContent">

<!--// Update Holder -->
	<div id="updateHolder">
            <div id="updateContainer">
			<div id="updateContent">
			<!-- //// You can add all your contents here ////-->
			 </div>
			<!--// don't remove this: the scrollbar and scrollscrubber place holder -->
			<div id="updateScollBar">
				<div id="updateScollScrubber">
				</div>
			</div>
			<!-- scrollbar end //-->
            </div><!-- end of updateContainer //-->
        </div><!-- end of updateHolder //-->

Step 2:

Add the CSS to your style file, and edit the Width and Height in the specified area.

 #updateHolder {
		background-color: green;
		width: 300px;  /* <= For Width: change the width value */
		color: #333;
		margin-top: 10px;
		overflow: hidden;
	    }

	    #updateContainer {
		background-color: white;
		position: relative;
		cursor: pointer;
	    }

	    #updateContent {
		width: 100%;
		background: #F2F4F8;
		position: absolute;
	    }

	    #updateScollBar {
		background: none;
		position: absolute;
		width: 10px;
		right: 0;
		bottom: 0;
		cursor: default;
	    }

	    #updateScollScrubber {
		display: none;
		background-color: black;
		zoom: 1;
		filter: alpha(opacity=40); /* For IE8 and earlier */
		opacity: 0.4;
		width: 8px;
		height: 100px;
		-moz-border-radius: 7px; /* Firefox */
		-webkit-border-radius: 7px; /* Safari, Chrome */
		border-radius: 7px; /* CSS3 */
		position: absolute;
	    }

	    #updateScollBar, #updateContainer, #updateHolder {
		height: 500px; /* <= For Height: change the height value */
	    }

Step: 3

Add the following jQuery script any where on the html page.

$(function(){

	_offsetY = 0;
	_startY = 0;

	// To resize the height of the scroll scrubber when scroll height increases.
	setScrubberHeight();

	var contentDiv = document.getElementById('updateContainer');
	scrubber = $('#updateScollScrubber');
	scrollHeight = $('#updateScollBar').outerHeight();
	contentHeight = $('#updateContent').outerHeight();
	scrollFaceHeight = scrubber.outerHeight();

	initPosition = 0;
	initContentPos = $('#updateHolder').offset().top;
	// Calculate the movement ration with content height and scrollbar height
	moveVal = (contentHeight - scrollHeight)/(scrollHeight - scrollFaceHeight);

	$("#updateContainer").mouseenter(function() {
		// Enable Scrollbar only when the content height is greater then the view port area.
		if(contentHeight > scrollHeight) {
			// Show scrollbar on mouse over
			scrubber.fadeToggle("fast");
			scrubber.bind("mousedown", onMouseDown);
		}

	}).mouseleave(function() {

		if(contentHeight > scrollHeight) {
			// Hide Scrollbar on mouse out.
			scrubber.fadeToggle("slow");
			$('#updateHolder').unbind("mousemove", onMouseMove);
			  scrubber.unbind("mousedown", onMouseDown);
		}
	});

	function onMouseDown(event) {
		$('#updateHolder').bind("mousemove", onMouseMove);
		$('#updateHolder').bind("mouseup", onMouseUp);
		_offsetY = scrubber.offset().top;
		_startY = event.pageY + initContentPos;
		// Disable the text selection inside the update area. Otherwise the text will be selected while dragging on the scrollbar.
		contentDiv.onselectstart = function () { return false; } // ie
		contentDiv.onmousedown = function () { return false; } // mozilla
	}

	function onMouseMove(event) {

		// Checking the upper and bottom limit of the scroll area
		if((scrubber.offset().top >= initContentPos) && (scrubber.offset().top  (initContentPos + scrollHeight - scrollFaceHeight)) {

				scrubber.css({top: (scrollHeight-scrollFaceHeight-1)});
				$('#updateContent').css({top: (scrollHeight - contentHeight + initPosition)});
			}

			$('#updateHolder').trigger('mouseup');
		}

	}

	function onMouseUp(event) {
		$('#updateHolder').unbind("mousemove", onMouseMove);
		contentDiv.onselectstart = function () { return true; } // ie
		contentDiv.onmousedown = function () { return true; } // mozilla
	}

	function setScrubberHeight() {
		cH = $('#updateContent').outerHeight();
		sH = $('#updateScollBar').outerHeight();

		if(cH > sH) {
			// Set the min height of the scroll scrubber to 20
			if(sH / ( cH / sH ) < 20) {
				$('#updateScollScrubber').css({height: 20 });
			}else{
				$('#updateScollScrubber').css({height: sH / ( cH / sH ) });
			}
		}
	}

});

View Demo

Add this PHP code at the end of functions.php file from the theme folder

<?php

if ( ! function_exists( 'breadcrumbs' ) ) :
function breadcrumbs() {

	$delimiter = '&rsaquo;';
	$home = 'Home';

	echo '<div xmlns:v="http://rdf.data-vocabulary.org/#" class="breadcrumb">';

	global $post;
	echo '	<span typeof="v:Breadcrumb">
 			<a rel="v:url" property="v:title" href="'.get_bloginfo('url').'">'.$home.'</a>
			</span> '; 

	$cats = get_the_category();
	if ($cats) {
	  foreach($cats as $cat) {
	  	echo $delimiter . "<span typeof=\"v:Breadcrumb\">
	    			<a rel=\"v:url\" property=\"v:title\" href=\"".get_category_link($cat->term_id)."\" >$cat->name</a>
	    		</span>";
	  }
	}

	$posttags = get_the_tags();
	if ($posttags) {
	  foreach($posttags as $tag) {
	  	echo $delimiter . "<span typeof=\"v:Breadcrumb\">
	    			<a rel=\"v:url\" property=\"v:title\" href=\"".get_tag_link($tag->term_id)."\" >$tag->name</a>
	    		</span>";
	  }
	}

	echo '</div>';

}
endif;

?>

The above code will generate the breadcrumb from the post categories and post tags values of the current post. The parent category will be show at the first then its child, and finally add if any tag presents.

Add the following function call in your single.php file.

<?php breadcrumbs(); ?>

Place this code above the the_title() function or below the_content() function calls.

Add the following CSS in you Style.css

/* BreadCrumbs CSS*/
.breadcrumb {
	font-size: 11px;
}
.breadcrumb a {
	color: gray;
	text-decoration: none;
}
.breadcrumb a:hover {
	color: #178A00;
}

So now your WordPress blog’s breadcrumb is Search Engine Optimized. You can see the results from your next post onward. Its so simple

Also See : SEO Friendly Breadcrumb Format