Dynamic Drive DHTML Scripts- HTML5 Notepad

New Revised CSS Library Forums Web Tools

HTML5 Notepad

Author: Dynamic Drive

Description: This HTML5 based "notepad" app uses HTML5's DOM Storage capability to allow users on your site to save and persist random bits of text for retrieval later, using the user's harddrive as the method of storage. The content does not ever expire until explicitly cleared by the user. It works in browsers that support DOM Storage, namely, IE8+, FF3+, Safari 4+, Google Chrome, and Opera 11+.

Note: In IE8+ and FF3+, the script only works when viewed online (http web address).

Demos:

-"mynotepad1" launched automatically when page loads.
-"mynotepad2" launched dynamically when link below clicked.

Load mynotepad2 via link

Directions

Add the below code inside the <HEAD> section of the page:

The above code references the following two external files, which you should download (right click, and select "Save As"):

Step 2: Then, to launch a HTML5 notepad, just call the function:

notepad.loadpad(id, [x,y])

either automatically after the page has loaded, or dynamically via a link for example. The following code, added to the BODY section of your page, demonstrates both:

This function accepts two parameters, the later being optional:

notepad.loadpad(id, [x,y])

id: An arbitrary but unique string value that uniquely identifies this particular notepad. This should be a unique string for each instance of a notepad on your site. Calling notepad.loadpad() multiple times using the same ID value will bring up the same note pad with the associated contents populated.
[x,y]: An optional array that specifies the left and top position of the notepad respectively. By default each notepad without this parameter entered will simply be positioned to the center right of the window. You can either enter an explicit pixel value for each position, or one of the keywords "left", "center", "right" for the x field, and "top", "center", "bottom" for the y field, respectively. For example:
1. notepad.loadpad('notepadid') //no position specified, will be positioned to center right of window.
2. notepad.loadpad('notepadid', [20,50]) //positioned 20px from the left and 50px from the top of browser viewpoint.
3. notepad.loadpad('notepadid', [20,'center']) //positioned 20px from the left and centered from the top of browser viewpoint.
4. notepad.loadpad('notepadid', ['center','center']) //positioned dead centered relative to the browser viewpoint.
5. notepad.loadpad('notepadid', ['right','bottom']) //positioned at the lower right corner relative to browser viewpoint.

Templates used by each notepad

The output of each notepad is based on two templates as defined inside html5notepad.js:

padHTML:'<div class="notepad"><span class="close" title="Close Notepad">X</span><h3 class="title">Note Pad</h3>'
+'<p>Use the below to save snippets of commonly entered text for quick reuse later. The contents are saved perpetually until deleted by you.</p>'
+'<form></form>'
+'</div>',

noteHTML:'<fieldset><legend>Note Title (optional):</legend>'
+'<input type="text" /><br />'
+'<b>Note content:</b><br />'
+'<textarea></textarea>'
+'</fieldset>'
+'<a href="#" class="control save">Save</a>',

While you're free to make simple changes to these templates, most of the class names used have special meaning and should be preserved.

To edit the style of the notepad, including dimensions, open up and edit html5notepad.css.

The significance of the ID parameter of notepad.loadpad(id)

As documented above, the ID parameter of notepad.loadpad() should be an arbitrary but unique string that uniquely represents an instance of a Notepad. Whenever you wish to recall the same notepad again anywhere on your page or even on another page within the same site, you should call notepad.loadpad() again with that ID to launch it again. This value of this string is also used to insert an ID attribute into the outermost DIV of the notepad in question with that value.