| Programs Plus | Script Library | ![]() |
| Character Counter | Reads characters of a <textarea> form element. The function must include a return for each character counted. The char number out put here is displayed in a text box (COUNTER_textBox). This is really a necessity in order to condition your characters for security. For example you might want to convert the '<' on this side of your document, client side, in order that it can be reprinted server side for blogs or text uploads in a controlled fashion. Some extra work. You might rather try displaying the character count with a little AJAX using the getElementById() function. I prefer the <span> element. For this example it would be <span id = "displayCounter"> </span>. example | <textarea name = "MESSAGE_textarea" rows = "6" cols = "40" onkeyup = "countCharacters()"> </textarea> <span id = "displayCounter"> </span> . . . var messageStr = ""; var lengthOfMessage = 0; function countCharacters() { messageStr = window.document.MSG_FORM.MESSAGE_textarea.value; lengthOfMessage = messageStr.length; window.document.MSG_FORM.COUNTER_textBox.value = lengthOfMessage; // and / or document.getElementById('displayCounter').innerHTML = lengthOfMessage; return; } |
| dollar value | Round values to two decimals. Javascript where var d = dollarValue(t); 't' is the value passed to the dollarValue function which returns d. For example you write a function multiplying 25.95 x .086% sales tax. The JavaScript math formula might be var xyz; xyz = 25.95 * .086; The sales tax value produced using JavaScript is This has far to many decimal places for your customer. To reduce the value to two decimal places feed the value to the dollarValue function as a parameter like this:   d = dollarValue(xyz); and you get 2.23. You can than assign 'd' to your own variable or use your own variable name initially.  : Example (view source) | function dollarValue(t) { // dollar value function returns 'd' var Bstr = ""; var b = t * 100; var c = Math.round(b); var Astr = c.toString(); var Alength = Astr.length; if (Alength <= 2) Bstr = Bstr + "."; var dot = Alength - 3; var counter = 0; while (counter < Alength ) { Bstr = Bstr + Astr.charAt(counter); if (counter == dot) Bstr = Bstr + "."; counter = counter + 1; } d = Bstr; return d; } |
| Embed Tag | Just a few notes about the embed tag. One per page, otherwise the entire selection will be downloaded and could affect bandwidth. This configuration starts immediately, when page is opened. I read somewhere that it's best if you script embed tags outside the page for video files, maybe a document.write("embed ..., from a called JavaScript file. | <embed src='http://www.doggytailwag.com/audio/abcSong.mp3' name='MediaPlayer1' width='75' height='25' loop = 'false' autostart='true' showcontrols='1' controller = 'true' volume='300'> </embed> |
| email obfuscator | Robot scripts scan the Internet for email address. Their prime source are href = mailto:xyz@.... tags. By obfuscating the address they can't read yours or your customer's email address. There are probably better ways to do this, but sometimes you want to be courteous and let your customer use their own email software, with spell checker and all, rather than a form and text field; another reason you may want to add email to your web page. | var emailName; var emailURL; var emailAddress; function getEmailAddress() { emailName = getEmailName(); emailURL = getEmailURL(); emailAddress = "mailto:" + emailName + "@" + emailURL; document.ABC_FORM.action = emailAddress; document.ABC_FORM.submit(); } function getEmailName() { emailName = "mb"; //substitute your email name here return emailName; } function getEmailURL() { emailURL = "programsplus.us"; // substitute your email url here return emailURL; } Use with html code: <input type = "image" onClick = "getEmailAddress()" src = "images/xyz_Email_image.jpg"> or <a href="" onClick = "getEmailAddress()">Contact Us</a> |
| sales tax | Unfortunately it may not be as simple as inserting the sales tax code, from the right, directly into your script, depending on your order form requirements. You may need to make sure the sub total is tallied before shipping costs or coupons are calculated, among other things. You might want to view source to script examples from our sight: general purpose check out page, tally page, or check out page with real time shipping rates, among others. The basic premise is that some states require sales tax locally. The code leaves it to the customer's discretion. The script does not verify the customer's local tax rate, although it could with a little extra script work. If the customer checks the box, tax is automatically added, if they uncheck the box the total is adjusted without sales tax automatically. You might also notice that the value derived for sales tax is fed to the dollarValue function, 'd = dollarValue(t)'. 't' is the sales tax total derived by multiplying the subtotal by the sales tax rate (here .088). The value returned as d is trimmed to two decimal places if the dollarValue function (above) is added to the script. | function taxation() { tax = .085 * subTotal; if (window.document.WEB_ORDER_FORM.TAX_CHECKED.checked == true) { taxs = tax; t = tax d = dollarValue(t); window.document.WEB_ORDER_FORM.SALES_TAX.value = " $ " + d; Total = Total + tax; t = Total; d = dollarValue(t); window.document.WEB_ORDER_FORM.TOTAL_DUE.value = " $ " + d; } else if (window.document.WEB_ORDER_FORM.TAX_CHECKED.checked == false) { taxs = 0; window.document.WEB_ORDER_FORM.SALES_TAX.value = " $ " + 0; Total = Total - tax; t = Total d = dollarValue(t); window.document.WEB_ORDER_FORM.TOTAL_DUE.value = " $ " + d; } return taxs; } |
| localStorage test |
I understand FireFox was the last to come out with the localStorage method in version 3.6. Local storage, it seems, is domain name specific in that the browser will save data from one domain name but can not access the data from a second domain name. Here for example, if I add this code to a web page on the programsplus.us site, other pages from the site can access the data. However if install the script on another site, say orderformcity.com, web pages, or script from that site can not access the data stored by programsplus. Does that make sense? Here, however is some script to test it out with.
If you stumbled upon this site looking for a way to erase localStorage on your device, in FireFox 3.6 I notice you use the drop down 'Tools' menu and then select 'Clear Recent History' and 'Everything' from the drop down menu. You can try it with our tester. Click the 'set storage' button clear your recent history to see if it's still there. I haven't tried in IE, Opera or Safari however, and I wouldn't trust Google's Chrome even if it said it erased the localStorage data. localStorage tester, |
<script language = "javascript"> var xyz = "empty"; function setStorage() { localStorage.lu584days = "hello from localStorage"; document.getElementById('abc').innerHTML = "setting local storage"; } function getStorage() { xyz = localStorage.lu584days; document.getElementById('abc').innerHTML =xyz; } function clearStorage() { localStorage.clear(); document.getElementById('abc').innerHTML = "try the get storage button now"; } </script> <table><tr><td id = 'abc'>hello</td></tr></table> <input type = "button" value = "set storage" onclick = "setStorage()"> <input type = "button" value = "get storage" onclick = "getStorage()"> <input type = "button" value = "clear storage" onclick = "clearStorage()"> |
| text fade |
I think it will just be a fad, but I'm hoping to find text fading has some practical applications. Here's the code. Notice that opacity is give four times without checking for browser type: 'style.opacity', 'style.MozOpacity', 'style.KhtmlOpacity', and for MS 'alpha(opacity = ...)'. Also I read where IE 7 and IE 8 need the 'progid:DXImageTransform function, although I haven't tried it.
Mouseover events trigger the fading in and out and note alpha(opacity ...) is in the range of 0 to 100, while the others are 0.0 to 1.0. I used the parseInt(countOn * 100)/100 to round out the increment number, but it isn't necessary. Also I didn't have any luck with 'for(count = 0, count alt< 1, count += .01)' and had to use the if statement instead for the fade loop to work. I've got a working example using the following code at http://www.orderformcity.com/demo/textFade/spaceMaze.html. Note the mouseover events are used with the table cell, if you haven't tried that before.; |
function showText() { if(countOn < 1) { countOnB = parseInt(countOn * 100)/100; elementOfText.style.opacity = countOnB; elementOfText.style.MozOpacity = countOnB; elementOfText.style.KhtmlOpacity= countOnB; ieCountOn = countOnB * 100; elementOfText.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+ieCountOn+")"; elementOfText.style.filter="alpha(opacity="+ieCountOn+");"; setTimeout("showText()", 10); countOn += .01; } } function hideText() { if(countOn >= 0) { countOnB = parseInt(countOn * 100)/100; elementOfText.style.opacity = countOnB; elementOfText.style.MozOpacity = countOnB; elementOfText.style.KhtmlOpacity= countOnB; ieCountOff = countOnB * 100; elementOfText.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+ieCountOff+")"; elementOfText.style.filter="alpha(opacity="+ieCountOff+");"; setTimeout("hideText()", 10); countOn -= .01; } } |