Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

Grab the theme at Github.
Install the theme.
Create markup & style patterns.
Learn.

WCTeditor
A super-simple text editor for modern browsers. Supports:

bold
italic
underline
numbered lists
bulleted lists
links
stripping html (except line breaks/paragraphs)
spell-check via callback
Tested so far and works ok in:

FF 3.6
Chrome 8
Safari 5
Opera 11
IE 7+
NOT mobile WebKit
Usage

Requires jQuery and the jQuery templates plugin (there's also a version with no template dependency). Get those and then apply the WCTeditor plugin to a textarea with some options:

$("#myTextArea").WCTeditor({
showNumList: true,
showBullList: true,
pathToPlugin:"../"
});
Yay! Done.

Options

showBold

boolean: Whether or not you'd like the bold button to be shown. On by default.

showItalic

boolean: Whether or not you'd like the italicize button to be shown. On by default.

showUnderline

boolean: Whether or not you'd like the underline button to be shown.

showNumList

boolean: Whether or not you'd like the ordered list button to be shown.

showBullList

boolean: Whether or not you'd like the unordered list button to be shown.

showLink

boolean: Whether or not you'd like the link button to be shown. On by default.

showStripHtml

boolean: Whether or not you'd like the strip/clean up HTML button to be shown.

showSpellCheck

boolean: Whether or not you'd like the spellcheck button to be shown.

userClasses

array of strings: CSS class(es) you'd like to have applied to the div that wraps the editor.

defaultText

string: Text you want the editor to display with, if different than what's in your textarea.

showCharCount

boolean: Whether or not you'd like to show a character counter. See below for where to change the way the character counter works.

charCountTmpl

string: The template for your character counter. This can be just text or some HTML, but you need to insert "{{html chars}}" where you want the count to actually appear.

maxLength

integer: The maximum length of the user's input, including HTML, if different than the maxlength of your textarea.

spellcheckUrl

string: Path to the spellchecking service you'd like to call.

pathToPlugin

string: Location of this plugin (i.e., location of WCTeditor.js) relative to the file it's being implemented in.

theme

string: A directory name. The plugin will look for a stylesheet at [pathToPlugin]/themes/[theme]/WCTeditor.css

placeholderText

string: Helpful text that will display within the editor while it is empty, if defaultText is not set and the textarea is empty.

Functions

You may want to override some of these to change the default functionality.

applyFormatting

Applies the basic designMode commands.

updateTextarea

Pushes changes to the editor to your textarea, then calls updateCharCount if it's enabled.

updateCharCount

Updates the character count. Counts down from your specified maximum, then goes to negative. Assigns the CSS class "tooLong" to the count only once it goes negative.

updateButtons

Updates the state of the formatting buttons depending on the cursor location.

setLink

args: leftPosition (left position of formatting button)

Displays the interface to set a URL and wires up the button in that interface to update the editor markup.

stripHTML

Removes all markup except paragraphs and line breaks.

stripHTMLComments

Removes HTML comments from content pasted into the editor.

spellcheck

IE-only implementation, because other browsers include spellcheck. Sends the text within the editor to the service specified by the spellcheckUrl property, and expects an array of results in the format:

{originalWord: string, suggestions: []}
Wraps each misspelling in a font tag, and wires up an event handler to display a small window with the suggestions and an option to ignore the misspelling. Clicking a suggestion replaces the misspelling and removes the font tag, clicking ignore simply removes the font tag.

function getRange() {
return window.getSelection ?
window.getSelection().getRangeAt(0) :
document.selection.createRange();
}
function setSelection(range) {
if (range.select) {
range.select();
} else {
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}

This tutorial describes how to use features found in Microsoft Internet Explorer 5.5 or later to create an HTML Editor Application. The application you create in this tutorial contains an editable region where users can type and format text using all of the standard formatting commands. For example, users can make the text bold or italic, change the font size, and make bulleted or numbered lists. A toolbar provides the formatting buttons, buttons for opening and saving files, and drop-down list boxes for font and block formatting selections. A menu allows alternate access to the functionality provided by the toolbar. As of Internet Explorer 6, you can also use the HtmlDlgSafeHelper object to change the face or color of the font.

With this HTML Editor Application, users can create HTML documents and save them to disk in either HTML or text format. If saved as an .htm file, the documents are viewable in Windows Internet Explorer or in the HTML Editor Application. Files saved as .txt can be viewed in any text editor.

This tutorial demonstrates how to do the following:

Create and use editable regions with the CONTENTEDITABLE attribute.
Use formatting Command Identifiers and the execCommand method.
Use the Internet Explorer WebControls toolbar element behavior, as well as a menu element behavior and an HTML+TIME (Timed Interactive Multimedia Extensions) time2 behavior that displays a splash screen.
Use the HtmlDlgSafeHelper object to access the fonts and block formats on a user's machine, and to display the color dialog box. Internet Explorer 6 introduces the HtmlDlgSafeHelper object.
Create an HTML Application (HTA).
You can use this kind of application to allow "what you see is what you get" (WYSIWYG) content editing of Web sites by users. You can also use this type of application as an editor for an Internet e-mail program.

Requirements and Dependencies 
Implementation Steps 
Step 1: Create the HTML file 
Step 2: Create the Toolbars 
Step 3: Create the Text Formatting Functions 
Step 4: Create the File New, File Open, and File Save Functions 
Step 5: Create the Menu 
Step 6: Create the Splash Screen 
Final Wrap-up 
Related Topics

Sets or gets a value that indicates whether the document can be edited.

Syntax

Copy
[ sMode = ] object.designMode
Possible Values

sMode String that specifies or receives one of the following values.
On
Document can be edited.
Off | Inherit
Default. Document cannot be edited.
The property is read/write. The property has a default value of Off | Inherit.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

You can use the designMode property to put Windows Internet Explorer into a mode so that you can edit the current document.

While the browser is in design mode, objects enter a UI-activated state when the user presses ENTER, clicks an object that has focus, or double-clicks the object. Objects that are UI-activated have their own window in the document. You can modify the UI only when the object is in a UI-activated state.

You cannot execute script when the value of the designMode property is set to On.

•
Home
Features
•
Learn
Explore
•
Launch Scripts from Webpage Links
AppleScript applications can interact with websites displayed on your computer to perform tasks and display information. This is done through the process of the AppleScript application registering itself with the OS as the handler of specific URL protocols and schemes.

The following describes how to create your own helper script applications.

THE INFO.PLIST FILE

When you save the script as an application bundle, it will contain the standard Mac OS X bundle elements including an XML property list file defining important aspects of the script application.

To access the Info.plist property list, click on the script application with the Control key held down to access the Finder Contextual Menu. Choose Show Package Contents from this menu to open the script application bundle in a new window. Open the Contents folder within the new window to reveal the Info.plist file. Open this file in a text or property list editor and add the following XML keys and values to the property list.

To identify the Application, add the following lines to the property list, replacing the blue placeholder text shown here with a unique bundle identifier for your application:

<key>CFBundleIdentifier</key>
<string>com.apple.AppleScript.WebpageHelper</string>
To identify the URL handler that triggers the applet, add the following item to the property list, replacing the blue text with title of your URL protocol and the URL scheme of your protocol:

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>Webpage Helper</string>
<key>CFBundleURLSchemes</key>
<array>
<string>webpagehelper</string>
</array>
</dict>
</array>

Recently I wrote an article for A List Apart about Forward thinking form validation and I introduced a script I wrote that emulates some of the new HTML Forms chapter functionality in older browsers, allowing a developer to use all these new features and have it work the same across the board.

In the spirit of giving back to the community I have released it under a dual BSD and MIT license so you can do as you please with it. I’ve setup a github repository so you can fork it, watch it suggest ways to improve it and submit any issues.

This script doesn’t rely on any libraries. It uses feature detection to find out if the browser already supports the constraint validation API and either hooks into the native support or creates methods to emulate it.
View a live demo Download the source files
How does it work?

Let’s dive into the inner workings of the script and see how some of it works. As discussed in the Forward thinking form validation article the script adds the support for some of the HTML5 forms chapter input types and attributes as well as the constraint validation API.

On page load you run the H5F.setup() method which accepts two arguments, the second being optional. The first argument can be a HTMLFormElement, HTMLCollection of form elements or an array of HTMLFormElements. The second optional argument is an object to setup the class names to be applied to the fields in their different validity states.

I loved elastic textareas since the very first moment I used one (at facebook obviously). They let you save screen real estate while at the same time they are more comfortable for the end user. It’s one of the rare occasions when you can have your UI cake and eat it too!

However, I never liked the implementation of the feature. In case you never wondered how it’s done, let me explain it in a nutshell: All elastic textarea scripts (or at least all that I know of) create a hidden (actually, absolutely positioned and placed out of the browser window) div, copy some CSS properties from the textarea to it (usually padding, font-size, line-height, font-family, width and font-weight) and whenever the contents of the textarea change they copy them to the hidden div and measure it’s dimensions. It might be good enough for facebook, where the styling of those textareas is fairly simple and consistent throughout the site, or any other particular site, but as a generic solution? I never liked the idea.

So, I tried to explore a different approach. As Andrea Giammarchi recently wrote “This is almost intrinsic, as developers, in our DNA: we spot some interesting concept? We rewrite it from scratch pretending we are doing it better!” and I’m no exception (although in this case I don’t think I did it better, I just think it has potential). The basic idea is quite naive, but it works quite well in most browsers (Internet Explorer being the black sheep as usual): Test if the textarea is scrollable, and if so, increase it’s rows attribute and try again. If it’s not scrollable initially, try decreasing it’s rows attribute until it becomes scrollable (and then ++ it).

It works flawlessly on Firefox and quite well on Safari, Chrome and Opera (it just slightly twitches when it enlarges in those). Stupid Internet Explorer though repaints too many times, causing a flicker at the bottom when the user is typing, something really disturbing, so I can’t consider the script anything above experimental at the moment. I’m just posting it in case anyone has an idea of how to fix the aforementioned issues, because apart from those it has quite a few advantages:

* Should work with any CSS styles
* No library requirements (unlike all the others I know of)
* Only 800 bytes minified (2.4KB originally)

So, here it is:

Recently I decided to clean up all the spam from an abandoned phpBB forum of mine, there was a lot to delete. In the phpBB version that I use there is no option to "check all" topics you want to moderate. So I came up with a little bookmarklet to do this for me. Here it is, only improved to work within frames and toggle (check if not checked, uncheck otherwise) all checkboxes in sight. Tested in FF and IE6/7.

To install, add this to your bookmarks/favourites:

This is a bookmarklet. You go to page that has one or more forms and you click the bookmarklet. It completes the form for you with some random data. The whole thinking was to have a form ready to be submitted and generating as less validation errors as possible. Here are some details:

* All defaults are kept as they are
* All passwords fields are completed with the same password, in case there is a password/password confirmation combo. The default password is "secret"
* If a text field has the string "email" in its name, the auto-generated value would be a random string @ example.org
* If a text field has the string "name" in its name, a name-looking value will be generated.
* All checkboxes will be checked (who knows which one of them might be "Accept terms" or anything else that is required)
* Multi-selects will have a random number of random options selected

Dev.Opera - Follow the standards, break the rulesDev.Opera - Follow the standards, break the rules

* Home
* Articles
* Libraries
* Forums
* SDK
* Authors
* Contribute
* Sign up

Login

User name:

Password:

Lost password? remember
Making legacy pages work with Web Forms 2

By Hallvord R. M. Steen · 5 Apr, 2007

Published in: wf2, html5
The Web Forms 2 specification, part of the HTML5 work at WHAT WG, makes it easier to write and validate forms - but some compatibility problems with legacy scripts exist. I have seen legacy content run into the following classes of problems:

* Un-intended form validation prevents submitting forms
* Legacy scripts are confused by new DOM properties
* Some properties are resolved as URLs

# Form.submit() throws error if form validation fails
Below I will explain each of these with examples and show how you can work around or fix the problems. For more details on how to use Web Forms 2 for new or reworked websites, refer to the article improve your forms using HTML5.

This started as a really simple little excersise in bordom one evening just to see if we could replicate the look and feel of the iPhone sliding toggles on the web. Now, it's a fully blown plugin that should do most the work for you! Just like the Last.FM plugin the styling is left almost entirely up to you. There is a template you need to follow, but this just determines a layout, nothing more.

Simple cross browser detection of text changes for input and textarea elements using a jQuery custom event plugin by ZURB

An extremely lightweight PHP framework. It includes caching, session, database, form validation, twitter, oauth and asynchronous/non-blocking curl components.

Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

DATE/TIME OPTIONS:

* 12-hour or 24-hour clock
* custom date/time format (countless possibilities, including JSON and XML)
* date-only, time-only, or specific fields!
* date/time range limits
* era-selection (BCE/CE, BC/AD, etc.)
* start week on any day (Sunday, Monday, etc.)
* custom base for 2-digit years (1900, 2000, etc.)
* UTC offsets/time zones NEW!

Then peep these STYLING OPTIONS:

* custom labels/languages
* custom CSS styles
* jQuery UI Theming
* jQuery UI Theme Switcher
* jQuery ThemeRoller
* pop-up or always-present picker
* visible or hidden field

It's also PROGRAMMER-FRIENDLY:

* easy to implement
* easy AJAX validation
* easy Date/String conversion, including JSON and XML
* create multiple pickers at once NEW!
* easy removal NEW!
* easy to extend

And let's not forget those USABILITY FEATURES:

* single-click value selection
* double-click select-and-dismiss NEW!
* WAI-ARIA 1.0 keyboard accessibility
* em-based relative-size

Limit is a plugin for the javascript framework Jquery that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit.

Limit is a plugin for the javascript framework Jquery that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit.

This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

We have put together a great compilation of beautiful web application interfaces.

The web applications that were selected to be part of this showcase are based on usability, simplicity, colors and overall layout.

Despite what many people will tell you, there are no hard-and-fast rules when it comes to call-to-action buttons. Yes, it’s true that large, colorful buttons, surrounded by plenty of space are usually the most successful, but it’s important that you tailor each button to the primary task of the web page in question, whether it’s to Signup, Checkout, Register or anything else. As a designer, it’s your job to make it as easy as possible for visitors to achieve these tasks and call-to-action buttons are the most powerful tools at your disposal, so use them wisely.

Generally speaking, call-to-action buttons should be simple and clear. They must stand out and grab a user’s attention. Everything must be carefully considered, from the trigger words used to colors, sizes, shapes and positioning. These buttons must be highly visible, but not so garish that they render your site ugly or unbalanced.

This article showcases modern and interesting contact/web form solutions found around the Internet. I also collected interesting ways how people decide to call their contact forms – get in touch, contact info, say hello, talk to me, say hey, connect, say “hi”, mail us and of course – contact us. My own personal opinion is, you should use Contact or Contact Us in your navigation, but supplement it with creative relate photos and styled text.