jQuery Tutorials & Plugins » jQuery Plugin

jQSlickWrap for Slick Text Wrapping in jQuery

Osman Erdoğan — Wed, 25 Nov 2009 08:33:11 +0000

We all know how to use a float property to float an image around a block of text. But what if you want to wrap content around an image… you know the actual image content itself not the block it takes up? jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.

Very very simple usage (:

$('img').slickWrap();

Example :

jQSlickWrap Demo 1

Lots of text goes here..

See it in action here!

Download – Website

11 jQuery Tooltip Plugins

Osman Erdoğan — Mon, 23 Nov 2009 08:27:46 +0000

If your looking for a way to give your users a more in depth description of an item on your site, but don’t want to talk at great length in the article, ToolTips are a fantastic solution.

They work by simply hovering over a word or piece of text, when hovered over a small bubble will appear which you can fill with more information, or a more detailed description.

You can achieve tooltips using multiple languages, in this piece we are focusing on the jQuery tooltips available.

1. Coda Popup Bubbles

2. jGrowl

3. jTip

4. Pop!

5. qTip

6. vTip

7. ToolTip

8. Tipsy

9. EZPZ Tooltip

10. jQuery Ajax Tooltip

11. Nice Tooltips

Farbtastic: jQuery color picker plugin

Osman Erdoğan — Wed, 18 Nov 2009 17:55:47 +0000

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.

Usage:

1- Include farbtastic.js and farbtastic.css in your HTML:

2- Add a placeholder div and a text field to your HTML, and give each an ID:

3- Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:

$(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });

Advanced Usage:

jQuery Method
$(…).farbtastic()
$(…).farbtastic(callback)
This creates color pickers in the selected objects. callback is optional and can be a:
DOM Node, jQuery object or jQuery selector: the color picker will be linked to the selected element(s) by syncing the value (for form elements) and color (all elements).
Function: this function will be called whenever the user chooses a different color. It should have the following signature:
function callback(color) { … }

With color the chosen color in hex representation (e.g. ‘#123456′).
Object
$.farbtastic(placeholder)
$.farbtastic(placeholder, callback)
Invoking $.farbtastic(placeholder) is the same as using $(placeholder).farbtastic() except that the Farbtastic object is returned instead of the jQuery object. This allows you to use the Farbtastic methods and properties below.
Note that there is only one Farbtastic object per placeholder. If you call $.farbtastic(placeholder) twice with the same placeholder, you will get the same object back each time.

The optional callback argument behaves exactly as for the jQuery method.
Methods
.linkTo(callback)
Allows you to set a new callback. Any existing callbacks are removed. See above for the meaning of callback.
.setColor(string)
Sets the picker color to the given color in hex representation (e.g. ‘#123456′).
.setColor([h, s, l])
Sets the picker color to the given color in normalized HSL (0..1 scale).
Properties
.linked
The elements (jQuery object) or callback function this picker is linked to.
.color
Current color in hex representation (e.g. ‘#123456′).
.hsl
Current color in normalized HSL (e.g. [0.3, 0.4, 0.5]).

Demo – Download – Website

jQuery AutoComplete Plugin

Osman Erdoğan — Sat, 14 Nov 2009 10:19:14 +0000

I’d like to present another jQuery plugin, this time it’s autocomplete with some handy features.

Description

The major benefit offered by this plugin is its high performance. As all request results are cached, the cache might be used next time, which leaves the server alone.

Besides, AutoComplete has some unique features, such as text separators, searching by a few words, and the optional using of the component autonomously, i.e. without sending requests to the server.

The plugin works in IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+.

Installation

Installing the plugin is a routine task — just include the .js file after jQuery.

Usage

Let’s add autocomplete for the standard input:

The autocomplete object is then initialized — make sure that initialization is duly done following the DOM loading, otherwise IE users might experience some glitches.

jQuery('#query').autocomplete({
        serviceUrl: 'service/autocomplete.ashx', // Page for processing autocomplete requests
        minChars: 2, // Minimum request length for triggering autocomplete
        delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex)
        maxHeight: 400, // Maximum height of the suggestion list, in pixels
        width: 300, // List width
        zIndex: 9999, // List's z-index
        deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms.
        params: { country: 'Yes'}, // Additional parameters
        onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected,
        lookup: ['January', 'February', 'March'] // List of suggestions for local autocomplete
    });

The page specified in serviceUrl receives a GET request, in response to which it must send JSON data:

{
    query:'Li', // Original request
    suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // List of suggestions
    data:['LR','LY','LI','LT'] // Optional parameter: list of keys for suggestion options; used in callback functions.
    }

You can turn autocomplete on/off as well as re-initialize its parameters anytime via the object functions:

var ac = jQuery('#query').autocomplete({ /*parameters*/ });
    ac.disable();
    ac.enable();
    ac.setOptons({ zIndex: 1001 });

Stylization

The script makes the following tagged piece of code:


 
  Liberia
  Libyan Arab Jamahiriya
  Liechtenstein
  Lithuania

Here’s an example of CSS styles:

.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

Website – Download

jQuery slideViewerPro : A “pro” jQuery image slider

Osman Erdoğan — Sat, 14 Nov 2009 08:57:04 +0000

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts. Each gallery generates a user-defined number of thumbnails which can slide automatically.

Setup

slideViewerPro requires jquery-1.3 or greater and its CSS file.

To create your gallery just copy-and-paste the above markup. Each gallery must be written inside a DIV with an unique ID and CLASS swvp. Then adjust the path for your images and include the jQuery framework, slideViewerPro.1.0.js and the CSS file inside the -here- head tags of your page; then you can initialize the gallery (copy-and-paste the code below). The jQuery(window).bind(”load”) function ensures that ALL the images are loaded before calling the script and also it makes the built-in preloader to work.

Did you know? You don’t need to specify the width and height of your images but all the images within a single gallery must have the same width/height; slideViewerPro automatically checks for the size and renders accordingly. Of course if you specify or force your images size, slideViewerPro will use such image property.

$(window).bind("load", function() {
    $("div#my-folio-of-works").slideViewerPro({
        thumbs: 6,
        autoslide: true,
        asTimer: 3500,
        typo: true,
        galBorderWidth: 0,
        thumbsBorderOpacity: 0,
        buttonsTextColor: "#707070",
        buttonsWidth: 40,
        thumbsActiveBorderOpacity: 0.8,
        thumbsActiveBorderColor: "aqua",
        shuffle: true
    });
});

Settings and Dependencies

// slideViewerPro options (defaults)
galBorderWidth: 6,  // the border width around the main images
thumbsTopMargin: 3, // the distance that separates the thumbnails and the buttons from the main images
thumbsRightMargin: 3, // the distance of each thumnail respect to the next one
thumbsBorderWidth: 3, // the border width of each thumbnail. Note that the border in reality is above, not around
buttonsWidth: 20, // the width of the prev/next buttons that commands the thumbnails
galBorderColor: "#ff0000", // the border color around the main images
thumbsBorderColor: "#d8d8d8", // the border color of the thumbnails but not the current one
thumbsActiveBorderColor: "#ff0000", // the border color of the current thumbnail
buttonsTextColor: "#ff0000", //the color of the optional text in leftButtonInner/rightButtonInner
thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
easeTime: 750, // the time it takes a slide to move to its position
asTimer: 4000, // if autoslide is true, this is the interval between each slide
thumbs: 5, // the number of visible thumbnails
thumbsPercentReduction: 12, // the percentual reduction of the thumbnails in relation to the original
thumbsVis: true, // with this option set to false, the whole UI (thumbs and buttons) are not visible
leftButtonInner: "-", //could be an image "" or an escaped char as "&larr";
rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
autoslide: false, // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin
typo: false, // the typographic info of each slide. When set to true, the ALT tag content is displayed
typoFullOpacity: 0.9, // the opacity for typographic info. 1 means fully visible.
shuffle: false // the LI items can be shuffled (randomly mixed) when shuffle is true

Usage 1 – Default Mode:

In its simplest form, slideViewerPro can be used without specifying any option.

$(window).bind("load", function() {
    $("div#basic").slideViewerPro();
});

Usage 2 : autoslide, typographic info, custom buttons images, custom thumbnails size

$("div#fewoptions").slideViewerPro({
        thumbs: 3,
        thumbsPercentReduction: 20,
        galBorderWidth: 0,
        galBorderColor: "aqua",
        thumbsTopMargin: 10,
        thumbsRightMargin: 10,
        thumbsBorderWidth: 5,
        thumbsActiveBorderColor: "gold",
        thumbsActiveBorderOpacity: 0.8,
        thumbsBorderOpacity: 0,
        buttonsTextColor: "#707070",
        leftButtonInner: "",
        rightButtonInner: "",
        autoslide: true,
        typo: true
        });

Usage 3 : autoslide, shuffled list, without user interface

$("div#noui").slideViewerPro({
        galBorderWidth: 0,
        autoslide: true,
        thumbsVis: false,
        shuffle: true
        });

CSS Code :

.svwp {width: 50px; height: 20px; background: #fff;} /*preloader stuff. do not modify!*/
.svwp ul{position: relative; left: -999em;}/*preloader stuff. do not modify!*/
.slideViewer { /*this is the gallery container*/
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
background: #fff;
}
.slideViewer ul {  /*this is your list of images*/
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
margin: 0;
padding: 0;
}
.slideViewer ul li { /*each LI item is floated; the whole list is now displayed as if its in one row*/
float:left;
} 

/*typographic info*/
.slideViewer span.typo{
padding: 6px; /* do not modify padding (yet)*/
background: #fff;
color: #000;
font: normal 10px Verdana;
} 

.thumbSlider { /*the thumbnails slider contanier*/
overflow: hidden;
width: 1%;
background: #fff;
}
.thumbSlider ul { /*the thumbnails list of images*/
list-style-type: none;
margin: 0;
padding: 0;
}
.thumbSlider ul li{
float:left;
margin: 0;
}
.thumbSlider a{ /*the link wrapped around each thumbnail. dynamically.*/
color: #fff;
text-decoration: none;
}
.thumbSlider a img{
border: 0;
display: block;
padding: 0;
}
.thumbSlider p.tmbrdr { /* the border above -not around- each thumb */
/* width, height and top values are dynamically added by the script. Do not modify. */
position:relative;
left: 0;
font-size: 0.01em;
left: 0;
margin: 0;
padding: 0;
} 

a.left, a.right { /*the left and right buttons (links)*/
background: transparent; /* could be any color  */
color: #ff0000;
font: bold 16px Arial;
overflow: hidden;
}
a.left span, a.right span{ 

}
a.left img, a.right img{
border: 0;
}
a.l_dis, a.r_dis {
background: transparent; /* ALWAYS leave transparent. this is the 'disabled' state of the link !  */
cursor: default;
}
a.l_dis span, a.r_dis span {
display: none;
}
a:focus {outline:none;}

Preloader:

slideViewerPro and slideViewer share the same ‘preloading‘ technique.

It is an idea i had while developing the slideViewer plugin, when i was searching for a technique to preload the images; here’s how it works and what to remember when installing your own slideViewerPro: I used the two built-in ready(fn) and load(fn) event handlers to create a CSS-based preloader: the first event is fired as soon the page DOM is ready; that means we can read the className .svwp and use the method prepend() to insert inside that DIV a ‘loader image’ (.gif). The tricky part here, is to hide the list of images during this preload period: this is accomplished by shifting to the left (’very’ left: -999em) of the page (see .svwp ul in the stylesheet) the whole list. As soon as the DOM is ready, that class shifts the list outside of the window (setting display: none won’t work in Opera) and insert an animated gif to show that ‘it is loading’. Then, i used the second event handler – wich waits the page to be fully loaded, including graphics – to fire the initialization of the gallery; the gif is removed and the list is shifted back on the screen (left: 0). What to remember: when using your own copy of slideViewerPro, look at line 26. There you’ll find the path of my preloader image (images/svwloader.gif); be sure to modify that line so that it points to your own preloader gif in your folder of images.

At line 26 of the jquery.slideViewerPro.1.0.js file, adjust the path of the preloader image:

jQuery(function(){
   jQuery("div.svwp").prepend("");
});

Downloads
jquery.slideViewerPro.1.0.js
svwp_style.css
the preloader image

Website

jQuery Flash Plugin

Osman Erdoğan — Wed, 11 Nov 2009 16:29:47 +0000

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and JavaScript are available, and fallback to plain (X)HTML when they’re not. Replacements can happen as soon as the DOM is ready. (X)HTML, CSS and JavaScript stay separate, making it easy to remove, update or swap out later. Inspired by tools like SWFObject, UFO and sIFR, but written line-by-line for jQuery, no other scripts are required, meaning less redundancy, smaller filesize and faster loading.

Usage:

Basic Embed:
Javascrtipt:

$(document).ready(function(){
    $('#example').flash(
        { src: 'example.swf',
          width: 720,
          height: 480 },
        { version: 8 }
    );
});

HTML:

Say hello to the jQuery flash plugin

————————————-
Basic Flashvars Embed:
Javascrtipt:

$(document).ready(function(){
    $('#example').flash(
        {
          src: 'example.swf',
          width: 720,
          height: 480,
          flashvars: { foo: 'bar', baz: 'zoo' }
        },
        { version: 8 }
    );
});

HTML:

Please sir, can I have some flashvars?

Which browsers are supported?
Internet Explorer 5.5/6.0/7.0
FireFox 1.5/2.0
Safari 2.0
Opera 9.0

Website – Download (8.4k) – Examples

s3Slider jQuery Plugin & Tutorial

Osman Erdoğan — Tue, 10 Nov 2009 14:47:16 +0000

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

Usage:

HTML:


   
      
          
          Your text comes here
      
      
          
          Your text comes here

Sample CSS:

#s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}

Inside in HTML:

$(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 4000
   });
});

timeOut: values in miliseconds…

Example – Website

Download

Full version (with examples) (size: 574kb)
Uncompressed version (size: 4.12kb)
Compressed version (size: 1.66kb)