HTML5 Notepad
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.
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:- notepad.loadpad('notepadid') //no position specified, will be positioned to center right of window.
- notepad.loadpad('notepadid', [20,50]) //positioned 20px from the left and 50px from the top of browser viewpoint.
- notepad.loadpad('notepadid', [20,'center']) //positioned 20px from the left and centered from the top of browser viewpoint.
- notepad.loadpad('notepadid', ['center','center']) //positioned dead centered relative to the browser viewpoint.
- 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><!--noteHTML goes here--></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.