Simple magnifier / zoom effect by jQuery & CSS3

Did you ever see a magnifier glass in a web page? When your mouse move over a small image, you could see the details in the magnifier glass? And would do you like to make the zoom effect in your own web page? Let’s write some simple lines by jQuery to have the task done.

Click here to see the demo page
Download the Demo pages

First, let’s put the image in the page, and give it a width and height to make it smaller.


<div class="zoom">
	<img src="blueDoor.jpg" width="400" height="265" />

We will show the big image in the magnifier glass as background image, and change background image position while user move the mouse. If the mouse move out of the small image, we fade out the magnifier glass, vice versa. There is an illustration to show how we calculation the positions.


Make equal height columns by jQuery

We use equal height column layout in web page a lot. If we have to use pure CSS, probably we would give the column container a repeat-y background image( like the image below) to make the columns look with equal height.

In this case, the columns do not really have equal height, but look in that way with the background image. If you want change the column’s background, border, spacing, etc., you will have to edit the background picture. It’s sort of annoying, especially for UI. However, with a little help from jQuery, we can get equal columns easily.

Two columns layout


Multiple Approah to Zebra Table(alternate row backgrould color)

Table was used to manage layout in the past, but after CSS was introduced to the internet world, table quits the job it’s not capable for and steps back to it’s original task: arrange data into rows and columns of cells. In UI design, zebra table is the most common way to display data, alternate row with different background color will guide our eyes along the row. It’s not a difficult job, and there are different approaches to achieve the result


Automatically Highlight Current Page in Navigation with CSS & jQuery

It’s common that we want to highlight the current page in navigation to tell users where they are now, and it’s very easy to do it with CSS. Just by adding a class “highlight” to < li > tag and write the style we want in stylesheet. Let’s start it with a simple page:

HTML markup
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li class="highlight"><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
Style Sheet
<style type="text/css">
a, a:visited{color:#000; font-weight:bold; text-decoration:none;}
ul.navigation{list-style:none; font: 0.75em/1.5em normal Tahoma, Verdana, Geneva, sans-serif;}
ul.navigation li{ background:#ececec; margin:1px;padding:5px 15px; display:block; float:left;}
ul.navigation li.highlight{ background:#666;}
ul.navigation li.highlight a{ color:#f5f5f5; cursor:default;}

Then, we will get a page look like this:

screenshot of highlight navigation

However, we have to change class “highlight” position in each page in order to show the highlight link correctly. It’s not convenient when we have a complicated navigation, and how about when we have to write php/asp templates or .net masterpages? Can we use exactly same html code in each page but highlight the navigation link automatically? The answer is YES. Few lines of jQuery code will simply does the trick. Let’s still paly with this simple page to explain the idea.