Mick Redman

Friday 27 August 2010

Form validation using jQuery

The code below offers a simple example, which you can build upon, of using jQuery to validate your forms. I have added a few comments in green to explain what is going on.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Validate form</title>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
/* apply validation rules to myform */
$("#myform").validate(
{
rules:
{
/* apply a simple rule to contactname */
contactname: "required",
/* apply more rules to email */
email:
{
required: true,
email: true
}
},
/* provide special messages to contactname */
messages:
{
contactname: "Please enter a contact name"
}
});
});
</script>
<style type="text/css">
body
{
font-family:sans-serif;
}
</style>
</head>
<body>
<form method="post" action="" id="myform">
<label for="name">Name:</label>

<input type="text" size="20" name="contactname" id="contactname" value="" class="required" /><br />
<label for="email">Email:</label>

<input type="text" size="20" name="email" id="email" value="" class="required email" /><br />
<label for="message">Message:</label>

<textarea rows="5" cols="20" name="message" id="message"></textarea><br />
<input type="submit" value="Submit" name="submit" />
</form>
</body>
</html>

CSS Box gradient - cross browser

Here is a nice small example of how to get box gradients (using CSS) working across most browsers. Don't be put off by the silly stuff you need for IE. Just replace the colour values.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box gradient</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
min-height:100px;
width:400px;
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>Box gradient</h1>
</div>
</body>
</html>

Rotating boxes without images

Most rotating box CSS examples do not work cross browser. I like to try and avoid simulating this with, for example, pictures created at an angle in a good graphics package (like GIMP). Today however, I found this web page http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Not all the functionality works at this stage, but enough to get going. You'll need to get hold of the JavaScript libraries first. You can also take off the backgrounds and just use the technique for rotating text. My example below is a simple one.

See demo.

<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>

Wednesday 25 August 2010

Simple layout #2

Here is the second design template. There is no real content area. I've left it down to you how you want the main content to display.

See demo.

Well, here goes:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
margin-left:120px;
font-size:4em;
font-weight:lighter;
color:#FFFFFF;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
}
#nav ul
{
margin:0 auto;
width:920px;
}
#nav ul li
{
float:left;
list-style:none;
}
#nav ul li a
{
width: 100px;
   height:28px;
   padding-top:8px;
   padding-bottom:4px;
   padding-left:30px;
   padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li a:hover
{
background:#FF0000;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
<div id="footer">
<div id="nav">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
</div>
</div>
</body>
</html>

Thursday 19 August 2010

How to add interesting fonts to your page

You must have seen websites where the title or main text had a great font and thought, that's what I want for my site. Well here is how to do it.

See demo.

The first thing you need is to find the font that you want to use. I would recommend sites such as http://openfontlibrary.org/ Here at least you shouldn't get into licensing trouble. Once you have identified the font you'd like to use, you need to download it. You will probably get a .ttf file which is fine.

Not all browsers handle fonts in the same way so you need to have multiple formats of the font and the necessary code to embed it in your page reliably. To do this we use fontsquirrel fontface generator at http://www.fontsquirrel.com/fontface/generator. Check the 'Agreement' box first. Click on the 'Add fonts' button and upload your font. You will then be returned with a kit. The kit contains the fonts in all the formats you need and the necessary CSS code you need to embed it in your page.

Here is an example of the results:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Nice fonts</title>
<style type="text/css">
@font-face
{
font-family: 'KarmaRegular';
src: url('fonts/karma-webfont.eot');
src: local('☺'), url('fonts/karma-webfont.woff') format('woff'), url('fonts/karma-webfont.ttf') format('truetype'), url('fonts/karma-webfont.svg#webfont4iIQLJby') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-family: 'KarmaRegular';
font-size:4em;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Wednesday 18 August 2010

Simple layout #1

Welcome to the first in a series of simple layouts which you I would like to share with you. Do what you will with them, just remember us when you need a new website. We like to keep things simple, fast and readable. Sadly the bottom corners of the right hand div don't display correctly in IE. Not even using CSSPIE, but as this is only an example I though it best not to add any code to work. It would only clutter the important parts up.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple layout 1</title>
<style type="text/css">
body
{
margin:0;
font-family:Georgia, serif;
background:#C23F67;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
}
#leftHand, #rightHand
{
float:left;
}
#leftHand
{
width:600px;
}
#rightHand
{
width:320px;
background:#000000;
min-height:400px;
margin-bottom:20px;
position:relative;
border-radius:0 0 20px 20px;
behavior:url(scripts/PIE.htc);
}
#footer
{
clear:left;
width:100%;
min-height:100px;
border-top:1px solid #FFFFFF;
}
#logo
{
font-style:italic;
font-size:20em;
text-align:center;
margin:90px;
}
h1
{
margin-top:40px;
font-size:6em;
font-weight:lighter;
}
p
{
text-align:justify;
margin-right:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftHand">
<h1>header</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="rightHand">
<span id="logo">I</span>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Making the title overlap the content container

There are times when you would like the content to be contained in a box. Sometimes you would like the header to overlap the top of that box. Here is how to do it. The crucial lines here are position:relative; top:40px; within the h1 CSS reference.

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>