Site Help

From the guys over at htmlDRIVE comes this neat lightweight jQuery button Image slideshow.

Just dive right in

…

Use this chromeless player to show your favourite Youtube movies on your page!
Or easily transform your Youtube movie into a HTML background!
This jquery component let you have a chromeless, customizable player for your favorite YT movies. It can be used as background of your HTML page.

You have to see it to believe it

Let your imagination run wild, using jQuery and chromeless YouTube api, rendering the video as your webpage background , we have had some serious fun playing with this. See what you can do.

Add this to your page header

<script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="inc/jquery.metadata.js"></script>
  <script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>

  $(function(){
    $(".movie").mb_YTPlayer();
  });

  </script>

Add this code to your body section

<a id="bgndVideo" href="http://www.youtube.com/watch?v=BsekcY04xvQ"
  class="movie {opacity:.8, isBgndMovie:{width:'window',mute:true}, ratio:'16/9',quality:'default'}">
  background movie
  </a>

…

For web developers and web designers who want to add their FONT to websites without using Standard Web Fonts and without making text as images.

Google Font API

Google has create a Google Font API for public use to give web developers and web designers the ability to use extra fonts on the web, not only the standard web fonts.

The major issue with Cufon is it renders the text as images

Follow up:

Because of this, i was trying to apply a custom font, to use it in my website. I mean by saying a custom font: upload font to my website to let visitors see this font. This custom font could be any font face, or font family.

CSS 2 and CSS 3 gave browsers the ability to download and use TTF file formats.
But as we all know Internet Explorer “IE” don’t accept that.

The CSS code used to apply the custom font as following:

<style type="text/css">
@font-face {
font-family: CustomFont;
src: local('CustomFont'), url('myFont.ttf') format('truetype');
}
</style>

The above code won’t work on any version of Internet Explorer. Why is that?
And how to use this custom font on the buggy Internet Explorer?

1) After searching how to use custom fonts on IEs, I found that Internet Explorer does not accept TTF file types. IEs only accept EOT file types.

2) IE 6 and IE 7 also don’t understand what “CLEARTYPE” means.
What to do then?

Internet Explorers (IE6, IE7 and IE8) accept EOT file types so, …

After the Deadline is open source technology. A common error is writing one word when you mean another. Most spell checkers assume any word in their dictionary is correct regardless of context. This means all misused word errors go unnoticed.

Our database has 1,500 commonly misused words. We check each use of these words for a better fitting word. If such a word is found, the misused word is marked as misspelled and we suggest what we think you meant.

Open Source Technology

We use artificial intelligence and natural language processing technology to find your writing errors and offer smart suggestions.

Our technology is available under the GNU General Public License.

Use After the Deadline

• In your browser: After the Deadline is available as a Firefox add-on and a Google Chrome extension. Now you can use our technology on any site.
• With your blog: For bloggers, After the Deadline is available as a WordPress plugin. You may also use our Intense Debate plugin to let your readers check their comments.
• On your site: Add our grammar, style, and spelling checker to your forms with our plugins for jQuery and TinyMCE. Our server techology is open source too.
• With OpenOffice.org Writer: Our grammar, style, and misused word checker is available as an OpenOffice.org extension.

Free for Personal Use

We run an After the Deadline server for your personal use. For commercial needs, we recommend using our free server software.…

Cloud is a jquery plugin that turns li in a list into moving clouds.

Documentation

Step 1 :

Cloud is requires simple ul and li markup tags as follows :

<div id="sky">
 <ul>
 <li><a href="#">Skipper</a></li>
 <li><a href="#">Kowalski</a></li>
 <li><a href="#">Private</a></li>
 <li><a href="#">Rico</a></li>
 </ul>
 </div>

Step 2 :

Since cloud is a plugin for jQuery, you’ll need to call the jQuery library first :

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Step 3 :

Include the cloud plugin in your page as follows :

<script type="text/javascript" src="jquery.cloud.js"></script>

If you are using custom stylesheets for cloud, you can call the stylesheets here or you can use the default stylesheet :

<link rel="stylesheet" href="jquery.cloud.css" type="text/css" />

Step 4 :

Add this code to your page to implement the cloud plugin :

<script type="text/javascript">
 $(document).ready(function(){
 $('#sky').cloud();
 });
 </script>

Configuration

Cloud supports 3 configuration options : duration, diagonal, and classes.

duration (integer) : the duration of the animation.
1000 is for 1 second. Larger values will make elements move slower.

diagonal (string) : set the path of elements in the Y-axis. ‘+’ will make elements move towards the top. ‘-’ make elements move to the bottom of the page.

classes (string array) : Cloud assigns random classes to elements. You can use this option to set the classes.
Example : “cloud-small,cloud-medium,cloud-big”

Sample

<script type="text/javascript">
 $(document).ready(function(){
 $('#sky').cloud({
 'duration' : 15000,
 'diagonal' : '+',
 'classes' : "cloud-small,cloud-medium,cloud-big"
 });
 });
 </script>

Notes

This plugin is still under active development. We haven’t tested on Internet Explorer yet. You can post comments …

Last night I was bored and started to work on a plugin for JQuery and never had any echo. Así nacio nightMode Plugin que es simplemente un script chiquitito que cambia el color de las letras y el fondo de pantalla. Thus was born nightMode Plugin which is simply a tiny script that changes the font color and background. Con eso logramos ahorrar un poco de energia apagando algunos pixeles de nuestra pantalla y además nos facilita la lectura. With that we can save some energy by turning off some pixels of our screen and we’ll ease of reading. Espero que les guste!! Hope you like it!

Letter colors and background can be modified

<a id="nightmode">Turn nightmode On/off</a>
 $(document).ready(function(){
 $('#nightmode').click(function(){
 $('body').nightMode();
   });
 });

Can be called via

var options={
 color: '#ffffff'
   }
 $('body').nightMode(options);

Demo: Click the Author link below, and then the lightbulb, top left

Author: TimerSys
Download: from here
jQuery direct: Repository

…

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image?

So how do you do that?

It is possible with jQuery and the fullscreenr plugin on this page! You can find a demonstration here and as you can see it works perfectly in all javascript enabled browsers. Note that Internet Explorer needs some extra code to enable the transparent png used for the raster over the background image. If you want to add this code I would like to refer you to unitpngfix, but of course you could just not support IE6.

The code is quite self explanatory, and I’ve included comments where necessary.…

For web developers and designers, it can be difficult to memorize the syntax for multiple programming languages and frameworks, especially since they are always evolving and growing. This is where cheat sheets come in handy. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, and CSS.

Great Cheat Sheets by Web Design Ledger

HTML

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

(X)HTML Elements and Attributes

HTML Cheat Sheet

HTML5 Canvas Cheat Sheet

CSS

CSS Level 2 Visual Cheat Sheet

 

CSS 3 Cheat Sheet

 

CSS Cheat Sheet (V2)

 

CSS Cheat Sheet

 

JavaScript

jQuery 1.4 API Cheat Sheet

 

jQuery 1.4 Cheat Sheet

 

jQuery 1.4 Cheat Sheet

mootools 1.2 cheat sheet

 

JavaScript Cheat Sheet

 …

As its name suggests, FindIcons.com is an icon search engine helps you find free icons. We have the largest searchable free icons database in the world (Found somewhere with more icons than us? Let us know!) and both a sophisticated search filtering and result matching system make it possible for you to get an icon you need for every design task.

What we do and why we created this service?

We built this service from scratch, including the icon database, the backend codes, the frontend design and even the mascots. There were some existing icon search engines out there but many times I had to turn to Google Images to look for an icon. We also hate to see the inflated slogan on one existing peer’s website which claims to have 150,000 icons but actually has no more than 100,000 ones in their database (Yes, we have most of the icon packs that site has so we know the correct number). Is is likely to be a scam and it makes us feel that someone is fooling us. That is one of the reasons we created FindIcons.com

Why FindIcons.com is better than other peers?

Like we mentioned above, FindIcons.com has a largest free icon collections, a better search filtering & matching system and more output options. Also, we track every search query and manually adjust the results according to the average ratings set by the search results from other users. And we understand that by searching you can’t categorize every …

Want to use jquery to enhance the experience of your site?
Don’t want to write or cannibalize a bunch of code? With Glimmer, easily create interactive experiences like rotating photo-galleries/mastheads, drop-down navigation, hover effects, or custom animations like what you see here

Get started!

Watch the video, download Glimmer, check out the live samples below.

Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.

…