Blogfreakz - Web Design and Web Development resources » Software & Tools http://blogfreakz.com A site dedicated to keeping up with the latest trends on Web Design Thu, 24 May 2012 05:41:14 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 Smart Validate: jQuery Credit Card Validation Plugin http://blogfreakz.com/tutorial/smart-validate-jquery-credit-card-validation-plugin/ http://blogfreakz.com/tutorial/smart-validate-jquery-credit-card-validation-plugin/#comments Wed, 22 Feb 2012 07:54:15 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=25443

If you’re conducting an online business, this jQuery plugin called Smart Validate will be a helpful addition to your website. Created by the egrappler.com web developers, it makes credit card validation easier and more convenient.

Smart Validate Smart Validate: jQuery Credit Card Validation Plugin

The following credit cards are supported by Smart Validate:

-          Visa Card

-          Master Card

-          Discover

-          American Express

-          Diners Club

It can also be extended to support other credit cards types.

Add these in your head function of your HTML

-          Add reference to the latest jQuery script

-          Add reference to ccvalidate.js file

-          Add reference to ccvalidate.css file

In your HTML document, add the following code below or use classes “cc-ddl-type”, “cc-card-number” and “cc-checkout” to existing elements as they are required since this jQuery plugin uses the classes to read the needed values.

 

<select>
<option value="mcd">Master Card</option>
<option value="vis">Visa Card</option>
<option value="amx">American Express</option>
<option value="dnr">Diner Club</option>
<option value="dis">Discover</option>
</select>
<input type="text">
<input value="Checkout" type="submit">

 

 

This plugin has only one parameter, which is the callback function. It returns a Boolean value which indicates if the credit card number is a valid format or not.

 

$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
if (!isValid) {
alert('Incorrect Credit Card format');
return false;
}
}

 

Below is the full code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jQuery Credit Card Validation Plugin Sample</title>
 <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
 <script src="ccvalidate.js" type="text/javascript"></script>
 <link href="ccvalidate.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
 $(document).ready(function() {
 $('.cc-container').ccvalidate({ onvalidate: function(isValid) {
 if (!isValid) {
 alert('Incorrect Credit Card format');
 return false;
 }
 }
 });
 });
 </script>
</head>
<body>
 <div class="cc-container">
 <select id="cc-types" class="cc-ddl-type">
 <option value="mcd">Master Card</option>
 <option value="vis">Visa Card</option>
 <option value="amx">American Express</option>
 <option value="dnr">Diner Club</option>
 <option value="dis">Discover</option>
 </select>
 <input type="text" id="card-number" class="cc-card-number" />
 <input type="submit" value="Checkout" class="cc-checkout" id="check-out" />
 </div>
</body>
</html>

Check out the DEMO and DOWNLOAD.

 

 

 


Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/smart-validate-jquery-credit-card-validation-plugin/feed/ 0 ProCSSor – Web Based CSS Prettifier http://blogfreakz.com/css-layout/procssor-web-based-css-prettifier/ http://blogfreakz.com/css-layout/procssor-web-based-css-prettifier/#comments Tue, 14 Sep 2010 22:15:44 +0000 Mufti Ali http://blogfreakz.com/?p=9781 ProCSSor is a web-based service that allow us to formatting and prettifying CSS files on the fly. ProCSSor has unique formatting styles and several customizable options to prettify your CSS  like brace styles, right/left columns and indent properties.
ProCSSor can grab a CSS file by simply copy-pasting, uploading or mentioning the URL directly.

proCSSor ProCSSor Web Based CSS Prettifier

Website: http://www.procssor.com
License: Free License

Incoming search terms for the article:

]]> http://blogfreakz.com/css-layout/procssor-web-based-css-prettifier/feed/ 0 Fluid – Turn Your Favorite Websites Into Mac Desktop Applications http://blogfreakz.com/tools/fluid-turn-your-favorite-websites-into-mac-desktop-applications/ http://blogfreakz.com/tools/fluid-turn-your-favorite-websites-into-mac-desktop-applications/#comments Sun, 22 Aug 2010 06:42:46 +0000 Mufti Ali http://blogfreakz.com/?p=8830 Web applications like Gmail, Facebook, Campfire and Pandora are becoming more and more like desktop applications every day. Running each of these web apps in an individual tab in your browser can be a real pain.

Fluid lets you create a Site Specific Browser (SSB) out of any website or web application, effectively turning your favorite web apps into desktop apps. Using Fluid to create an SSB out of your favorite website is simple.

href=”http://fluidapp.com/”>dock large Fluid Turn Your Favorite Websites Into Mac Desktop Applications

Enter the website’s URL, provide a name, and optionally choose an icon. Click “Create”, and within seconds your chosen website has been converted into a fully native Mac desktop application that appears in your Dock.

Download: http://fluidapp.com

Incoming search terms for the article:

]]> http://blogfreakz.com/tools/fluid-turn-your-favorite-websites-into-mac-desktop-applications/feed/ 0 Create Your Own Website, Forums With Hpage http://blogfreakz.com/web-design/create-your-own-website-forums-with-hpage/ http://blogfreakz.com/web-design/create-your-own-website-forums-with-hpage/#comments Thu, 19 Aug 2010 20:25:38 +0000 Mufti Ali http://blogfreakz.com/?p=8794 Hpage is a innovative website that allow us to create free website easily. You do not need to have any HTML or other coding knowledge to create free website. It’s just take 2 minitues to create webiste.

hpage Create Your Own Website, Forums With Hpage

they offers many advanced feature to the users like like guestbook, password protect web pages, insert keywords, meta tags, favicon, additional css file and HTML codes to header section of the website.
Best of all is they also offers 300MB free storage space with each account to store files like video, images, HTML files, flash files and downloads. It has a great number of unique design templates (more than 300).

I have also attached a screenshot of a website that I have created at hpage. It is just to give an idea how easy it is to build a free website at hpage.com.

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/create-your-own-website-forums-with-hpage/feed/ 1 Wix – Free Flash Website Builder http://blogfreakz.com/tools/wix-free-flash-website-builder/ http://blogfreakz.com/tools/wix-free-flash-website-builder/#comments Wed, 11 Aug 2010 04:25:36 +0000 Mufti Ali http://blogfreakz.com/?p=8339 Wix is a free website builder tool that will allow you to build and deploy interactive and SEO friendly Flash websites. With Wix, users can create a website  from scratch, or by customizing one of Wix’  Flash website templates.
wix1 Wix Free Flash Website Builder There are photography, business, musician, artist and ecommerce websites, filled with design elements suited to each niche, and can streamline a user’s design process. It has a clean graphic interface and drag & drop feature.

To get started, browse through template galleries  inside the Create section of the homepage. Click on a template you wish to edit  and add your own text, photos, links, music, etc. You can also customize the color, font, size, effects, settings, etc.

wix2 Wix Free Flash Website Builder

Wix lets you add clip art, photo galleries, widgets, music players, Flash animation and more to your website, just by dragging and dropping the items where you want them.

Some Wix-Powered Websites

eucoastervision

eucoastervision Wix Free Flash Website Builderjazmineimagines

jazmineimagines Wix Free Flash Website Buildermichelemotta

michelemotta Wix Free Flash Website Builder

KDOT Designs

KDOT Designs Wix Free Flash Website BuilderBIG-JOHNS

BIG JOHNS Wix Free Flash Website BuilderStyle-Hub-Image-Consultancy

Style Hub Image Consultancy Wix Free Flash Website BuilderYMP-2010-Plus3

YMP 2010 Plus3 Wix Free Flash Website BuilderYak-Design

Yak Design Wix Free Flash Website Buildersamuelcrowder

samuelcrowder Wix Free Flash Website BuilderALC

ALC Wix Free Flash Website Builder

Website: http://www.wix.com/

Incoming search terms for the article:

]]> http://blogfreakz.com/tools/wix-free-flash-website-builder/feed/ 0 Muro – deviantART’s free HTML5 powered drawing Application http://blogfreakz.com/tools/muro-deviantarts-free-html5-drawing-application/ http://blogfreakz.com/tools/muro-deviantarts-free-html5-drawing-application/#comments Tue, 10 Aug 2010 13:24:18 +0000 Mufti Ali http://blogfreakz.com/?p=8312 Muro is deviantART’s free HTML5 powered drawing applicattion. Muro allows users to create complete works of art in ways never before realized by digital drawing programs. deviantART Muro already boosts standard and interactive brushes, full-blown layer capabilities, and the ability to upload directly to your deviantART account.

muro Muro deviantARTs free HTML5 powered drawing Application

Features

  • deviantART’s free HTML5 powered drawing app
  • 21 brushes, each uniquely programmed
  • Basic and Pro modes, both free
  • Intuitive layout and functionality
  • Supports all HTML5-enabled browsers including the iPad
  • Submit drawings directly to your deviantART Gallery
  • Convenient design allows more focus on your art
  • Join fellow deviants in a public forum to share drawings
  • Start private threads in your group’s Admin Area and enjoy picture comments

Requirements: HTML5-enabled browsers
Demo: http://www.deviantart.com/muro/
License: License free

Incoming search terms for the article:

]]> http://blogfreakz.com/tools/muro-deviantarts-free-html5-drawing-application/feed/ 1 The Best Community Snippets On The Web Design Billboard in May’10 http://blogfreakz.com/news/the-best-community-snippets-on-the-web-design-billboard-in-may%e2%80%9910/ http://blogfreakz.com/news/the-best-community-snippets-on-the-web-design-billboard-in-may%e2%80%9910/#comments Sat, 05 Jun 2010 06:55:00 +0000 Mufti Ali http://blogfreakz.com/news/the-best-community-snippets-on-the-web-design-billboard-in-may%e2%80%9910/ In this round-up, you’ll find number of top resources, tutorials, freebies which left deep impression on web design community, as the month of May had a lot of interesting articles produces by different sources.

Incoming search terms for the article:

]]> http://blogfreakz.com/news/the-best-community-snippets-on-the-web-design-billboard-in-may%e2%80%9910/feed/ 0 10 Leading Presentation Tools Every Designer Should Know http://blogfreakz.com/news/10-leading-presentation-tools-every-designer-should-know/ http://blogfreakz.com/news/10-leading-presentation-tools-every-designer-should-know/#comments Thu, 03 Jun 2010 19:37:00 +0000 Mufti Ali http://blogfreakz.com/news/10-leading-presentation-tools-every-designer-should-know/ Here are 10 top of the line programs that will help you take your PowerPoint presentation global. If you haven’t used any of these to create some great video, give them a shot!

]]> http://blogfreakz.com/news/10-leading-presentation-tools-every-designer-should-know/feed/ 0 Ultimate List of HTML5 and CSS3 Tools http://blogfreakz.com/news/ultimate-list-of-html5-and-css3-tools/ http://blogfreakz.com/news/ultimate-list-of-html5-and-css3-tools/#comments Thu, 03 Jun 2010 16:13:05 +0000 Mufti Ali http://blogfreakz.com/news/ultimate-list-of-html5-and-css3-tools/ HTML5 and CSS3 are really revolutionizing the worlds of web development and web design, because they are bringing so many new features to work with to the fields.

]]> http://blogfreakz.com/news/ultimate-list-of-html5-and-css3-tools/feed/ 0 27 Useful Screen Capture Tools http://blogfreakz.com/news/27-useful-screen-capture-tools/ http://blogfreakz.com/news/27-useful-screen-capture-tools/#comments Thu, 03 Jun 2010 00:19:56 +0000 Mufti Ali http://blogfreakz.com/news/27-useful-screen-capture-tools/ Screen capture tools might help you to make screen grabbing job easier. Here we share 27 useful screen capture tools.

]]> http://blogfreakz.com/news/27-useful-screen-capture-tools/feed/ 0