Images and Words

XML Introduction

Administrator — Thu, 27 Oct 2011 12:34:30 +0000

The XML:

 version="1.0" encoding="ISO-8859-1"?>
>
	>
		>Belgian Waffles>
		>$5.95>
		>two of our famous Belgian Waffles with plenty of real maple syrup>
		>650>
	>
	>
		>Strawberry Belgian Waffles>
		>$7.95>
		>light Belgian waffles covered with strawberries and whipped cream>
		>900>
	>
	>
		>Berry-Berry Belgian Waffles>
		>$8.95>
		>light Belgian waffles covered with an assortment of fresh berries and whipped cream>
		>900>
	>
	>
		>French Toast>
		>$4.50>
		>thick slices made from our homemade sourdough bread>
		>600>
	>
	>
		>Homestyle Breakfast>
		>$6.95>
		>two eggs, bacon or sausage, toast, and our ever-popular hash browns>
		>950>
	>
>

The XSLT:

 version="1.0" encoding="ISO-8859-1"?>
 xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
   style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
     select="breakfast_menu/food">
       style="background-color:teal;color:white;padding:4px">
         style="font-weight:bold"> select="name"/>>
        -  select="price"/>
      >
       style="margin-left:20px;margin-bottom:1em;font-size:10pt">
         select="description"/>
         style="font-style:italic">
           select="calories"/> (calories per serving)
        >
      >
    >
  >
>

XML with XSLT Applied:

JQuery Password Validator

Administrator — Fri, 21 Oct 2011 11:30:18 +0000

The HTML:



Two lowercase letters (a-z)
Two uppercase letters (A-Z)
Two numbers (0-9)
Two special characters from these choices: !@#$
At least 15 characters in length
No repeating characters




Create Password:

The CSS:

#form{
	width:400px;
	margin:0 auto;
}
.clear{
	clear:both;	
}
label{
	margin-bottom:5px;	
}
input{
	width:350px;	
	display:block;
}
.error{
	float:left;
	padding:4px 30px 4px 4px;
	background:#69c url(images/help.png) no-repeat 98% 50%;
}
.showError{
	float:left;
	padding:4px 30px 4px 4px;
	background:#933 url(images/exclamation.png) no-repeat 98% 50%;
}
.showCheck{
	float:left;
	padding:4px 30px 4px 4px;
	background:#3C6 url(images/accept.png) no-repeat 98% 50%;
}
#rules{
	width:427px;
	height:300px;
	margin:0 auto;
	padding:5px;
	background:#fff url(images/bg.png) no-repeat top left;
}
#rules ul{
	list-style:none;
	padding-top:75px;
}
#rules ul li{
	padding:2px 2px 2px 30px;	
}
.check{
	background:url(images/accept.png) no-repeat top left;
}
.nocheck{
	background:url(images/exclamation.png) no-repeat top left;
}

The Script:

<script src="../pathToYourJqueryLibrary.js">script>

$('#password').keyup(function(){
  var pass = $('#password').val();
  var passLen = $('#password').val().length;
  var repeats = /(.)\1/;
 
  if(passLen == 0){
	$('#lowercase').removeClass('check');
	$('#uppercase').removeClass('check');
	$('#numbers').removeClass('check');
	$('#special').removeClass('check');
	$('#atleast').removeClass('check');
	$('.pass').removeClass('showError').removeClass('showCheck').addClass('error');
	$('#norepeat').removeClass('check');
	return false;
  }
 
  if($('#norepeat').hasClass('nocheck')){
  $('#norepeat').removeClass('nocheck').addClass('check');
  }else{
  $('#norepeat').addClass('check');
  }
 
  if(repeats.test(pass)) {//if repeating characters are found
	if($('#norepeat').hasClass('check')){//if the li element already has the class 'check' attached
	  $('#norepeat').removeClass('check').addClass('nocheck');
	}else{//if the li element does not have the 'check' class attached
	  $('#norepeat').addClass('nocheck');
	}
	return false;//This will stop all remaining code from running if it finds repeating characters
  }
 
  if(validateLower(pass)){//if two lower case characters are found
	if($('#lowercase').hasClass('check')){//if the li element already has the 'check' class, do nothing
 
	}else{
	$('#lowercase').addClass('check');
	}
  }else{
	$('#lowercase').removeClass('check');
  }
 
if(validateUpper(pass)){
	if($('#uppercase').hasClass('check')){
 
	}else{
	$('#uppercase').addClass('check');
	}
  }else{
	$('#uppercase').removeClass('check');
  }
 
  if(validateNum(pass)){
	if($('#numbers').hasClass('check')){
 
	}else{
	$('#numbers').addClass('check');
	}
  }else{
	$('#numbers').removeClass('check');
  }
 
  if(validateSpec(pass)){
	if($('#special').hasClass('check')){
 
	}else{
	$('#special').addClass('check');
	}
  }else{
	$('#special').removeClass('check');
  }
 
  if(passLen > 14){
	if($('#atleast').hasClass('check')){
 
	}else{
	$('#atleast').addClass('check');
	}
  }else{
	$('#atleast').removeClass('check');
  }
 
  if(validatePass(pass)){
	$('.pass').removeClass('error').addClass('showCheck')
  }else{
	if($('.pass').hasClass('error')){
	  $('.pass').removeClass('error').addClass('showError');
	}
	if($('.pass').hasClass('showCheck')){
	  $('.pass').removeClass('showCheck').addClass('showError');
	}
  }
 
});
 
function validatePass(pass){
	var filter = /^(?=(?:.*[a-z]){2})(?=(?:.*[A-Z]){2})(?=(?:.*\d){2})(?=(?:.*[!@#$]){2}).{15,20}$/
	if(filter.test(pass)){
		return true;
	}else{
		return false;
	}
}
 
function validateLower(pass){
	var filter = /^(?=(?:.*[a-z]){2}).*$/
	if(filter.test(pass)){
		return true;
	}else{
		return false;
	}
}
 
function validateUpper(pass){
	var filter = /^(?=(?:.*[A-Z]){2}).*$/
	if(filter.test(pass)){
		return true;
	}else{
		return false;
	}
}
 
function validateNum(pass){
	var filter = /^(?=(?:.*[0-9]){2}).*$/
	if(filter.test(pass)){
		return true;
	}else{
		return false;
	}
}
 
function validateSpec(pass){
	var filter = /^(?=(?:.*[!@#$]){2}).*$/
	if(filter.test(pass)){
		return true;
	}else{
		return false;
	}
}

The Screenshot:

Explanation Coming Soon!

Regular Expression Top Ten List

Administrator — Thu, 20 Oct 2011 11:05:43 +0000

Regular Expressions

Def. In computing, a regular expression provides a concise and flexible means for “matching” (specifying and recognizing) strings of text, such as particular characters, words, or patterns of characters.

1. Username

^[a-z0-9_-]{3,15}$

^                    # Start of the line
  [a-z0-9_-]	     # Match characters and symbols in the list, a-z, 0-9 , underscore , hyphen
             {3,15}  # Length at least 3 characters and maximum length of 15 
$                    # End of the line

2. Password

((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{6,20})

(			# Start of group
  (?=.*\d)		#   must contains one digit from 0-9
  (?=.*[a-z])		#   must contains one lowercase characters
  (?=.*[A-Z])		#   must contains one uppercase characters
  (?=.*[@#$%])		#   must contains one special symbols in the list "@#$%"
              .		#     match anything with previous condition checking
                {6,20}	#        length at least 6 characters and maximum of 20	
)			# End of group

3. Hexadecimal Color Code

^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

^		 #start of the line
 #		 #  must constains a "#" symbols
 (		 #  start of group #1
  [A-Fa-f0-9]{6} #    any strings in the list, with length of 6
  |		 #    ..or
  [A-Fa-f0-9]{3} #    any strings in the list, with length of 3
 )		 #  end of group #1 
$		 #end of the line

4. Email

^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9]+
(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$

^			#start of the line
  [_A-Za-z0-9-]+	#  must start with string in the bracket [ ], must contains one or more (+)
  (			#  start of group #1
    \\.[_A-Za-z0-9-]+	#     follow by a dot "." and string in the bracket [ ], must contains one or more (+)
  )*			#  end of group #1, this group is optional (*)
    @			#     must contains a "@" symbol
     [A-Za-z0-9]+       #        follow by string in the bracket [ ], must contains one or more (+)
      (			#	   start of group #2 - first level TLD checking
       \\.[A-Za-z0-9]+  #	     follow by a dot "." and string in the bracket [ ], must contains one or more (+)
      )*		#	   end of group #2, this group is optional (*)
      (			#	   start of group #3 - second level TLD checking
       \\.[A-Za-z]{2,}  #	     follow by a dot "." and string in the bracket [ ], with minimum length of 2
      )			#	   end of group #3
$			#end of the line

5. Image File Extension

([^\s]+(\.(?i)(jpg|png|gif|bmp))$)

(			#Start of the group #1
 [^\s]+			#  must contains one or more anything (except white space)
       (		#    start of the group #2
         \.		#	follow by a dot "."
         (?i)		#	ignore the case sensitive checking
             (		#	  start of the group #3
              jpg	#	    contains characters "jpg"
              |		#	    ..or
              png	#	    contains characters "png"
              |		#	    ..or
              gif	#	    contains characters "gif"
              |		#	    ..or
              bmp	#	    contains characters "bmp"
             )		#	  end of the group #3
       )		#     end of the group #2	
  $			#  end of the string
)			#end of the group #1

6. IP Address

^([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.
([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])$

^		#start of the line
 (		#  start of group #1
   [01]?\\d\\d? #    Can be one or two digits. If three digits appear, it must start either 0 or 1
		#    e.g ([0-9], [0-9][0-9],[0-1][0-9][0-9])
    |		#    ...or
   2[0-4]\\d	#    start with 2, follow by 0-4 and end with any digit (2[0-4][0-9]) 
    |           #    ...or
   25[0-5]      #    start with 2, follow by 5 and end with 0-5 (25[0-5]) 
 )		#  end of group #2
  \.            #  follow by a dot "."
....            # repeat with 3 time (3x)
$		#end of the line

7. Time Format

12-Hour:

(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)(am|pm)

(				#start of group #1
 1[012]				#  start with 10, 11, 12
 |				#  or
 [1-9]				#  start with 1,2,...9
)				#end of group #1
 :				#    follow by a semi colon (:)
  [0-5][0-9]			#   follow by 0..5 and 0..9, which means 00 to 59
            (\\s)?		#        follow by a white space (optional)
                  (?i)		#          next checking is case insensitive
                      (am|pm)	#            follow by am or pm

24-hour:

([01]?[0-9]|2[0-3]):[0-5][0-9]

(				#start of group #1
 [01]?[0-9]			#  start with 0-9,1-9,00-09,10-19
 |				#  or
 2[0-3]				#  start with 20-23
)				#end of group #1
 :				#  follow by a semi colon (:)
  [0-5][0-9]			#    follow by 0..5 and 0..9, which means 00 to 59

8. Date Format (dd/mm/yyyy)

(0?[1-9]|[12][0-9]|3[01])/(0?[1-9]|1[012])/((19|20)\\d\\d)

(			#start of group #1
 0?[1-9]		#  01-09 or 1-9
 |                  	#  ..or
 [12][0-9]		#  10-19 or 20-29
 |			#  ..or
 3[01]			#  30, 31
) 			#end of group #1
  /			#  follow by a "/"
   (			#    start of group #2
    0?[1-9]		#	01-09 or 1-9
    |			#	..or
    1[012]		#	10,11,12
    )			#    end of group #2
     /			#	follow by a "/"
      (			#	  start of group #3
       (19|20)\\d\\d	#	    19[0-9][0-9] or 20[0-9][0-9]
       )		#	  end of group #3

9. HTML Tag

<("[^"]*"|'[^']*'|[^'">])*>

<	  	#start with opening tag "<"
 (		#   start of group #1
   "[^"]*"	#	only two double quotes are allow - "string"
   |		#	..or
   '[^']*'	#	only two single quotes are allow - 'string'
   |		#	..or
   [^'">]	#	cant contains one single quotes, double quotes and ">"
 )		#   end of group #1
 *		# 0 or more
>		#end with closing tag ">"

10. HTML Links

HTML A tag:

(?i)<a([^>]+)>(.+?)a>

(		#start of group #1
 ?i		#  all checking are case insensive
)		#end of group #1
<a              #start with "
  (		#  start of group #2
    [^>]+	#     anything except (">"), at least one character
   )		#  end of group #2
  >		#     follow by ">"
    (.+?)	#	match anything 
         a>	#	  end with "

Extract HTML link:

\s*(?i)href\s*=\s*(\"([^"]*\")|'[^']*'|([^'">\s]+));

\s*			   #can start with whitespace
  (?i)			   # all checking are case insensive
     href		   #  follow by "href" word
        \s*=\s*		   #   allows spaces on either side of the equal sign,
              (		   #    start of group #1
               "([^"]*")   #      only two double quotes are allow - "string"
               |	   #	  ..or
               '[^']*'	   #      only two single quotes are allow - 'string'
               |           #	  ..or
               ([^'">]+)   #     cant contains one single / double quotes and ">"
	      )		   #    end of group #1

Go get some!

The New HTML5 Structure

Administrator — Tue, 18 Oct 2011 11:20:08 +0000

HTML5 was designed with backwards compatibility in mind. The new semantic markups and the new doctype and overall document structure can be used right now with no negative effects on your new or previous work. Unlike JavaScript and CSS, where additions are only supported when browser makers implement them into their parsers, there’s no need to wait on new browser versions to be released before using HTML5′s new syntax.

Let’s take a look at the new HTML5 document structure.





HTML 5 Rocks!

Let’s break it down, shall we?

The DOCTYPE

First we have the doctype which tells the browser and other parsers which version and flavor of HTML this document is using. Because browsers have to support all existing content on the web, there’s nor reliance on the doctype to tell them which features should be supported in a given document. The 15 characters that make up the new doctype declaration are the minimum characters required to get every browser to display a page in standards mode. Browsers have never required the lengthy doctype declarations of XHTML Strict and HTML4 Transitional in order to display a page correctly. The only way you trigger quirks mode now is to eliminate a doctype altogether.

The HTML tag

The xmlns is no longer necessary for the page to validate. The attribute ‘lang’ is not required either.

The Meta tag


HTML 5 Rocks!

The meta tag has been greatly simplified. In nearly all cases, utf-8 is the value you’ll be using in you documents. The entire character encoding declaration must be included within the first 512 characters of your document. It should appear before any content-based elements (like the ‘title’ element).

The CSS declaration

In the style sheet declaration the type=”text/css” was never a requirement with HMTL4 or XHTML, even when using the strict doctypes. So we don’t need it here because all browsers recognize the content of linked stylesheets without requiring the extra attribute. In CSS when a new feature is added it also has to be added to the browser’s rendering engines. So, older browsers won’t recognize new CSS features.

The HTML Shiv

Prior to IE 9, IE prevented unrecognized elements from receiving styles. These mystery elements were seen by the rendering engine as “unknown elements”, so you were unable to change they way they looked or behaved. This includes made up elements (like ‘recipe’, or ‘ziggy’) but also any elements which had yet to be defined at the time those browser versions were developed. This includes all the new HTML5 elements. A very simple piece of JavaScript called the HTML5 Shiv makes new and mystery elements visible to older version of IE. It needs to be wrapped in conditional comments to target IE versions less than IE 9.

External JavaScript sources

Javascript is the only real scripting language used on the web, and all browsers will assume you are using JavaScript even when you don’t declare that fact. So they ‘type’ attribute is not required in the ‘script’ tag. We’ve put the script tag at the bottom of our page to conform to best practices for embedding JavaScript. This has to do with the page loading speed; when a browser encounters a script it will stop loading the page until it parses the entire script. Scripts placed at the bottom of the page will be parsed after the page has fully loaded. In some cases, like the HTML5 Shiv, the script needs to be placed in the head tag of your document because you want it to take effect before the browser starts rendering the page.

This is a quick intro; more to come!

Friendly prompts for your users

Administrator — Fri, 14 Oct 2011 18:53:58 +0000

There are numerous methods that guide your users through your online forms. Popup dialog, colorful borders around text fields that are empty or not in the correct format, hidden divs or spans that come in and out of view based on user input, etc. We’ve seen it all.

This is a neat little method that I like to use. It’s low impact, very little code overhead and it just looks streamlined and professional.

But I’m biased, so you decide for yourself.

Consider the following very scaled down example:

The HTML

The CSS:

button{
margin-bottom:10px;
}
input{
display:block;
margin:5px;
}
.new1, .new2, .new3{
float:left;
padding:3px 30px 3px 3px;
}
.newer1{
float:left;
padding:3px 30px 3px 3px;
background:#3C6 url(images/accept.png) no-repeat 95% 50%;
}
.newer2{
float:left;
padding:3px 30px 3px 3px;
background:#933 url(images/exclamation.png) no-repeat 95% 50%;
}
.newer3{
float:left;
padding:3px 30px 3px 3px;
background:#3C6 url(images/accept.png) no-repeat 95% 50%;
}
.clear{
clear:both;
}

The jQuery:

$('#wrapMe').click(function(){
     $('.new1').removeClass('.new1').addClass('newer1');
     $('.new2').removeClass('.new2').addClass('newer2');
     $('.new3').removeClass('.new3').addClass('newer3');
});

All that’s taking place here is a style swap on the divs that surround the input elements. At first they are unseen because they are not styled to be seen. Then the bare bones style is removed and a new one is added with background colors and little icons that tell the end user if they have provided acceptable information or not.

Peace!

Validate Email with jQuery and JavaScript RegExp

Administrator — Fri, 14 Oct 2011 12:04:16 +0000

I often like to scrub user input before it even hits the processing page or a database. This is good practice as it ensures the user has provided the requested information in the correct format and using the correct data types for the input fields.

Email validation is quite simple, and there are various stages at which we can check the user provided input to see if it follows the standard email format. We could check the user input when our user navigates away from the input field (Blur or onChange). We could check when the user submits the form by calling a function onSubmit. I like to attach a function to the email input field that checks on each keystroke, and when the format is satisfied give the user a visual prompt to tell them they got it right. Remember to include the jQuery library in order to use the scripts that follow.

Consider the following simple input text field:

The id attribute will be used to “hook” into the function via jQuery. Next we build a keyup function that will perform a task each time the user releases a key on the keyboard within the email text field only.

$('#emailAddress').keyup(function(){     
     var email == $('#emailAddress').val();
     if(validateEmail(email)){
          $(this).css('background-color', 'green');
     }else{
          $(this).css('background-color', 'red');
     }
});

This block of code says that each time the user performs a keyup on the html element with and id of ‘emailAddress’, then run the code within the keyup function. It first sets a variable called ‘email’ to the value of the emailAddress input text field. It will need this value to compare it to the email format in the next function. The next function is valled validateEmail.

function validateEmail(email){
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(filter.test(email)){
     return true;
}else{
     return false;
}
}

This block of code is doing some pretty heavy stuff if you’ve never seen it before. Let’s tear it up.

The validateEmail function is called from within the first block of code each time the user performs a keyup within the email input text field. It passes the current value of the email input text field into the validateEmail function which performs a test on it using the filter variable. The filter variable provides the structure for a valid email address.

If the current value of the user provided data does not match the filter structure, then we get a return false back to the keyup function. The conditional statement will fall through to else and the background color of the input text field will be red; a visual cue to the user that they have not yet provided a valid email address.

As soon as they provide the validateEmail function with a valid email that matches the structure of the filter variable, the conditional statement in the first function will be satisfied and it will change the color of the input text field to green; a visual cue that the user has provided a valid email.

Try it out!

Sticky Footer

Administrator — Fri, 14 Oct 2011 11:04:05 +0000

Basic HTML structure

The CSS Code:

html, body {
height:100%
}
#wrap{
min-height:100%
}
#main{
overflow:auto;
padding-bottom:150px/*must be the same as the footer height*/
}
#footer{
position:relative;
margin-top:-150px;/*negative value of footer height*/
height:150px;
clear:both
}

We are here, we are here, we are here!

Administrator — Thu, 13 Oct 2011 11:46:26 +0000

So, let’s say you’re trying to count the number of divs on your page, for whatever reason your project involves. jQuery has a handful of ways to accomplish this, for this example we are going to be playing around with the length property.

Consider the following:

Let’s break it down! The log function is simply outputting the string that we are providing to it, and then appends a paragraph element with a message to the div element with the id of ‘data’.

function log(msg) {    
$('#data').append('' + msg + '
');  
}

We have a div that includes an ‘img’ tag, and a div with an id of ‘data’.

The first conditional statement in the script is saying if the number of ‘img’ elements found is not zero then pass the first string to the log function, else pass the second string.

if ($('img').length) { // implies *not* zero    
log('We found img elements on the page using "img"');  
} else {    
log('No img elements found');  
}

The next conditional statement is an example of failing to find the referenced element, in this case an ‘input’ element.

if ($(':input').length != 0) {    
log('Found an input-type element using ":input"');  
} else {    
log('No input-type elements found');  
}

Notice that using…

if ($('element').length != 0)

is the same as using…

if ($('element').length

The final bit of code is a simple call to the log() function with a string outputting the findings of its search for ‘img’ elements.

log('Looking for "div img", found ' + $('div').find('img').length);

Easy huh? Don’t feed the cow!

CSS Shorthand Properties

Administrator — Wed, 12 Oct 2011 11:14:07 +0000

Let’s get started!

Colors

The most widely used method for setting color properties is to use hexadecimal notation, which is an octothorpe (#) followed by six digits. You can also use keywords and RGB notation. When a color’s hexadecimal code is made up of three pairs of digits (such as #000000, or #FFFFFF) you can eliminate one digit from each pair. So #000000 becomes #000, and #FFFFFF becomes #FFF, and #336699 becomes #369, etc.

Box Dimensions

All of the properties that affect box dimension share the same syntax: shorthand property followed by one to four space separated values:

property: value1;
property: value1 value2;
property: value1 value2 value3;
property: value1 value2 value3 value4;

Which side of the box the values affect depends on how many values are specified. Check it out:

One value: all sides
Two values: top and bottom, left and right
Three values: top, right and left, bottom
Four values: top, right, bottom, left

Margin and Padding

This is a common method for providing margin settings:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:1em;

The following accomplishes the same settings:

margin:1em 0 2em 1em;

The same system is used for padding properties as well.

Borders

Borders have size, style and color. The defaults are medium for width (how wide depends on the user agent), none for style, and the color is determined by the color of the element you are setting the border on. Order does not matter.

border-width:1px;
border-style:solid;
border-color:#000;

This is the more efficient shorthand method:

border:1px solid #000;

Backgrounds

This is a great time and space saver!

Consider the background properties:

background-color:#f00;
background-image:url(pathToImage/image.png);
background-repeat:no-repeat repeat-x repeat-y;
background-attachment:fixed;
background-position:0 0 or top left;

This can be greatly downsized to:

background:#f00 url(pathToImage/image.png) repeat-x fixed 0 0;

The order these are in shouldn’t matter, but I would keep it as is.

These are the defaults for the background properties:

color:transparent
image:none
repeat:repeat (x and y)
attachment:scroll
position:0% 0%

The following accomplish the same thing:

background-color:#f00;
background:#f00;

Setting background colors in this manner will take precedence over a background image set by a previous rule. Consider the following:

p {
background:#f00 url(image.png) no-repeat;
}
div p{
background:#0f0;
}

All paragraphs not in a div element will have a background image and be red where the image does not cover the background. Any paragraph within a div will have a green background and no image.

Fonts

There are a lot of properties when dealing with fonts:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande", sans-serif;

And the shorthand for the above:

font:italic small-caps bold 1em/140% "Lucida Grande", sans-serif;

As aforementioned the order doesn’t really matter, but I would use the spec set forth by the W3C. Remember, you MUST set values for font-size and font-family, and in that order. The intial values for font properties are:

font-style:normal
font-variant:normal
font-weight:normal
font-size:medium
line-height:normal
font-family:depends on user agent

Lists

These shorthand properties are for ordered and unordered lists:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

And the shorthand:

list-style:square inside url(image.gif);

This is not an exhaustive list of shorthand properties, as there are several more that are not widely used mainly because of poor browser support. With the onset of HTML5, browser compatibility, and CSS3 I am confident this will soon change. Go Standards!

Thanks for playing!

jQuery clone()

Administrator — Thu, 06 Oct 2011 16:10:14 +0000

The Javascript:

The CSS:

  >
  	#cloneMe{
		border:1px dashed #000;
		padding:10px;
		background-color:#F90;
		color:#000;
		margin:10px 5px;
		width:300px;
		float:left;
		text-align:center;
	}
	.clear{
		clear:both;	
	}
	input{
		margin:10px 5px;	
	}
  >

The HTML:


This is an example of using the clone() method on elements with ID's.  Big difference!
 
  
 
  
 
  
     Clone me bro!

Get Cloning!