Vistas Logo
no
Recent Post
Category
Archives
Feeds
Become a
Fan

Accordion Script With Multi-Level Support

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:

1 var accordion=new TINY.accordion.slider('accordion');
2 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.

Advanced JavaScript Table Sorter

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:

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

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.

Slideshow Script – TinySlider

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:

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

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.

Big Changes for 2010

Happy new years to everyone! I wanted to announce that as of yesterday I am working independently again, focusing my efforts on building my web development company,Refina. This change also means I will finally have time to be more active in the development community and work on some of my start-up concepts. I will be releasing new scripts starting shortly and begin writing more about web development in general. I will also likely be re-branding leigeber.com to something more generic and am looking for guest authors so please contact me if you are interested.

I am actively seeking web design and application development projects both small and large. Let me know if I can ever be of assistance or if you know anyone who I should talk to. Hope you all have great 2010!

Development Opening

We are looking for a highly motivated individual to join me full-time. Applicant must be determined, creative, and have a solid understanding of PHP. They will be responsible for designing, coding, testing, debugging, documenting, and supporting web sites and applications. They should be highly organized and capable of managing multiple projects and priorities simultaneously if needed. This is an excellent opportunity for an ambitious individual to become part of a small team with plenty of opportunity. Qualified freelance developers will also be considered.

Required Skills:

  • At least one year of development experience using PHP
  • Ability to write hand-coded, cross-browser compatible, standards compliant XHTML and CSS
  • Experience with XML, Javascript, and AJAX
  • Ability to become proficient in new languages quickly
  • Strong communication skills

Pluses:

  • Experience with ASP.Net
  • User interface and graphics skills
  • Understanding of SEO principles
  • SQL and database design experience
  • Basic understanding of Apache

Send a resume and any applicable portfolio links to contact@refinacorp.com. No development firms. Qualified individuals will be contacted. Candidates local to North Alabama are preferred.

JavaScript WYSIWYG Editor – TinyEditor

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:

php vs pearl

php vs pearl php vs pearl php vs pearl