Author Archive

Posted on April 28, 2010 - by Michael

GameOPS [video games, gadgets, etc.]: Birth of A Spartan Trailer

GameOPS.net is your ultimate Filipino source for all things that matter to gamers. From video games, animes, asian tv series, babes, gadgets, the latest cellphones, comics, and more, GameOPS is here to give you the latest. ...
GameOPS [video games, gadgets, etc.] - http://www.gameops.net/

Posted on February 8, 2010 - by Michael

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:

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.

Posted on February 1, 2010 - by Michael

Gadgets that make your life easier | Smoont

Gadgets can be clever, fun, quirky, and sometimes really very useful and practical. This video runs through some of the latest gadgets that will hopefully make your life a little easier… ...
Smoont - http://smoont.com/

Posted on January 26, 2010 - by Michael

Development Opening

I am 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.

Posted on January 2, 2010 - by Michael

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!

Posted on December 6, 2009 - by Michael

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:

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.

Posted on November 16, 2009 - by Michael

New Community Web Development Forum

Check out the new community forum at http://forum.leigeber.com/. It has been suggested a number of times that a forum would be a better way to manage all the requests and suggestions that have been coming through as comments. Please direct all your issues and general discussion there. I look forward to collaborating with all of you.

Posted on November 16, 2009 - by Michael

Advanced JavaScript Table Sorter – TinyTable V3

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.

Posted on September 24, 2009 - by Michael

TinyScroller JavaScript Scrollable Div – 1.7KB

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.

Posted on June 17, 2009 - by Michael

Flash Charts With JavaScript API – amCharts

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.