Changelog

-added multiple instance support
-better iframe + scrollbar support for each slide especially in Firefox.

jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 2kb minified!!!.

Download
Demo

API

$(obj): the div where all your slider controllers are nested in, must be an id use # sign
slides: the div where all your sliding divs are nested in, must be an id use # sign
controller: the class name of each controller, must be a class, use . sign
slideWrapper : wrapper for all slides // must be id, use # sign
selectedWrapper: indication of current wrapper  // just pure text, no sign
easing: animation easing here, must have easing plugin if you want to use something other than swing
duration: time in miliseconds to transition one slide
height: height be specified in px
width: can be specified in px or %
prev: must be a class, use . sign
next: must be a class, use . sign

Default Values

controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected",  // just pure text, no sign
easing: "swing",
duration: 400,
width: "100%",
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign

Download
Demo

This plugin will easily allow you to do color transitions for text, background and borders for different events.

The API

trigger: the event that will fire color transition, uses the same events as bind in jQuery
property: can be 'background', 'borderColor' or 'color'
start: the starting color ie '336699'
end: the ending color ie '6699CC'
steps: the number of times to divide the color difference
duration: the transition speed

Default values

	$.fn.jFade.defaults = {
		trigger: "load",
		property: 'background',
		start: 'FFFFFF',
		end: '000000',
		steps: 5,
		duration: 30
	};

Demo
Download

jSuggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.

Download
Demo

The API and Default Values

$.fn.jSuggest.defaults = {
 minchar: 3,
 opacity: 1.0,
 zindex: 20000,
 delay: 2500,
 loadingImg: 'ajax-loader.gif',
 loadingText: 'Loading...',
 autoChange: false,
 url: "",
 type: "GET",
 data: ""
};

Explanation of the Options:

minchar: the minimum number of characters in the textfield before jSuggest fires
opacity: opacity of the suggestions
zindex: z-index of the suggestions
delay: number of miliseconds before jSuggest fires
loadingImg: the image when waiting for ajax calls
loadingText: the text when waiting for ajax calls
autoChange: IF TRUE, automatically change the text of the text box on hover or selected. IF FALSE: change the text of the textbox when enter or mouse click on the suggestion
url: address of your suggestions.
type: “GET” or “POST”
data: this can be the name of the text box ie [ if data="age" and url ="pro.php", then this is parsed pro.php?age=textBoxvalue ]. Do not touch this option if you have no idea. Best to leave empty.

Download
Demo

jHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

Download
Demo

The API and Default Values

$.fn.jHelperTip.defaults = {
 trigger: "click",
 topOff: 3,
 leftOff: 10,
 source: "container",
 attrName: '',
 ttC: "#jHelperTipContainer", /* tooltip Container*/
 dC: "#jHelperTipDataContainer", /* data Container */
 aC: "#jHelperTipAttrContainer", /* attr Container */
 opacity:  1.0,
 loadingImg: "ajax-loader.gif",
 loadingText: "Loading...",
 type: "GET", /* data can be inline or CSS selector */
 //url: '',
 //data: '',
 autoClose: true
};

Explanation of the Options:

trigger: “click” or “hover” to trigger the tooltip
topOff: top offset from mouse pointer
leftOff: left offset from mouse pointer
source: can be “container”, “ajax” or “attribute”, container is an container in current page, ajax loads from another page, attribute will read the attribute of current object.
attrName: the attribute that you want to pass the data from (only works if your source is attribute)
ttC: tooltip container (define a container to position your tooltip and receive data from ajax), will create if container not found use “#container” and not “container”
dC: data container for same page container (only works if your source is container)
aC: attribute data container (only works if your source is attribute)
opacity: opacity of the tooltips
loadingImg: the loading image indicator in Ajax calls (only works if your source is ajax)
loadingText: the loading text indicator in Ajax calls (only works if your source is ajax)
type: “GET” or “POST” (only works if your source is ajax)
url: The address of the page that you are fetching from (only works if your source is ajax)
data: data passed to the ajax request (only works if your source is ajax)
autoClose: true or false, specify if explicit action is needed to close the tooltip

Special Case

jHelperTipClose : clicking on any element that has this class will make the current tooltip close

Examples

jQuery.noConflict();

jQuery(function($){
   $("#test").jHelperTip({
     trigger: "click",
     dC:"#tip1",
     autoClose: false,
     opacity: 0.9
 }); 

<div>Matt is doing something <span id="test">dangerous</span></div>

<div id="tip1" style="display:none">
 <div class="jHelperTipClose" style="cursor:pointer;color:#F00">click here to close</div>
 <p>adj.</p>
 <p>1. Involving or filled with danger; perilous.</p>
 <p> 2. Being able or likely to do harm.</p>
</div>

Download
Demo

jFlow updated to 1.2

Changelog

- fixed animation forward flowing and backward timing per tab to be consistent

jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 1.9kb minified!!!.

Download
Demo

Usage

$("#myController").jFlow({
    slides: "#mySlides",
    width: "99%",
    height: "200px",
    duration: 400
});

Explanation:

#myController: the div where all the slide controller are nested in
slides:  the div where all your sliding divs are nested in (note: you can define classes for each div inside slides)
width: can be specified in px or % (required)
height: can be specified in px (required)
duration: time in miliseconds to transition one slide (optional, default is 400)

2 divs created by jFlow as containers, you can style them to your liking

#jFlowSlide: This is the container where all the slides reside
.jFlowSelected: This is the current activated controller

Special class definition

.jFlowPrev: Any element with this class will transition to previous slide upon clicking
.jFlowNext: Any element with this class will transition to next slide upon clicking
.jFlowControl: Any element inside the controlling div with this class will map to the corresponding slide

Example

<script language="javascript">
$(document).ready(function(){
    $("#myController").jFlow({
        slides: "#mySlides",
        width: "99%",
        height: "200px",
        duration: 400
    });
});
</script>

<div id="myController">
   <span class="jFlowControl">No 1 </span>
   <span class="jFlowControl">No 2 </span>
   <span class="jFlowControl">No 3 </span>
   <span class="jFlowControl">No 4 </span>
</div>

<div id="mySlides">
   <div>First Slide</div>
   <div>Second Slide </div>
   <div>Third Slide </div>
   <div>Fourth Slide </div>
</div>

<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>

Download
Demo

If you have been following John Resig’s development road map for jQuery 1.2.4 (now 1.2.5), you would have realized that dimensions.js are now fully integrated. I just checked out the jQuery documentation but it is still lacking the new features API.

Here’s what is possible with jQuery.

Methods

* height
* innerHeight
* innerWidth
* offset
* offsetParent
* outerHeight
* outerWidth
* position
* scrollLeft
* scrollTop
* width

To see details for each API please visit
http://brandonaaron.net/docs/dimensions/#api

Click here for the updated version

jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 1.9kb minified!!!.

Download
Demo

Usage

$("#myController").jFlow({
    slides: "#mySlides",
    width: "99%",
    height: "200px",
    duration: 400
});

Explanation:

#myController: the div where all the slide controller are nested in
slides:  the div where all your sliding divs are nested in (note: you can define classes for each div inside slides)
width: can be specified in px or % (required)
height: can be specified in px (required)
duration: time in miliseconds to transition one slide (optional, default is 400)

2 divs created by jFlow as containers, you can style them to your liking

#jFlowSlide: This is the container where all the slides reside
.jFlowSelected: This is the current activated controller

Special class definition

.jFlowPrev: Any element with this class will transition to previous slide upon clicking
.jFlowNext: Any element with this class will transition to next slide upon clicking
.jFlowControl: Any element inside the controlling div with this class will map to the corresponding slide

Example

<script language="javascript">
$(document).ready(function(){
    $("#myController").jFlow({
        slides: "#mySlides",
        width: "99%",
        height: "200px",
        duration: 400
    });
});
</script>

<div id="myController">
   <span class="jFlowControl">No 1 </span>
   <span class="jFlowControl">No 2 </span>
   <span class="jFlowControl">No 3 </span>
   <span class="jFlowControl">No 4 </span>
</div>

<div id="mySlides">
   <div>First Slide</div>
   <div>Second Slide </div>
   <div>Third Slide </div>
   <div>Fourth Slide </div>
</div>

<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>

Download
Demo

Here’s a good overview of major JavaScript libraries.
http://www.slideshare.net/jeresig/javascript-library-overview (up to date)

As my daily task involves javascripting, I have seen countless arguments on which JavaScript libraries are better on the web.

Of course some might make their case based on the (traversing) speed on the libraries.
http://www.domassistant.com/slickspeed/ (up to date)

What’s wrong when arguing your case with the speed of libraries?
Pretend that all file sizes of the libraries are the same and neglecting HTTP request delay. Even at 700ms rendering/processing/traversing/selecting speed, that is less than 1 sec. Users might notice it but I doubt they will be frustrated with it. Not convinced? The test above is a stress test, the amount of DOM nodes that are being selected/traversed are ridiculously high. Many effects like overlay dialog, contextual menu, tool tips, calendar, AJAX, Drag & Drop, and various utilities does not even approach 1/10th of the amount of time needed. Unless we are talking about fully JavaScript based UI.

Some might try file size.
http://www.ja-sig.org/wiki/display/UP3/Javascript+Toolkit+Comparison (caution: data is out of date)

What’s wrong when arguing your case with size of libraries?
File sizes varies according to customization. In the last 2 years, many libraries let you customize their components thus creating a lean slick file.

Some might even argue with philosophies like OOP structure, functionality, minimalistic etc

But let us look what happened to the framework library world …

In the end of 2006 (by Ajaxian)
In the end of 2007 (by Ajaxian)
In Feb of 2008 (featured in Ajaxian, nitobi sponsored)

Now let us look at some heavyweight backers of the frameworks.

prototype: Nasa, Apple, Basecamp, Gucci, ROR, digg
jQuery: Google Code, Mozilla, digg, Cisco, technorati
dojo: IBM, BEA, Sun Microsystems, Plaxo, Shutterfly
*extjs: Adobe, HP, IBM, Best Buy, Cisco

*usage of ext is not exclusive because it is mainly used for projects, not sitewide implementation

I have used YUI, extjs and jQuery. My bias is towards jQuery because of the minimalistic approach, powerful selectors, and low learning curve, miminal core size + effects, community support. When do I use YUI and extjs? YUI for complex widgets like rich text editor. Extjs for beautiful skins. Correct me if I am wrong, one thing that’s lacking from all libraries except jQuery is the ability to work with other libraries without conflict.

I have seen some implementations of sortables list and none really fits my needs. Here is an ultra lightweight jQuery plugin (2.6kb minified!!!!!!!!!) that will do the job right, loads fast and harness the jQuery’s power create a very usable sortable nested list.

Usage

$(cssSelector).jTree ({
    showHelper: false,
    hOpacity: 0.5,
    hBg: "#FCC",
    hColor: "#222",
    pBorder: "1px dashed #CCC",
    pBg: "#EEE",
    pColor: "#222",
    pHeight: "20px",
    snapBack: 300,
    childOff: 20
});

All of the options are optional

showHelper: show a clone of the current element that will follow mouse movement
hOpacity: helper's opacity
hBg: helper's background
hColor: helper's text color
pBorder: the border for placement mark
pBg: the background for placement
pColor: the text color for placement
pHeight: the height for placement
snapBack: number of miniseconds to snap back to original position if there is no placement container
childOff: number of pixels from left of element before deciding that the element should be child/sibling of current hovered element

Example

$(document).ready(function(){
	$("#yahoo").jTree({
		showHelper: false,
		hOpacity: 0.5,
		hBg: "#FCC",
		hColor: "#222",
		pBorder: "1px dashed #CCC",
		pBg: "#EEE",
		pColor: "#222",
		pHeight: "20px",
		snapBack: 300,
		childOff: 20
	});
});

<ul id="yahoo">
	<li>a -apple</li>
    <li>b - bee</li>
    <li>c - caterpillar</li>
    <li>d - donkey</li>
</ul>

Demo here

Download

Gone were the days of framesets during the late 90s. Usability studies then showed that frames (not iframe) are detremental. The Web 2.0 platform has made the frames concept emerge once again in another form to simulate interfaces that are found in desktop software. As a frequent Yahoo! mail or even Live mail user, you probably have noticed that you can resize reading panels by dragging the sliders/helpers. In this era, we are now talking about divs not frames and making them behave does take quite a bit of effort in your CSS and JavaScripting.

I am approaching this problem from a JavaScript perspective, the CSS to make it work is still daunting if you don’t have a firm concept of it. Let’s look at a illustration of what the example layout will be.

To make #v-slide and #h-slide work as a slider/resizer, just simply do this.

$("#v-slide").jSize({
    type: 'left-right',
    c1: '#left',
    c2: '#right',
    static: '#left'
});

$("#h-slide").jSize({
    type: 'top-bottom',
    c1: '#top',
    c2: '#bottom',
    static: '#top'
});

Let us look at the code above and see what it means.

type: (left-right | top-bottom) those are the two choices for your slider
c1: (jQuery css selectors) means the left container or the top container
c2: (jQuery css selectors) means the right container or the bottom container
static: (jQuery css selectors) the container that has min-width and max-width specified on their CSS (either c1 or c2).

Word of caution: min-width and max-width for your container plays an extremely important role to prevent the frames from breaking.

Demo

Dowload jSize 1.0