Web Design Blog » JavaScript http://www.northstarwebdesign.com/web-design-blog Just another WordPress weblog Tue, 07 Jun 2011 15:48:24 +0000 en hourly 1 http://wordpress.org/?v= Useful Javascript: Detect and Indicate Credit Card Type http://www.northstarwebdesign.com/web-design-blog/useful-javascript-detect-and-indicate-credit-card-type/ http://www.northstarwebdesign.com/web-design-blog/useful-javascript-detect-and-indicate-credit-card-type/#comments Wed, 02 Feb 2011 14:45:36 +0000 admin http://www.northstarwebdesign.com/web-design-blog/?p=133 JavaScript: Credit Card Type Detection

I added this useful bit of JavaScript code to an ecommerce project (www.vintagecellars.com) to detect the type of Credit Card someone is entering on a website. enjoy!

This JavaScript needs to be added to the <head> of the document:

<script type="text/javascript">
// <![CDATA[
function SelectCC(ccnum) {
var first = ccnum.charAt(0);
var second = ccnum.charAt(1);
var third = ccnum.charAt(2);
var fourth = ccnum.charAt(3);
if (first == "4") {
//Visa
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("visa").src="/images/visa-card.png";
document.getElementById("cctype").value="1";
}
else if ( (first == "3") && ((second == "4") || (second == "7")) ) {
//American Express
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("amex").src="/images/amex-card.png";
document.getElementById("cctype").value="3";
}
else if ( (first == "5") ) {
//Mastercard
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("mastercard").src="/images/mastercard-card.png";
document.getElementById("cctype").value="2";
}
else if ( (first == "6") && (second == "0") && (third == "1") && (fourth == "1") ) {
//Discover
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("discover").src="/images/discover-card.png";
document.getElementById("cctype").value="4";
}
else {
document.getElementById("amex").src="/images/amex-card-bw.png";
document.getElementById("visa").src="/images/visa-card-bw.png";
document.getElementById("mastercard").src="/images/mastercard-card-bw.png";
document.getElementById("discover").src="/images/discover-card-bw.png";
document.getElementById("cctype").value="";
}
}
// ]]></script>

Then you need the credit card types indicated on the page in images:

<div>Card Type:
<img id="visa" src="/images/visa-card.png" alt="" />
<img id="mastercard" src="/images/mastercard-card.png" alt="" />
<img id="amex" src="/images/amex-card.png" alt="" />
<img id="discover" src="/images/discover-card.png" alt="" /></div>

You will need to upload Credit Card Type image files, full color and black and white versions, to an “/images/” directory.

Lastly, you will need the input field with the user action code assigned:

<input id="ccnum" onkeyup="SelectCC(this.value)" name="ccnum" />

You can see this script in action on www.vintagecellars.com.

]]> http://www.northstarwebdesign.com/web-design-blog/useful-javascript-detect-and-indicate-credit-card-type/feed/ 1 Useful JavaScript: Toggle Div Show/Hide http://www.northstarwebdesign.com/web-design-blog/useful-javascript-toggle-div-showhide/ http://www.northstarwebdesign.com/web-design-blog/useful-javascript-toggle-div-showhide/#comments Sun, 10 Jan 2010 21:59:41 +0000 admin http://www.northstarwebdesign.com/web-design-blog/?p=47 JavaScript: Show or Hide Elements

JavaScript: Show or Hide Elements

I was developing an e-commerce site today and I ran across a pretty light weight piece of JavaScript code to show and hide a DIVs.

Here it is:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

Put that between your HEAD tags and call it from your code with “onClick=”.

Simple!

]]> http://www.northstarwebdesign.com/web-design-blog/useful-javascript-toggle-div-showhide/feed/ 0 Launched! New NorthstarWebDesign.com http://www.northstarwebdesign.com/web-design-blog/new-northstarwebdesign-com-launched/ http://www.northstarwebdesign.com/web-design-blog/new-northstarwebdesign-com-launched/#comments Fri, 01 Jan 2010 08:01:58 +0000 admin http://www.northstarwebdesign.com/web-design-blog/?p=3 New NorthstarWebDesign.com Screenshot

Launched! New NorthstarWebDesign.com Screenshot

We have launched our new redesign of NorthstarWebDesign.com. With so much client work we had no time to re-brand for the last few years and thought it was well over due to be updated to reflect the level and style of our work.

The new website will continue to change over the next few weeks and we will let you know about updates!  Thanks for your interest and continued support!

http://www.northstarwebdesign.com

]]> http://www.northstarwebdesign.com/web-design-blog/new-northstarwebdesign-com-launched/feed/ 1