Here is a cool jQuery effect which lets you preview an image when you hover over its thumbnail. It pretty much a tooltip that follows your mouse around while having an image rather than text. The image previewer will also adjust itself depending on how large the image is in relation to the x and y coordinates of your mouse.

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

As websites move towards the “web 2.0″ look and feel, a glassy rounded corner button or image is pretty standard. There are many websites out there that will generate buttons for you automatically through their design tools such as My Cool Button and As Button Generator .

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); });
});

Here’s a post for beginner HTML/CSS soon to be ninjas. About 90% of the sites I have built use this same technique for layout. I generally use a 950px wide layout but this can be any size you would like as long as you adjust the width of the columns accordingly.

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.

I enjoyed building my image slideshow so much that I had to do another. I have used many open sourced html slideshows in my years, but again I wanted to build one that is very simple and customizable. The html slideshow I have created will fade in and out through any html content of your choice. Here are the steps to create this slideshow.

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.

There are tons of slideshow options on the web today, many are very well built while others can be very cluttered and hard to use/understand. Now that I am getting fairly comfortable with jQuery I felt as if building a sideshow myself would be very beneficial as well as a good learning experience. I wanted to build this slideshow for someone who has little knowledge of html css and JavaScript. So what I did was make it so simple that all you have to do is link to jQuery, the slideshow js I created and add a single <div> in the html with an id of whatever you want. There is no need for any css, but of course adding css to spice it up is very very easy.

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/

Adding images to links on your website can be very useful, it is helpful for the ease of use and also adds attractive visuals to your site.

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)

Firefox can be one of your most powerful web developing tools. Plugins for FireFox are easy to use and can cut down time coding by hours, check out some of my favorites.

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

You should rarely use CSS hacks for different browsers, but sometimes you find yourself in the situation where there is no other choice. Over the years I have come across some CSS hacks and filters that can come in handy when building websites.

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.

Ever spent hours coding HTML and CSS trying to get your layout to look the way you want across all browsers? CSS frameworks can cut your time coding in half as well as look correct in newer and older web browsers. This framework uses the idea of a grid layout so everything will line up perfectly, it will also virtually cut all your time coding CSS for layout.

Blueprint CSS

Blueprint CSS is the first CSS framework I have used and my favorite. You start by structuring your HTML with a container that holds are of you columns, inside the columns you setup your divisions. If you look at the screen.css and scroll until you see the .span-(x) where x is a number. These are the division widths you will be using. If you look at some of the test pages on the site and view the source you will get an idea just how these divisions work.

So in these examples they use a total width of 950px… Again if you look at the screen.css you will see a list of widths, the total width of the content area in their example is 950px and they call it with the class .span-24. 24 is the key number here, this is the number you want all your columns to add up to for each row. For example, if you want 3 columns a sidebar, a content area and another side bar you would use: .span-4, .span-16 and .span-4 in that order. Notice how these add up to 24? The 24 in this example will always be 950px. There are many variations you can do with this, you can nest columns inside your span-(x) as long as in the end each row adds up to the outer container.

So I know what you are thinking, hey I dont want it to be set at 950px… What if I want a width of 1000px or 850px? Well your in luck, check this page out here, this is a blueprint css framework generator. Mess around with the numbers until you find your goal.

960 Grid CSS

I downloaded and messed around with 960 grid CSS framework and it seems to be pretty much the same concept as blueprint CSS. Check out the page I messed with.

For first example the grid has 12 columns and you declare the outermost container like so: container_12, then inside you just declare the divisions such as grid_2, grid_8 and grid_2 to add up to the 12. After each row you must declare a clear class since the columns are being floated.

960 Grid also has a grid generator on there website for your custom applications just like blueprint has theirs.

This is the basic structure of CSS frameworks, my advice to you is go to the one of the sites and check out the source, download the code and mess around with it. Once you get the hang of the setup you wont believe how much faster your coding will flow, and how clean everything will look.

I was trying to find a way to get the latest article posts dynamically on the homepage M2Volt.com. This needed to be client side since it is outside of the CMS we are using for our blog page. I stumbled upon a plugin on the jQuery site, jgfeed, that blew my socks off it was so easy to use and I decided to write this one up.

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

jQuery.jGFeed('http://www.m2volt.com/blog/feed/',
function(feeds){
  // Check for errors
  if(!feeds){
    // there was an error
    return false;
  }
  // do whatever you want with feeds here
  for(var i=0; i"
    + entry.title + "
" + entry.publishedDate + "
" + entry.contentSnippet + "

");
  }
}, 3);

This will inject 3 entries to the div with id=”injectRssFeed”

Step 3: Uhh, thats it.

Check out the Latest Blog Posts section: m2volt.com

Mad props to the guys who developed this plugin.