DRYICONS : COLORFUL STICKERS PART 6 ICONS

“Colorful Stickers part 6″, the new addition of the popular “Colorful Stickers” series, is finally available. We’ve listened the needs of the many, and composed the set as a compilation of user requested icons.

Colorful Stickers Icon Set Part 6

The pencil and brush icons, along with 18 other icons fit perfectly into a compact whole recognizable by the unique “Colorful Stickers” style. They will surely embellish the look of your projects, and perhaps even inspire new development directions.
The icons are available in these sizes: 16x16px, 24x24px, 32x32px, 48x48px, 64x64px, 128x128px and 256x256px in 32-bit transparency PNG file format. The icons also come in ICO and ICNS file formats in 128x128px size.

Download Colorful Stickers Part 6 Icon Set :: 20 Icons

Please read our Free, Commercial and Extended License Terms of Use before you download.

jQuery Popout Hover using CSS

I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.

HTML

The columns are made up of unordered list items, within each list item is the thumbnail image and the details of the item wrapped in a class of “info”.

CSS

Start by styling the list items. Notice we add position: relative; to the list item, and on hover we raise the z-index to 99 so it lifts over the other elements.
We add a position: relative; to the image as well, so we can control the z-index value on hover. What we want to do here is to lower the opacity of the image by default to 30% then on hover, turn up the opacity to 100% and lift the image by increasing the z-index value to 999. This will allow the thumbnail to sit on top of the .info elements.
Use absolute positioning to shift the .info class -10px to the left and -10px to the top. Since .info is using an absolute positioning, we must have enough top padding so the content within does not overlap the thumbnail. To do this, the top padding is measured by adding 10px to the height of the thumbnail (200px in my demo). Some CSS3 was added for the rounded corners. We will hide .info by default, and show it on …

jQuery Text Select Social Sharer *new*

Jquery selected text sharer is a promoting and enhancing plugin focusing to increase the site usage. This plugin displays a widget having links to search / share, above the selected text. Inspired from NY times website.

Features

  • Cross browser supported.
  • Highly customisable interface.
  • Light-weight.
  • Can add unlimited links to the widget for searching and sharing.
  • Selected text truncation for Twitter.
  • Can show widget for textboxes and textareas also.
  • Can show widget only for particular elements.
  • Available in non-Jquery version also.

Demo

Click the button below to view the example and demonstrations of selected text sharer plugin.

jQuery Period Picker

Period Picker, is a jQuery date range calendar picker. This is a period picker that will enable you to simply add a two dates selectors on any website using jQuery (and if you’re not it’s a good reason to start).

Do you (only) speak english ?

The original version is a complete English version but I’m working on some translation and you just have to change two lines of the javascript file to adapt it to your language (there are already a lot of translations available on the dedicated page).

The plugin is set to work with american date format (YYYY/mm/dd) but you can add your own easily by editing a few lines in the script (see Documentation to read about this).

How much is it ?

A looooot ! Or… Well nothing at all. I like the second option better, don’t you ?

However, if you want to support me for the work done here, you will find a paypal donate button on the download page and a Flattr button on top of every page.

Can I try ?

Of course you can try it ! I assumed it was your reason for coming here so I added two demos on this page ! Check out just a little higher, I’m sure you can figure out which block I’m talking about…

And if you were able to figure that out, I’m sure you’ll succeed in installing it on your website, because both tasks are as easy.

YouTube Chromeless WebPage Background

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>

CUSTOM FONTS USING GOOGLE API

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 – Inline Spell Checker

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.…

Animated Tag Cloud – jQuery

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="https://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 : durationdiagonal, 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 …