Archive for the ‘Web Development’ Category
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 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 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 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 to download the source code.
11/16/2009 – Updated script to function correctly in IE6/IE7.
Posted on October 16, 2009 - by Dr. Div
PTO (Paid Time Off) Calculator
A quick application I put together in PHP and Javascript that helps you calculate how much PTO time you will accrue in a given period of time. (more…)
Posted on September 29, 2009 - by Dr. Div
How to Style Google Custom Search Field with CSS + Rounded Corners (curves)
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. (more…)
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 download the script.
Posted on September 15, 2009 - by admin
101 Design resource sites
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
