TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (8KB) and standalone. It can easily be customized to integrate with any website through CSS and the multitude of parameters. It handles most of the basic formatting needs and has some functionality built in to help keep the rendered markup as clean as possible. The icons are courtesy of famfamfam and have been combined into a sprite so there are only a few HTTP requests for the editor. I plan on adding some updates in the future to support font color, a full-screen mode, and a paste from Word option.

To initialize the script use the following:

new TINY.editor.edit('editor',{
	id:'input', // (required) ID of the textarea
	width:584, // (optional) width of the editor
	height:175, // (optional) heightof the editor
	cssclass:'te', // (optional) CSS class of the editor
	controlclass:'tecontrol', // (optional) CSS class of the buttons
	rowclass:'teheader', // (optional) CSS class of the button rows
	dividerclass:'tedivider', // (optional) CSS class of the button diviers
	controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (required) options you want available, a '|' represents a divider and an 'n' represents a new row
	footer:true, // (optional) show the footer
	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  // (optional) array of fonts to display
	xhtml:true, // (optional) generate XHTML vs HTML
	cssfile:'style.css', // (optional) attach an external CSS file to the editor
	content:'starting content', // (optional) set the starting content else it will default to the textarea content
	css:'body{background-color:#ccc}', // (optional) attach CSS to the editor
	bodyid:'editor', // (optional) attach an ID to the editor body
	footerclass:'tefooter', // (optional) CSS class of the footer
	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (optional) toggle to markup view options
	resize:{cssclass:'resize'} // (optional) display options for the editor resize
});

The first parameter taken by TINY.editor.edit is the variable name used for the object instance. Keep in mind that before posting you will need to call the instance.post() function to ensure that the latest changes in the WYSIWYG translate into the text area. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

1/8/2010 – Resolved a couple IE and Chrome issues and added some cleanup for Safari/Chrome. Thanks for the reports.

1/12/2010 – Resolved issue with conversion to lower case and the header row class.

This super lightweight (1.5KB) and standalone sliding slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).

To initialize the script use the following:

var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider', // ID of the parent slideshow div
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume auto after interrupted, defaults to false
	vertical:false, // Direction, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // Class to set on the current LI
	position:0 // Initial slide position, defaulting to index 0
});

The first parameter taken by TINY.slider.slide is the variable name used for the object instance. You can also optionally set width and height parameters for the applicable direction you are sliding. If it is not set the width or height will be automatically calculated using the offsetWidth/offsetHeight of the first list element. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

12/8/2009 – Fixed bug that threw slider into loop outside of constraints.

The third iteration of the TinyTable table sorting script adds search, column averages and totals, record numbering, a view all function, and a reset function. At only 6KB it is still lightweight, quick, and includes all previous TinyTable features. Other features include alternate row highlighting, header class toggling, auto data type recognition, and selective column sorting. If you don’t need the new features take a look at the second version of the script which weighs 2.5KB.

To initialize a table sorter follow the pattern below:

var sorter = new TINY.table.sorter('sorter','table',{
	headclass:'head', // Header Class //
	ascclass:'asc', // Ascending Class //
	descclass:'desc', // Descending Class //
	evenclass:'evenrow', // Even Row Class //
	oddclass:'oddrow', // Odd Row Class //
	evenselclass:'evenselected', // Even Selected Column Class //
	oddselclass:'oddselected', // Odd Selected Column Class //
	paginate:true, // Paginate? (true or false) //
	size:10, // Initial Page Size //
	colddid:'columns', // Columns Dropdown ID (optional) //
	currentid:'currentpage', // Current Page ID (optional) //
	totalid:'totalpages', // Current Page ID (optional) //
	startingrecid:'startrecord', // Starting Record ID (optional) //
	endingrecid:'endrecord', // Ending Record ID (optional) //
	totalrecid:'totalrecords', // Total Records ID (optional) //
	hoverid:'selectedrow', // Hover Row ID (optional) //
	pageddid:'pagedropdown', // Page Dropdown ID (optional) //
	navid:'tablenav', // Table Navigation ID (optional) //
	sortcolumn:1, // Index of Initial Column to Sort (optional) //
	sortdir:1, // Sort Direction (1 or -1) //
	sum:[8], // Index of Columns to Sum (optional) //
	avg:[6,7,8,9], // Index of Columns to Average (optional) //
	columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}], // Sorted Column Settings (optional) //
	init:true // Init Now? (true or false) //
});

The first parameter taken by TINY.table.sorter is the variable name used for the object, the second is the id of the table, and the third is the settings object. You can either initialize the script in the object creation by setting init to true or you can initialize it later using sorter.init().

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

11/16/2009 – Updated script to function correctly in IE6/IE7.

TinyScroller is a basic scrollable div script at only 1.7KB. It can be used with any HTML and degrades gracefully. The styling is completely customizable through the simple CSS. More features will be coming soon. I have redesigned leigeber.com and am going to be publishing a number of scripts and articles shortly. I will also be releasing my previous blog theme for free. A few of the upcoming scripts:

• TinySlideshow V3 – many new features and fixes
• TinyTable V3 – advanced search and filtering capabilities
• TinySlider – sliding content script
• TinyDrag – draggable box script
• TinyBox V2 – many new features
• TinyValidator – completely rewritten form validation
• TinyTooltip – slick and full featured tooltip script
• TinyEditor – lightweight JavaScript WYSIWYG editor
• Bug fixes to all other existing scripts.

To initialize a scrollable div use the following code:

TINY.scroller.init('scroll','content','scrollbar','scroller','active')

The TINY.scroller.init function takes 5 parameters: the id of the parent content wrapper, the id of the content div, the id of the scroll div, the id of the scroll button, and the class of the scroll button active state (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to view the demo.

Click here to download the script.

I have been working on a business intelligence application recently and did a lot of research for a Flash based library to build out dynamic charts. There are a number of players in the market, some free and some even open source. I ended up choosing a product called amCharts which seemed very flexible and the pricing was generally lower than the competition. You can download and use the charts for free with the “chart by amCharts” text in the top left corner, this comes in handy when evaluating. Being savvy with JavaScript, I liked the fact that there was a powerfully API behind the charts for data and settings manipulation. As such, there is no need for postbacks or tedious AJAX calls.

Another selling point was the ASP.NET control library they offer which made development much quicker. I also chose the developer license to get the full Flash source code for some custom modifications. One last cool feature is the chart builder at http://extra.amcharts.com/editor/ which makes visualizing the charts and generating the settings file a breeze. Charts like this can really add some “wow” factor to an application. They have an active community forum, plenty of documentation, and a helpful staff so check them out.

Click here for a quick demonstration of a dynamic pie chart inside a draggable box which should be ready for release soon. If you are interested in the demo source you can download it here. Check out their website for more demos and details.

TinyBox is a lightweight and standalone modal window script. At only 3.4KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML input so the sky is the limit. Future versions will include additional features. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS. I have a couple tutorials and a few scripts I will be posting very soon so check back.

To display a popup box use the following code:

TINY.box.show('advanced.html',1,300,150,1,3);

There is nothing to initialize, just start using the script. The TINY.box.show function takes 6 parameters: the HTML content for the box or the relative path to the AJAX source, a toggle (true/false or 1/0) if the content is via AJAX, the width of the window (use 0 for auto), the height of the window (use 0 for auto), a toggle (true/false or 1/0) to animate the window, and the time in seconds to wait before auto hiding the popup (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

Update 11/15/2009 – Updated logic to speed up the animation and fix a positioning issue. Slightly dropped the code weight.

Update 11/16/2009 – Fixed issue that occurred when sizing down a box.

This updated table sorter script is easy to use and feature packed at only 2.5KB. New features include column highlighting, optional pagination, support for links, and date/link parsing. A few other features are alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. More updates will follow soon.

To initialize a table sorter follow the pattern below:

var sorter = new TINY.table.sorter('sorter');
sorter.head = 'head'; //header class name
sorter.asc = 'asc'; //ascending header class name
sorter.desc = 'desc'; //descending header class name
sorter.even = 'evenrow'; //even row class name
sorter.odd = 'oddrow'; //odd row class name
sorter.evensel = 'evenselected'; //selected column even class
sorter.oddsel = 'oddselected'; //selected column odd class
sorter.paginate = true (false); //toggle for pagination logic
sorter.pagesize = 15 (20); //toggle for pagination logic
sorter.currentid = 'currentpage'; //current page id
sorter.limitid = 'pagelimit'; //page limit id
sorter.init('table',1);

Before initialization, a new table sorter object must be created. The parameter taken by TINY.table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the initially sorted column index (optional). If you want to exclude a column from sorting add class=”nosort” to the appropriate table header. Table styling is completely customizable via the CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

This updated accordion script is powerful and lightweight at only 1.2kb. It now includes multi-level support, the option to allow multiple panels to expand concurrently, and a hide/show all toggle. I have reverted the markup to a div based structure to eliminate any validation issues with the definition tables in the previous version. Check back for more posts and scripts soon.

To initialize an accordion use the following code:

var accordion=new TINY.accordion.slider('accordion');
accordion.init('accordion','h3',0,0,'selected');

You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion “ul”, the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Update 6/16/2009

The script has been updated with a couple bug fixes, performance tweaks, and feature requests. I also shaved off 0.2KB.

You can now expand a particular section by its index, for example parentAccordion.pr(0,1), with the second parameter being the index of the section. If you don’t want any section to be expanded by default then use -1 for the initially expanded index in the initialization function, example accordion.init(“accordion”,”h3″,0,-1,”selected”). The script is also no longer tied to a strict doctype. If you are using this along with Flash, be sure to set the wmode property on the SWF object.

Click here for the demo.

Click here to download the source code.