YouTube broke 2 billion views a day just a couple of months back. I have played around with the API for two and a half years in various capacities, but I always stopped at the flash level of the chromeless player. Even though I managed to work through the AS3 implementation, I didn’t want to have to go through the pain of designing an interface for a player – I really wanted to play with the API itself.

 Enjoyed this post? Subscribe to our RSS feeds!

Overview of YouTube Custom Player

YouTube broke 2 billion views a day just a couple of months back. I have played around with the API for two and a half years in various capacities, but I always stopped at the flash level of the chromeless player. Even though I managed to work through the AS3 implementation, I didn’t want to have to go through the pain of designing an interface for a player – I really wanted to play with the API itself.

I recently took a look at the updates to the YouTube API, and I was excited to see that the embeddable player is now controllable through the JavaScript API. As a result I threw it into an example that I created showcasing my other plugin, the jQuery Radmenu plugin. I wanted to have access to the player state change (so I could tell when the player had finished playing the active video) and as a result was …

The jMediaelement script follows the principles of progressive enhancement. To achieve this it uses unobtrusive JavaScript- and feature detection technics (no browser sniffing or bad assumptions even for embedding plugins / COM objects like flash).

jme is an HTML5 audio / video development kit

Commercial Script >>Buy it Here

My Video Channel is a jQuery based script which makes it possible to display a list of YouTube videos from a specific user and play them in your own website. The reason behind the development of this script is really simple. It’s difficult to maintain videos on private servers because they take up too much space and are difficult to maintain. Through this script you could host your videos on the popular YouTube service and make them available on your own website.

The main features of this script are:

Smooth transitions
Simple and clean interface
Small JavaScript footprint
Progressive loading of video data
Configurable data page size
Fully CSS driven UI
Works in IE 6 , 7, 8, Firefox, Safari, Opera and Chrome
XHTML compliant…

jTranslate uses Ajax and Jquery to translate pages on the fly.

Adding / Removing languages takes literally a few seconds. Harnessing the power of the Google Tranlation API some jquery, with Ajax functionality… some swift css and cookies, this is possibly the fastest translator you will ever use.

 

jTranslate translates pages UltraFast >>Buy it Here

By clicking any language link/icon your submission is ajaxified via jquery and utilising cookies, the page is saved. Thus making revisits even faster.

Moreover as you move from page to page, the smart engine pre-translates that page for you in the language you last chose. So it is versatile and fast.

Having searched for a long long time , we decided to whip up this ultra lightweight script, and add some css trickery and jiggery pokery to enhance the functionality.…

Weather Widget – jQuery’fied

You are welcome to download this code, for FREE. Please leave all copyright notices intact, and please leave a link back to us here on your website.

…

Under Construction for WordPress

This template is a simple one page “Under Construction” WordPress theme.It has a nice interface and a great admin panel.You don`t have to modify code because you have all the stuffs inside the admin panel.All you have to do is to copy the theme inside wordpress and activate it and then change the data from the custom admin panel with your data.

About the Under Construction theme

It allows you to keep your users informed,while you work at your new wordpress website.The template has a jQuery slider containing 3 slides:one with your social pages,like Twitter or Facebook,one with a subscribe-by-mail form (works only with Feedburner) and another one with an area for writing what you do.I think it`s very useful.Now you have to convince yourself of its functionality.

…

FontPark is the largest portal noncommercial fonts . The current database has more than 70,000 fonts available for noncommercial and commercial use for PC Mac and Linux.

Free Fonts from FontPark

Similar to daFont you can define custom text and all the fonts will display what you typed to help you decide which font to get.
Simple, Free and Fast.

…

The basic idea behind Catch404 is that you perform an Ajax query for a URL and handle the response provided accordingly, so if its a 404 error, we handle this error specifically. Now because cross-domain 404 handling with jQuery is something that has often been problematic to correctly implement, achieving this isn’t as straight-forward as it should be.

So how does this plugin work

Instead, the plugin uses a neat trick using the Yahoo YQL Engine to access the URL for us which returns a HTML string (local URLs don’t require this hack) – thanks to James Padolsey and Christian Heillman for their work in this area. Depending on the contents of this string response, we’re then able to handle the error from the same page the user tried clicking out from. In my plugin, a modal window is used to render the error message and it’s here that you’re able to define whatever message, links or tips that you would like to offer your users regarding the 404. This offers a much better user experience than traditional 404 handling because rather than taking them somewhere with no content, you’ve now got the option to either present them with an alternative mirror or advice through the modal window.

…

This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

The animated Shine Effect

The idea behind a Shine Effect is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

Before we get into any code, lets go through the basic concepts behind the effect. We want to pass a light-beam (in this case an image simulating a shine) past our image when the user hovers over it. Now because I wanted to style up today’s gallery so that each thumbnail appeared to float out of it’s container, the steps to achieving the below animation are as follows:

1. Change the margins of the thumbnail element so that it floats away from it’s container
2. Set the background-position of your “shine” graphic to be –1 * (it’s total width)
3. Animate your background-position to value of the total width. Effectively we’re hiding the gloss off-stage and then animating it across the image.

…

Code Syntax Highlighter, for almost any website or Blog.SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the demo page.

Code Syntax Highlighter

SyntaxHighlighter Evolved allows you to easily post syntax-highlighted code to your site without having to escape the code or anything. It uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev to do the highlighting and supports all of the package’s parameters via shortcode attributes.

For a list of supported languages (most widely used languages are supported), see the WordPress.com support document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PHP Code Example</title>
</head>
<body>
	<h1>PHP Code Example</h1>

	<p><?php echo 'Hello World!'; ?></p>

	<p>This line is highlighted.</p>

	<div class="foobar">
		This	is	an
		example	of	smart
		tabs.
	</div>

	<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

Does it Work?
Yes it does

How does it work?

SyntaxHighlighter runs in the browser which means it doesn’t care what kind of server you have. In fact, SyntaxHighlighter can run locally on your computer without any web server at all and best of all it runs in virtually every modern web browser.

What does that mean for you?

That means you can install SyntaxHighlighter in your home page, blog, CMS, documentation CD or any other web page. It literally takes just a couple of minutes to get going and you will have beautifully highlighted code for all your users …