Web Development

Front End Web Development Workflow

Hey guys and gals, just a quick pointer to my latest article on front end web development. You can read it on World Wide Creative’s website here : READ MY ARTICLE HERE

Web Development

Update remote repo with command line using git and github

If you are using git and github to maintain your code here are some quick and short commands to remember.

General Web Development Client-side Validation

A couple of days ago, I faced a situation whereby I needed to add some form validation to an aspx page.

I had options of either JavaScript or client side validation. JavaScript seemed like an easier solution…
<h5>Client-side JavaScript for form validation</h5>

[code lang=”js”]
<script language="javascript">
Function CheckForm(form)
for(var intCtr = 0; intCtr <= (form.elements.length – 5); ++intCtr)
var temp = form.elements[intCtr];
if(temp.type == "text" && temp.value == "")
alert("Please Enter All Information!");
return false;
return true;

jQuery Plugins

Ultimate jQuery plugin list


  • [button link=” size=”small” target=”self” color=”orange”]Ajax Plugins and Tutorials[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Alert Windows and Prompts[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Animation and Effects[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Browser Tweaks and Fixes[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Charts and Presentations[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Color Pickers[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Corners and Borders[/button]
  • [button link=” size=”small” target=”self” color=”orange”]CSS[/button]
  • [button link=” size=”small” target=”self” color=”orange”]DOM and Other Plugins[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Drag and Drop[/button]
  • [button link=” size=”small” target=”self” color=”orange”]File Uploading[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Flash and Other Media[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Form Select Boxes[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Form Validation[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Forms and Input Fields[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Games and Game Development[/button]


  • [button link=” size=”small” target=”self” color=”orange”]Grids[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Inline Edit and Editors[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Mapping[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Photos/Images/Galleries[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Plugin Development[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Rating Plugins[/button]
  • [button link=” size=”small” target=”self” color=”orange”]RSS and XML/XSLT[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Search Plugins[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Sliders and Accordions[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Social Bookmarking[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Tables and Table Sorting[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Tabs/Menus/Navigation[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Tagging and Tag Clouds[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Text and Links[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Time and Date Pickers[/button]
  • [button link=” size=”small” target=”self” color=”orange”]Tooltip Plugins and Tutorials[/button]


[button link=”” size=”small” target=”self” color=”orange”]The Ultimate jQuery List >>[/button]

jQuery Web Development

Show & hide content using jQuery

In this tutorial I will show you how to show and hide HTML content using just 6 lines of JavaScript code. feel the power! dependency jQuery.

Here’s an example of what you are going to build: [button link=”” size=”small” target=”self”]View working example[/button]


<div class="main_image">
<div class="desc" style="display: block;"><a class="collapse show" href="#">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none;">
Hello this is content to slide up and show what is inside.

<a href="#" target="_blank">Loreme ipsum delore</a></div>
<div class="main_image">
<div class="desc" style="display: block;"><a class="collapse show" href="#">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none;">
Hello this is content to slide up and show what is inside.

<a href="#" target="_blank">Loreme ipsum delore</a></div>


[css]* { margin: 0; padding: 0; outline: none; }

body { background: #CCC; margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; }

/*–Main Image Area–*/
.main_image {
margin: 20px 0 0 20px; width: 249px; height: 440px;
float: left; background: white;
position: relative; overflow: hidden;
color: #fff;

moz-box-shadow: 0px 0px 4px #666;
-webkit-box-shadow: 0px 0px 4px #666;
box-shadow: 0px 0px 4px #666;

.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
.main_image p {
font-size: 1.2em;
padding: 10px;
margin: 0;
line-height: 1.6em; }
.main_image .desc {
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
.main_image .block {
height: 410px;
width: 100%;
background: #111;
border-top: 1px solid #000; }
.main_image a.collapse {
background: black;
height: 30px; width: 249px;
position: absolute; top: -30px; right: 0px;
font: normal 12px arial;
color: white; text-align: center;
.main_image {
background-position: left bottom;

The JavaScript

[js]$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

//Toggle Teaser
});//Close Function [/js]

Web Standards

Learning jQuery

Hi Team

As We have adopted jQuery as our JavaScript library of choice.  I thought it would be to all our advantage if we all knew a little more about the library and its widgets + tools & plug-ins.

One cool place to start in order to get the basics down, would be here:

We are already using some of the widgets on our sites, Reurnert, King pie, Bidvest Intranet (most recent).

In an effort to learn how to implement jQuery UI widgets I had created this test suite.  it is an exact replica of the jQuery UI website test suite

The aim behind it was to build each widget one by one. Replicating what they had on their website, so that i could learn how to do it.  Please download your copy of the element test suite and add your own pages, play around with the code so that you can get to grips with it.


Survey monkey

Was thinking we could try this out next time we do a survey type job like the eskomfactor report job.

[button link=”” style=”orange” open_type=”blank”] View survey monkey here [/button]

Mobile Development


Hey guys check out this cool site GOMO. A nice introduction into mobile websites

…surfs up!