The JavaScript Source: Miscellaneous : Memo Pad

Home

Miscellaneous

Memo Pad

Visitors can make notes on your site and they will be stored in a cookie until they return. The script includes an auto-save feature and the ability to print and e-mail the notes. The cookie has a 4Kb limit.

The JavaScript Source: Miscellaneous : Memo Pad

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Apache Jeff :: http://www.huntingground.freeserve.co.uk */

cookieName="usermemo"
expDays=365

maxLength=4000 // 4078 cookie max
document.onkeyup=chkLength
ns=document.getElementById&&!document.all
firstRun=1

//Memobox script
function initMemo(){
// enter the default text
document.getElementById("intro").innerHTML ="This is your introductory text. Click anywhere to start.</div>"

getMemo()

displayLength=document.f1.the_pad.value.length

}

// ********** recieve (and reformat) the cookie data **********
function getMemo(){ // added function
inf=getCookie(cookieName) // get the saved memo
if(!inf){return}
document.f1.the_pad.value=inf // string from cookie
if(document.f1.the_pad.value.length>0){ // if memo exists
clrIntroLyr() // clear default text
}
chkLength()
}

function chkLength(e){
if(firstRun!=1){ // if there is info in memo-pad Moz shows incorrect count when first run due to Moz generated error message
keyChk=(!moz)?event.keyCode:e.which
firstRun=0 // firstRun prevents that error message
}
document.getElementById("remainder").style.color="#FFCB21"
document.getElementById("remainder").style.fontWeight="normal"
document.getElementById("remainder").innerHTML=maxLength-escape(document.f1.the_pad.value).length

if(maxLength-escape(document.f1.the_pad.value).length<20){
document.getElementById("remainder").style.color="#DDDD00"

if(maxLength-escape(document.f1.the_pad.value).length<10){
document.getElementById("remainder").style.color="#DD0000"
document.getElementById("remainder").style.fontWeight="bold"
}

}

if(escape(document.f1.the_pad.value).length>maxLength){
alert("Your memo is over the "+maxLength+" characters allowed\nby the cookie command.\nThis may result in your memo not being saved.\n\nPlease reduce the size of your memo\n\nThank You")
}
}

function clrIntroLyr(){ // clear default text
document.getElementById("intro").style.left= -500
document.f1.the_pad.focus()
chkLength()
}

function deleteMemo(){
deleteCookie(cookieName)
document.f1.the_pad.value=""
document.getElementById("intro").style.left=0
document.getElementById("remainder").innerHTML="0000"
}

function emailMemo() {
input=document.f1.the_pad.value
var output = ""
for (var i = 0; i < input.length; i++) {
if ((input.charCodeAt(i) == 13) && (input.charCodeAt(i + 1) == 10)){
i++;
output += "%0D%0A"
} else {
output += input.charAt(i)
}
}
location="mailto:yourname@youraddress.com?Body="+output
}

function printMemo(){
padTxt=document["f1"]["the_pad"].value

output = ""
for (var i = 0; i < padTxt.length; i++) {

if(!moz){
if (padTxt.charCodeAt(i) == 13 && padTxt.charCodeAt(i + 1) == 10){output += "<BR>"}
else{output += padTxt.charAt(i)}
}

if(moz){
if (padTxt.charCodeAt(i) == 10){output += "<BR>"}
else{output += padTxt.charAt(i)}
}

}

printWin=window.open('','printwin','left=100.top=100,width=200,height=200')
printWin.document.write("<HTML>\n<HEAD>\n")
printWin.document.write("<TITLE>Print Page</TITLE>\n")
printWin.document.write("<script>\n")
printWin.document.write("\n")
printWin.document.write("<\/script>\n")
printWin.document.write("</HEAD>\n")
printWin.document.write("<BODY onload=\"printWin()\">\n")
printWin.document.write(output)
printWin.document.write("</BODY>\n")
printWin.document.write("</HTML>\n")
printWin.document.close()
}

// ********** Pass the data to the cookie **********
function saveMemo(){ // added function
var expdate = new Date ();
expdate.setTime (expdate.getTime() + (expDays*24*60*60*1000)) // expiry date
path=null  // path="/" = top directory, path=null this documents root directory
data=document.f1.the_pad.value // string going to cookie
if(data.length==0){return} // if no data do not save
setCookie(cookieName,data,expdate,path) // this cookie is using dir root path
}

// Cookie functions
// An adaptation of Dorcht's function for getting a cookie.
function getCookie(name) {
var arg = name + "="
var alen = arg.length
var clen = document.cookie.length
var i = 0;
while (i < clen) {
var j = i + alen
if (document.cookie.substring(i, j) == arg){
return getCookieVal (j);
}
i = document.cookie.indexOf(" ", i) + 1
if (i == 0){
break
}
}
return null
}

function getCookieVal(num) {
var endstr = document.cookie.indexOf (";", num)
if (endstr == -1)
endstr = document.cookie.length
return unescape(document.cookie.substring(num, endstr))
}

// An adaptation of Dorcht's function for setting a cookie.
function setCookie(name, value, expires, path, domain, secure) {
if (!expires){expires = new Date()}
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure")
}

// An adaptation of Dorcht's function for deleting a cookie.
function deleteCookie(name,path,domain) { // deletes cookie
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-00 00:00:01 GMT"
}

// hide or show CONFIRM div
function showHide(layerid){
if (document.getElementById(layerid).style.visibility != "hidden"){
document.getElementById(layerid).style.visibility = "hidden"
}else{
document.getElementById(layerid).style.visibility = "visible"
}
}

window.onload=initMemo;
window.onunload=saveMemo;

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Apache Jeff :: http://www.huntingground.freeserve.co.uk */

<HTML>
<HEAD>
<TITLE>Memo Pad</TITLE>

<script type="text/javascript" src="memoPad.js"></script>

</HEAD>
<BODY>
<div id="intro" style="padding-right:13px; padding-left:13px; z-index:2; left:0px; padding-bottom:13px; overflow:auto; width:344px; cursor:pointer; padding-top:5px; position:absolute; top:27px; height:213px" onclick="clrIntroLyr()"></div>

<FORM name=f1>
<div id=head_table style="background:#00009C; left:0px; width:350px; position:absolute; top:0px; height:240px; text-align:center">
<TABLE border=0 style="font-size:12px; width:100%; color:#ffffff; text-align:left">
<TBODY>
<TR>
<TD width=110>JavaScript Source</TD>
<TD>Memo Box</TD>
<TD>
<div id=remainder>0000</div></TD>
<TD align=middle><A href="#null" style="color:#ffffff;" onclick="showHide('conFirm')" title="Delete the cookie and memo Contents">Delete</A></TD>
<TD align=middle><A href="#null" style="color:#ffffff;" onclick="emailMemo()" title="E-mail the memo contents">E-Mail</A></TD>
<td align="center"><a href="#null" style="color:#ffffff;" onclick="printMemo()" title="Print the memo contents">Print</A></td>
<TD align=middle><A href="#null" style="color:#ffffff;" onclick="self.close()" title="Save and & close Memo-Pad">Save</A></TD>
</TR>
</TBODY>
</TABLE>
<TEXTAREA id=the_pad style="border-right:#908460 4px ridge; border-top:#908460 4px ridge; font-size:12px; overflow:auto; border-left:#908460 4px ridge; width:346px; color:#6b3908; line-height:15px; border-bottom:#908460 4px ridge; height:220px; background-color:#ffffff; text-align:left" rows=1></TEXTAREA>
</div>
</FORM>

<div id=conFirm style="border-right:#808080 2px solid; border-top:#ffffff 2px solid; font-weight:bold; z-index:5; background:#c9bda9; left:50px; VISIBILITY:hidden; border-left:#ffffff 2px solid; width:250px; color:#ffffff; border-bottom:#808080 2px solid; position:absolute; top:65px">
<div style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#FF9f9573', EndColorStr='#FFc9bda9'); height:20px"> JavaScript Source</div>
<P>
<p style="text-align: center;">
<font color="black" size="2">Are you sure you want to delete your memo?</font>
</p>
<FORM>
<span style="border-right:#000000 1px groove; border-top:#000000 1px groove; left:50px; border-left:#000000 1px groove; width:75px; border-bottom:#000000 1px groove; position:relative; top:10px; height:22px"><INPUT style="border-right:#ffffff 1px outset; border-top:#ffffff 1px outset; font-size:10px; border-left:#ffffff 1px outset; width:74px; border-bottom:#ffffff 1px outset; height:20px" onclick="deleteMemo();showHide('conFirm')" type=button value=Yes>
</span>
<span style="border-right:#000000 1px groove; border-top:#000000 1px groove; left:65px; border-left:#000000 1px groove; width:75px; border-bottom:#000000 1px groove; position:relative; top:10px; height:22px"><INPUT style="border-right:#ffffff 1px outset; border-top:#ffffff 1px outset; font-size:10px; border-left:#ffffff 1px outset; width:74px; border-bottom:#ffffff 1px outset; height:20px" onclick="showHide('conFirm')" type=button value=No>
</span>
</FORM>
</div>
</BODY>
</HTML>

<form style="text-align: center;">
<input type="button" onclick="my_pad=window.open('memo_pop.htm','memo1','left=0,top=0,width=350px,height=243px');my_pad.focus()" value="Open Memo Pad">
</form>

Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Whitepapers and eBooks

Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies
Video: Microsoft Partner Program Benefits
Video: Windows Azure Debugging Tips
SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk
Video: Deploy Applications on Windows Azure
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Downloads & Free Trials: Microsoft's New Efficiency Resource Center
Get the Windows 7 SDK
Free Trial: Red Gate SQL Backup Pro 6

Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Virtual Lab: Migrating PHP Applications
Enabling Web Slices and Accelerators with a PHP Site
Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products

All About Botnets
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES