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.

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.

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!

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.

*PTO rate should be found in your companies HR material. It usually varies by the experience of years in the company or managerial positions.

Note: You may experience bugs as this is a Beta version.

The idea is simple: The Custom Search code that Google provides has this structure:
FIELD + BUTTON.

The only thing we are adding here is a DIV (leftCurve image) right before the field. So the structure becomes: DIV + FIELD + BUTTON. The rest is pure CSS.

For this example, I set the body background color to navy blue in order to display rounded corners (curves) properly. You can change this color to any color of your choice or you can experiment with transparent graphics if you prefer.

Please write a comment if you found this helpful or if you have any questions.

Dr.Div

CSS

#searchField #fieldContainer {
	margin: 0px;
	padding: 0px;
}
#searchField #fieldContainer #myField{
	margin-left:-1px;
	margin-top:-1px;
	height:18px;
	float: left;
	width: 160px;
	color: #666666;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-position: left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 3px 0px 0px 0px;
}
#searchField #fieldContainer #googleSearch{
	height:20px;
	width:auto;
	overflow:hidden;
	float:left;
}
#searchField #fieldContainer #leftCurve {
	float: left;
	background-image: url(bg_searchbar_left.gif);
	background-repeat: no-repeat;
	width:15px;
	height:20px;
	background-position: left top;
}
#searchField #fieldContainer #mySearch {
	float: left;
	background-image: url(bg_searchbar_right.gif);
	background-repeat: no-repeat;
	width:23px;
	height:20px;
	background-position: left top;
	display:block;
	margin-left:-1px;
	text-indent:-999px;
	overflow:hidden;
	border:none;
	color:#fff;
	font-size:1px;
}

BODY

<body bgcolor="#1d4f6e">
<div id="searchField">
<div id="fieldContainer">
<div id="leftCurve"></div>
<form action="http://www.drdiv.com" id="cse-search-box">
<div id="googleSearch">
<input type="hidden" name="cx" value="yourcxvalue" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="myField"/>
<input type="image" src="bg_searchbar_right.gif" name="sa" value="Search" id="mySearch"/>
</div>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</form>
</div>
</div>
</body>

ROUNDED CORNERS

To download, right click on each image and select “Save Image As” or “Save As”. Make sure to save them with .gif extension.

Note: After you’re done with implementing this code, make sure to look at your original Google Custom Search code and add the correct website names and variables that are specific to your website.

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.

We love prowling the web for the latest trends and design inspiration. Here we have composed a list of common resources we use. The primary focus of this list is inspiration, it can come from a photograph, font, or a website. The secondary focus is improving your design skills, which can be done by keeping up to date with tutorials and reading other graphic design blogs. We hope you enjoy our personal list of great sites, and we will be adding to this list in the coming weeks and months as there are a lot of great new sites coming online every other day now.

.
View our latest community site. Ecoki.com

Free Font Downloads

Free Fonts and Other Resources: Web Page Publicity
Huge Collection of Free Fonts: Da Font
Nice Selection of Free Fonts: Urban Fonts
Fonts and Other Freebies: Simply The Best Fonts
1001 Free Fonts for Download: 1001 Free Fonts
Over 9000 Free Fonts: Creamundo
A Small List of Free Fonts: Best Free Fonts

Paid Font Sites

A Large Selection of Fonts for Purchase: My Fonts
Quality Fonts for Purchase: Veer
Information and Fonts for Purchase: Fonts
Font Resources and Sales: Font Haus

Stock Photos and Vectors

The Best Stock Photo and Vector Website: iStockphoto
Quality Photos for Purchase: Shutterstock
Stock Photos and Other Pay Downloads: Veer
Quality, Affordable Vectors for Purchase: Vector Stock
Stock Photos With a Great Selection: Jupiter Images
Stock Photos and Photography Network: Stock Vault
Quality Stock Photos: Corbis

Free Photos and Vectors

Submit Vectors or Download Others for Free: Open Source Vector Art
Tons of Great Free Vectors and Photos: Deviant Art
59 Pages of Free Vector Art: Free Vectors
Large Gallery of Free Vectors: Vecteezy
Quality Vector Downloads: Vector 4 Free
Neat Collection of Free Photos From Around the World: Free Stock Photos
Great Collection of Free Vectors and Resources: You The Designer
Great Free Stock Photos: Free Foto
A List of Free Downloads: Bittbox
700 Free Stock Photos: Free Picture Click

Website Templates

A Few High Quality Wordpress Themes: Evan Eckard
Over 2000 Free Web Templates: OSWD
A Small Selection of Nice Templates: Open Source Templates
A Large List of Free Templates: Free CSS Templates
Nice Wordpress Templates for Download: Free CSS Templates
A Combination of Free and Pay Templates: Free Templates Online
Affordable, Quality Templates: Templamatic
Free Blog Templates: Blogging Themes

CSS Galleries

The Best Sites on the Web: CSS Remix
A Frequently Updated Gallery of Sites: CSS Mania
An Organized List of Nice Sites: Most Inspired
CSS Gallery of Quality Sites: CSS Design Yorkshire
A Selection of Only Nature Based Sites: CSS Nature
A Selective List of Well Designed Sites: Web Creme
High Quality CSS Showcase: CSS Tux
Nice CSS Websites: The Designed Tree
A CSS Collection Organized by Category: CSS Elite

Inspiration

A Great Site About Everything Type: I Love Typography
An Incredible Illustrator: Burst of Beaden
A Great Designer and Illustrator: Fully Illustrated
Customizable List of Design Resources: Cork Dump
The Society of Graphic Designers of Canada: GDC
Freelance Advice Blog and Resources: Freelance Switch
Amazing Collection of Logos: Logopond
Stunning Desktop Wallpapers: Desktopography
A Graphic Design Magazine: Computer Arts

Tutorials

The Best Photoshop Tutorials: PSD Tuts
A Talented Photoshop Designer: Abduzeedo
Photoshop Tutorials and Web Design Resources: Web Design Library
Tutorials for Photoshop, Illustrator and More: Tutorial Vault
A Few Neat Illustrator and Photoshop Tutorials: Design Spice
Great Photoshop Tutorials and Downloads: PS Wish
Tutorials for Every Computer Program: Tutorialing

Free Photoshop Downloads

A Couple Free Patterns for Download: Design Spice
Free Photoshop Brushes: Design Fruit
Free Photoshop Actions: Visual Blast
Tons of Free Photoshop Brushes: Brusheezy
A Few Nice Free Photoshop Brushes: Obsidian Dawn
Great Grunge Brushes and Others: Photoshop Brushes
Free Background Patterns for Photoshop: Free BG
Over 150 Free Background Patterns: Squidfingers

Design Blogs

A Frequently Updated Design Blog: Veerle’s Blog
A Design Magazine and Blog: Smashing Magazine
A European Design Blog: Design In Europe
A Unique Nerdy Blog: Design You Trust
The Personal Blog of a Graphic Designer: Larissa Meek
A German Design Blog: David Hellmann
The Blog of a Canadian Geek/Model: Mostly Lisa
A Graphic Design Blog: Bittbox
A Blog About Freelance Graphic Design Advice: Freelance Switch
A Design Blog Full of Resources: You The Designer
A Popular Design Blog: Fazai 38

Colour Palettes

A Flash Site of User Generated Colour Palettes: Adobe Kuler
Using Colours From Photos: Colr
Colours, Palettes and Patterns: COLOURlovers
A Colour Palette Generated From Your Images: Color Palette Generator
See The Results of Your Palette on a Website: Color Spire
Create and Email Colour Palettes: Color Blender

Tips and Tricks

Vector Do’s and Dont’s: iStockphoto
The Web Design Polish: PSD Tuts
Promote Your Design Business: Freelance Switch
How To Increase Web Traffic: You The Designer

Coders

Quality Programming: XHTMLized
Professional Web Slicing: PSD Slicing
XHTML in 24 Hours: We Use Scissors
Affordable, Quality Coding: PSD2HTML
From Design to Code, Quick and Cheap: Front Enders

Designer Geek Merch

Great Nerdy Clothing and Accessories: Veer
Nice T-Shirt Collection: Design Loot
Graphic Design T-Shirts and Accessories: Cafepress
Geek Merchandise For Everyone: Think Geek
Graphic Design T-Shirts: Zazzle
Unique T-Shirt Designs You Can’t Find Anywhere Else: Allmightys

Newly added resources

A great new marketplace for stock graphic design: Inkd.com
A fantastic resource for finding information on corporate brand identity: Brands of the World
We just launched a fun eco focused site ecoki.com