Web Design Blog » Code 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 Website Optimization + Server Optimization = Profits Soar! http://www.northstarwebdesign.com/web-design-blog/website-optimization-server-optimization-profits-soar/ http://www.northstarwebdesign.com/web-design-blog/website-optimization-server-optimization-profits-soar/#comments Tue, 26 Oct 2010 17:58:46 +0000 admin http://www.northstarwebdesign.com/web-design-blog/?p=119 Oscommerce Sales Graph Profits go Ballistic

Oscommerce Sales Graph of client profits going through the roof.

One of my clients was on television. They did not bother to tell me this. Before being on TV, they were receiving an average of 3000 visitors per month and they were doing fine on a shared hosting account with about several other clients. A few more details on this client are that they were running on 6 year old code and they had not invested in any upgrades since the website was originally designed. That being the case, the code and the server was not optimized to handle the tsunami of traffic (100 times) that they had coming down the pipe. This was made evident by the website going offline as soon as they went on air. They called me and I dropped everything to jump on the problem right away.

I started making adjustments to the server to try and get it back online, but everything i tried to do was in vain and the server went offline within a few seconds of reboots. I, immediately, started setting up a new server that i could move them to and they would not share with anyone else. A couple minutes later i had the client off the shared server with the shared server fully operational again, and a couple hours later, moved the client to their own server where they were fully operational and no longer in a shared environment. The server was optimized and they were back in business. The server they were running on was a UNIX machine running Apache. There were many optimizations we set on the server, however one very important setting that made a big difference was the “KeepAlive” Timeout. We set that from 1600 seconds down to 300 seconds. This made a big difference in the server performance along with the other server optimizations.

On another front, I attacked was the software side of things. I setup some standard .htaccess code to optimize file handling along with other issues to improve the User Experience and then began to march through the code on the website looking for ways to improve the code. I changed a majority of the code form Table based inline HTML to all Web 2.0 DIV based HTML/CSS. This made a significant difference in this heavy database driven e-commerce website and furthered the website optimization necessary to maximize the profits for the client.

After all was said and done, the client was back online and doing business the same day at a minimum cost and as fast as possible. This month they are expected to gross over $70K after having $300 monthly averages in the past. Needless to say the Champagne is out and they are celebrating!

]]> http://www.northstarwebdesign.com/web-design-blog/website-optimization-server-optimization-profits-soar/feed/ 0 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 WordPress Plugin: Posts By Category Widget http://www.northstarwebdesign.com/web-design-blog/wordpress-plugin-posts-by-category-widget-1-0/ http://www.northstarwebdesign.com/web-design-blog/wordpress-plugin-posts-by-category-widget-1-0/#comments Fri, 08 Jan 2010 02:21:59 +0000 admin http://www.northstarwebdesign.com/web-design-blog/?p=17 Wordpress Plugin: Posts By Category Widget

Wordpress Plugin: Posts By Category Widget

This simple plugin is a widget that displays a list categories and the posts in those categories separated by category on your widgetized sidebar.

Requires at least: 2.1
Tested up to: 2.9.1

Download


Demo


Installation

  1. Upload `postbycategory.php` to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Use your ‘Presentation’/'Sidebar Widgets’ settings to drag and configure


Configuration

  • Widget title: the title of the widget
  • List types: ul for bulleted list, p for paragraph, br for paragraph with line breaks
  • Post count: Number of random posts you would like to be displayed, must be a number
  • Category: Only this category will be selected as the source, must be the ID of the Category


Change Log

  • 1-January-2010: Plugin created
]]> http://www.northstarwebdesign.com/web-design-blog/wordpress-plugin-posts-by-category-widget-1-0/feed/ 5 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