Regular demo
Grid demo

Heres how to implement:

1. Link your JS

Sources:

jQuery
img_prev.js

2: Set up your HTML.

Start by adding a class to your image called “imgPrev”. You then want to add the src attribute, the src will be the URL to the thumbnail. Finally add your rel attribute, this will be the URL to the full sized image you want to preview.

3: Add your CSS

You only need to add css to the imgPrev id, this id is appended to the HTML body via the JS. This is the container that holds the images.

#imgPrev {
	position: absolute;
	background: url('img/trans_bg.png');
	padding: 5px;
	display: none;
}

Background image source:

trans_bg.png

Regular demo
Grid demo

click to see demo

The following is how to implement

1: Link your JS.

jQuery
jquery.color.js
inlineValidator.js

2: Set up your HTML form.

        Name* 


        Phone*


        Email*


        Address


        Zip*


        Comments
        

Every input needs the class “input”. To make an input required it needs the class “required”. To make an input validate a phone number it needs the class “phone”, for email address “email” and for zip code “zip”.

2: Give it a little style.

input, textArea {
	padding: 5px;
	margin-bottom: 1em;
	border: 2px solid #ddd;
	display: block;
	background-image: url('error.jpg') no-repeat;
	background-position: 500px 2px;
}

textArea {
	height: 100px;
	overflow: hidden;
}

label {
	font-weight: bold;
	color: #666;
}

You will need two images error.jpg and valid.jpg, these are the two I used:

3. That should do it

If you would like to change some things like the width of inputs, the id of the form or the border colors, I have made it very easy to update the variables at the top of inlineValidator.js

click to see demo

The tools are nice to use, but I thought I would show the technique I always use when designing these buttons. Its very easy to do, its simply just a rounded corner rectangle with a gradient.

Open your favorite editor, I personally use FireWorks and sometimes PhotoShop. If you are looking for a open source editor I would suggest GIMP

Creating the Image

Start with a basic rounded corner rectangle for the first layer of your image.

I then give the image a slight inner glow. This is an option in the filter section of FireWorks.

Use the rounded corner rectangle tool again this time with slightly more roundness to it. Select the fill option, choose gradient and set both the colors to white. A white with 10% opacity to a white with 35%. You can play with these numbers until it looks right. Put this gradient on the top half of your image.

Want to add a hover over effect?

Here is a little technique I have picked up. Double the canvase height of your image so you can put a duplicate directly below.

Add some color to the bottom layer of the image on the bottom.

Now add some css.

a.myButtonDiv
{
  display:block;
  width: 271px; /* Exact width of image */
  height: 74px; /* Exactly half of the overall image */
  background: url("http://www.marioedgar.com/images/blog/5.jpg") no-repeat top left;
  line-height: 74px;
  text-align:center;
  color: #fff;
  font-weight:bold;
  font-size: 16px;
}

a.myButtonDiv:hover
{
  background-position: 0 -74px;
  text-decoration:none;
}

And finally the html

     Look at my Button!

Look at my Button!

jQuery? Why not?

Let make this thing stand out a little more by using some animation, start with the CSS tweaked a little bit:

      a.myButton, span.firstBackground, span.secondBackground
      {
          width: 271px;
          height: 74px;
          display:block;
          line-height:74px;
          text-decoration:none;
          font-weight:bold;
          color: #000;
          text-align:center;
          position:absolute;
          top:0;
          color:#fff;
          font-size: 16px;
      }

      .firstBackground
      {
          background: url('http://www.marioedgar.com/images/blog/5.jpg') no-repeat;
          background-position: 0 0;
      }
      .secondBackground
      {
          background: url('http://www.marioedgar.com/images/blog/5.jpg') no-repeat;
          background-position: 0 -74px;
      }

HTML markup is the same, but we need a parent container now that we are using absolute positioning.

         Look at my button!

Any lastly, the jQuery.

jQuery(window).ready(function(){
    jQuery("").insertBefore("a.myButton");
    jQuery("span.secondBackground").css("opacity","0");
    jQuery("a.myButton").mouseenter(function(){
    jQuery(this).parent().find("span.secondBackground").animate ({
    opacity: 1.0
    }, 500); });
    jQuery("a.myButton").mouseleave(function(){
    jQuery(this).parent().find("span.secondBackground").animate ({
    opacity: 0
    }, 500); });
});

1: Set up the HTML

2: Add the CSS

The first thing I do before I start coding my CSS is use a CSS reset. I tend to use Erik Meyers reset CSS but there are many CSS resets such as yahoo’s.

Believe it or not thats all you have to do for the layout. Just remember if you are adding a border to the left_column or right_column that you are increasing the overall width of each column.

Check out a little demo page I created.

1: Link your JS.

Three files will need to be linked in your on your page, the jQuery library, the preloader JS(optional) and my slideshow JS.

Sources:

jQuery
preloader
mariosSlide.js

2: Set up your HTML.

Start with a division and give it any id that you would like, just keep in mind you will need to define this name later in the JS.

Inside of this div will be your containers holding your content, each container will need to have a id starting with id=”slide1”, the next id=”slide2” etc. You will also set each style of these elemts to display:none, you can either do it inline or in your CSS file.

          SLIDE 1 CONTENT
      

          SLIDE 2 CONTENT
      

          SLIDE 3 CONTENT
      

3. Edit mariosSlide.js

There are a few variables to set, alter the code as needed save then you should be ready to rock.

var divName = "slideShowDiv";
var numSlides = 3;
var pauseTime = 6000;
var imagePreLoad = true;
var imagesPath = "http://marioedgar.com/homepage_slide_images/";
var imageType = ".jpg";
var slideShowWidth = 910;
var slideShowHeight = 300;
var loaderName = "loader.gif";
var loaderWidth = 32;
var loaderHeight = 32;
var navigationButtons = true;

Click here to download source files.

A working example of this is on my homepage, check it out here.

Check out this jQuery plugin:

http://plugins.jquery.com/project/jgfeed

Here is how easy this plugin is to use:

Step 1: Link to the JS

Step 2: Configure a snippet of JS

This will inject 3 entries to the div “injectRssFeed”

Step 3: Uhh, thats it.

Check out the Latest Blog Posts section:

http://m2volt.com/

Mad props to the guys who developed this plugin.

Google Feeds API – jQuery plugin

Steps to implement my slideshow:

1: Link to the JS

Sources:

jQuery
preloader
mariosSlide.js

2: Edit the variables in mariosSlide.js

var divName = “slideShowDiv”; // name of the div in html
var numSlides = 10; // Number of slides in the slideshow
var pauseTime = 6000; // Pause time between slides
var imagesPath = "http://marioedgar.com/slideshow/mariosSlide/”; – URL to the directory all your images are located. All images must be names 1, 2, 3, 4… etc
var imageType = ".jpg”; // Type of images
var slideShowWidth = 1000; // width of slideshow
var slideShowHeight = 532; // height of slideshow
var loaderName = "loader.gif"; // name of loader gif (optional)
var loaderWidth = 32; // width of loader
var loaderHeight = 32; // height of loader
var navigationButtons = true; // If you would like to enable navigation buttons

3: Add the html markup

4. Your done… Easy yeah?

Check out my example here (I made the images way large so you can see the image pre-loading in action): http://marioedgar.com/slideshow/

It is very simple to add images to any link, just add a background image to the anchor tag using CSS right? But what if you want to add images to not only external links but pdf’s, gif’s, png’s, word documents or email links?

You could add a class to every single instance of that type, but this is very tedious and you still have the possibility of forgetting many of them, especially if your site is fairly large.

The answer is to use CSS Attribute selectors.

[href$="end of href path"]

[href^="beginning of href path"]

So If you would like to add a small icon next to your link that downloads a word document you would use this line of code:

a[href$=".doc "]{ background:url(’../images/word-icon.gif’) no-repeat left;}

PDF:

a[href$=".pdf"]{background:url(’../images/pdf-icon.gif’) no-repeat left;}

For the external links you would use this line of code:

a[href^="http:"]{background:url(’../images/external.gif’) no-repeat left;}

Email addres:

a[href^="mailto:"]{background:url(’../images/email.gif’) no-repeat left;}

The result:

Mario’s Resume (Word Doc)

Mario’s Resume (PDF)

Plugin page

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…

Web developer tool bar

Edit CSS on a page instantly, validate HTML/CSS/XML, clear cache instantly, view stylsheet information and much much more.

MeasureIt

Measure any area on a page in px with a click and drag of your mouse, comes very much in handy.

FireFTP

Add an FTP client straight to your FireFox browser.

Tamper Data

Use tamperdata to view and modify HTTP/HTTPS headers and post parameters. Trace and time http response/requests. Security test web applications by modifying POST parameters

User Agent Switcher

Ever wanted to test a page you built for the iPhone? The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser.

Other cool plugins

Fox Tab

FoxTab is a 3D tabbed browsing extension. With 5 attractive layouts to choose from, fliiping between opened tabs becomes easy and enjoyable than ever. Use the grouping and filtering features, and start experiencing tabbed-browsing in a whole new way.

Stay tuned for more plugins as I find them

As web developers we all know about Internet Explorer and how it can be a pain when developing, especially IE6 and below. Here are some of the hacks I use for Internet Explorer.

Conditional Hacks

If you would like to target a specific stylesheet to a certain version of Internet Explorer you would use the following:

This conditional statement will target IE8 only, to use on any other version just replace the “8″ with the version you would like. Say your site needs a stylesheet for All browsers below IE7, so IE6 and below, for this you would use:

The “lt” stands for less than the version specified. You could also use “lte”, this would target the version specified as well as the versions below, so this code would produce the same result as the previous:

Filters

Sometimes you find yourself only needing to change a specific style or two, in these cases you would use the same stylesheet, but add a filter below the line of the original. For instance, say you run into the IE6 double margin bug. When you float and element and give it some margin, IE6 will double this margin in some situations. If you run into this, this is what you can do:

#sidebar
{
  float:left;
  margin-left: 10px;
}

Once you realize that IE6 is adding a 20px margin to the left side, you can add the filter below your original line:

#sidebar
{
  float:left;
  margin-left: 10px;
}

*html #sidebar
{
  margin-left: 5px;
}

So in this case, *html followed by your CSS id or class will be applied to IE6 and below. This is how all the following filters should be implemented:

*html #code { your css here}

Applies to IE 6, 5.5, 5 and 4 for windows. IE5 on mac OS X, IE5 on Macintosh and IE4 on Macintosh.

*+html #code { your css here}

Applies to IE 7 and 5 on Windows.

Now that you have an idea of how this works, you can look up the rest in this chart I found. http://centricle.com

I want to emphasize that you should never develope using these hacks and filters first, this should be a last resort option. Develope, validate your code and if you find yourself stuck, then use the hacks and filters sparingly.