// 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

Search "Generate Strong Passwords with Wolfram" in Google

Ok, lets come to the point. Google suggested to use the following format to identify the breadcrumbs more easily. Here I’m using the simplest version of the format but you can find more here. By just adding some xmlns and typeof will gives you the better result.

<div xmlns:v="http://rdf.data-vocabulary.org/#" class="breadcrumb">
	<span typeof="v:Breadcrumb">
	<a rel="v:url" property="v:title" href="http://articles.tutorboy.com">Home</a>
	</span>
	&rsaquo;
	<span typeof="v:Breadcrumb">
		<a rel="v:url" property="v:title" href="http://articles.tutorboy.com/category/twitter/">Twitter</a>
	</span>
	&rsaquo;
	<span typeof="v:Breadcrumb">
		<a rel="v:url" property="v:title" href="http://articles.tutorboy.com/topics/bookmarklet/">Bookmarklet</a>
	</span>
	&rsaquo;
	<span typeof="v:Breadcrumb">
		<a rel="v:url" property="v:title" href="http://articles.tutorboy.com/topics/twitter/">Twitter</a>
	</span>
</div>

So the output of the above format will be like below.

Try the following tags and attributes in your existing breadcrumb code and test it here no need to wait for the next Google Crawl ,

Then just goto http://www.meebo.com/messenger and login to your messenger.
Meebo is web based chat client and support all chats/voice/video of major Messengers like Yahoo, GTalk, Facebook etc.

For Gmail Users

After successful login you can see your friends list over there. Put your mouse pointer over your friends name in the list, there you will find their email id, profile pic, status message and Resource:. The Resource: is the messenger name.

If he is in GTalk its shows like Talk.365464.
If he in in Android its looks like Android.3DP546d4.
Or he is in Nimbuzz, then Nimbuzz.3DP546d4.

Look at the various screen shots.

logged in from Nimbuzz chat client.

Hmm .. He is logged in from two diffrent chat clients, From Gamil and Android

Ooh ... its a Google Bot.

Logged in from Android

If you wish to tweet a webpage which your are currently reading, and there is no tweet or share button on that webpage, then Share Bookmarklet will makes it easy for you.
This method will works in all major browsers.
Follow these steps:

1. Drag “Share on Twitter” link to your bookmark bar

If you browser doesn’t allow you to drag the button, just do the following.

2. Right Click on the Bookmark Bar on your browser, and select New Bookmark

3. Fill Name field as “Share on Twitter”, and Location or URL field with the following script.

javascript:(function(){window.twttr=window.twttr||{};var%20D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());

Finally load any url and click on the Share on Twitter button. If the popup came as shown in the image its working fine. Otherwise check with you popup setting of the browser. It will works in all major browsers.

Steve Jobs wanted to destroy Android. “I will spend my last dying breath if I need to, and I will spend every penny of Apple’s $40 billion in the bank, to right this wrong … I’m going to destroy Android, because it’s a stolen product. I’m willing to go thermonuclear war on this” Steve Jobs. Jobs felt what Google had done with its successful Android operating system amounted to “grand theft”.

Eric Schmidt is an executive chairman of Google and former member of the board of directors of Apple Inc. Steve refused to consider any sort of settlement to the lawsuit Apple filed. “I don’t want your money” Jobs told Eric Schmidt as the two men met in a cafe in Palo Alto early last year. “If you offer me $5 billion, I won’t want it. I’ve got plenty of money. I want you to stop using our ideas in Android, that’s all I want.” Unsurprisingly no settlement was reached, and the legal battle between Android OEMs and Apple continues to this day.

[via: CNN, Associated Press]

Google’s Privacy Principles

[for more: goodtoknow]