Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

scrollable


xReader

Submitted by nanux on July 26, 2010 - 5:23pm

xReader is a simple text reader.
We can read a text without mouse or keys!!

This Plugin is in progress.

jQuery UI Scrollable Tabs

Submitted by aamir on May 4, 2010 - 9:30am

Problem:

Using jQuery-ui tabs we should know the number of tabs so that we can adjust the width of the tabs wrapper so all the tabs can adjust itself.
But what if we want to add the tabs dynamically with javascript? To solve this problem I google for some sort of plugins but I found no
proper jQuery plugin so that we can have two arrows (next and previous) to navigate through tabs.

Solution:

The solution is jQuery scrollableTabs with many features you might need.

Scrollable Table with fixed thead

Submitted by zalduajorge on April 12, 2010 - 3:46pm

Table that scrolls horizontally and vertically, leaving the thead fixed.

The style:
<STYLE type="text/css">
.div_zz_tabla {
border:0px solid red;
width:450px;
overflow:hidden;
height:190px;
}

.mitabla {
border-collapse:collapse;
border:1px solid black;
}

.mitabla td {
border-right:4px solid #ccc;
/*padding: 0 4px 0 4px;*/
white-space:nowrap;
}
.spanright {
padding-right:6px;
}

The plugin:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/**
* Scrollable Table with fixed thead
*
* Usage:
* $("#divID").scrollable();
* where divID is the id of the div that contains the table
* do not use any css for the td (ex: style: to configure this aspects
*
*
* Your table needs to be using the following format for this to work well:
*

Scrollable Fixed Header Table

Submitted by sirjccb on March 21, 2010 - 10:01pm

Scrollable table with fixed headers to columns vertically and horizontally.
This plugin requires JQuery Cookie plugin, and JQuery Dimensions plugin.

zzGrid

Submitted by zzee on December 12, 2009 - 6:54pm

zzGrid is a Javascript grid control with continuous scroll, it is an extension to jQuery, and is a jQuery UI widget. Your users do not have to click on distinct page numbers or forth and back buttons to see another portion of data, data is loaded from a server upon need in a natural way via AJAX.

jQuery Multiple Select Box Plugin

Submitted by dreamltf on October 30, 2009 - 1:34pm

jQuery Multiple Select Box Plugin

Replace browser's default multiple select box with overflow: auto.

Select Automatically when dragging and scrolling.

取代瀏覽器預設的多選框組件，並加入自動選取功能。

Tested with: Chrome 2+, Firefox 2+, IE 6+, Opera 10+, Safari 4+

Original:

<select multiple="multiple">
    <option>Item 1</option>
    <option class="selected">Item 2</option>
    <option><font color="red">Style Item 3</font></option>
    <option style="margin-left: 20px">Style Item 4</option>
    <option>Style It<br />em 5</option>
</select>

Demo: http://dl.dropbox.com/u/8316573/index.html

(mb)scrollable, scroll your content!

Submitted by pupunzi on October 9, 2009 - 4:20pm

Need to show many elements in constricted space?

1, 2, 3, 15...slide how many box you want with a simple and configurable navigation toolbar.

here is the js call:

$("#myScroll").mbScrollable({
   width:700,
   elementsInPage:1,
   elementMargin:2,
   shadow:"#999 2px 2px 2px",
   height:"auto",
   controls:"#controls",
   slideTimer:600,
   autoscroll:true,
   scrollTimer:4000
});

here is the code for the dom elements:

  <div id="myScroll">
    <div class="scrollEl" style="background-color:#9999ff">1</div>
    <div class="scrollEl" style="background-color:#cc9900">2</div>
    <div class="scrollEl" style="background-color:#660066">3</div>
  </div>

  <div id="controls">
    <div class="first">first</div><div class="prev">prev</div>
    <div class="next">next</div><div class="last">last</div>
    <div class="pageIndex"></div>
    <div class="start">start</div><div class="stop">stop</div>
  </div>

Scrollable Tables for IE and Mozilla

Submitted by mweston on February 10, 2009 - 11:56pm

This jQuery function will set the height/width and add scroll bars if required. For internet explorer it breaks apart to table into 1-3 divs (header, body, footer). In mozilla it adds a scroll bar to the tbody element.

Usage:

$("table").scrollable();
$("table").scrollable({tableWidth:915, tableHeight:400});

Your table needs to be using the following format for this to work well:

<table>
   <thead>
     <th>...</th>
   </thead>
   <tbody>
     <td>...</td>
   </tbody>
</table>

This plugin is loosly based on: http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html

jQuery Tools / Scrollable

Submitted by tipiirai on May 28, 2008 - 1:29pm

Scroll your HTML with eye candy

This plugin is part of the jQuery Tools UI library..

Provides generic scrolling capability to your pages. Anytime you want to scroll your HTML elements in a visually appealing way you should use this tool. The difference between "normal" scrolling is that you don't have browser's default scrollbars available and you can perform scrolling in more sophisticated ways like on the above example. The main goals are visual customization and programmability

You start with with a bunch of HTML elements and do following things with them