Building a List/Grid View Switcher with jQuery
This page may contain links from our sponsors. Here’s how we make money.
A fairly common web interface feature is the dynamic view switcher. On product pages or blog archives, you’ll sometimes find buttons to change the layout from display lists to smaller grids. In this tutorial, I’ve built a simpler example using basic CSS and some jQuery commands.
I’ll be using interface elements from the Zephirro E-Commerce UI Set which includes buttons and thumbnail photos. Feel free to demo the code yourself and try out a similar experience on your own website. This is a tricky effect to nail down, but when done properly your users will love the unique experience.
Coding the Basic HTML
The main page isn’t very complicated but does contain a lot of repetitive code. Towards the top I’ve included two links with the IDs listview and gridview.
<span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a href="#" id="listview" class="switcher active"><img src="images/list-view-active.png" alt="List"></a> </span>
We’ll bind a click event handler onto these two links later on. Then we can determine which display block the user clicks and how we need to render the page. Afterwards I’ve setup an unordered list with each list item containing a different product to display. The list item element is used as a block which contains more detailed elements.
<!-- row 1 --> <li class="clearfix"> <section class="left"> <img src="images/products/list-default-thumb.png" alt="default thumb" class="thumb"> <h3>Product Name</h3> <span class="meta">Product ID: 543J423</span> </section> <section class="right"> <span class="price">$45.00</span> <span class="darkview"> <a href="javascript:void(0);" class="firstbtn"><img src="images/read-more-btn.png" alt="Read More..."></a> <a href="javascript:void(0);"><img src="images/add-to-cart-btn.png" alt="Add to Cart"></a> </span> </section> </li>
This example only includes the first row but you can copy/paste to build more. In my demo I’ve used 9 different product rows containing the left and right columns.
Just to point out I’ve wrapped the product buttons in a span with the class .darkview. This is used in the grid layout to hide the big round buttons until you hover over a product display. But in the default list view it doesn’t affect anything. Notice, however, that it’s very important we setup the HTML properly from the start.
Looking at CSS Styles
My project outline is to adapt each list item based on the UL’s current class. Using jQuery we can change it between list and grid, then apply styles for each. The list is setup first by default and I’ve kept all the related selectors in the same block of code.
/** list view **/
ul.list { list-style: none; width: 100%; }
ul.list li { display: block; background: #c9d0d1; padding: 10px 15px; }
ul.list li.alt { background: #d7dfe0; }
ul.list li section.left { display: block; float: left; width: 350px; position: relative; padding-left: 20px; }
ul.list li section.right { display: block; float: right; margin-right: 10px; width: 250px; text-align: right; }
ul.list li section.left img.thumb { float: left; margin-right: 10px; }
ul.list li section.left img.featured-banner { position: absolute; left: -18px; top: 35px; }
ul.list li section.left h3 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; text-transform: uppercase; color: #707375; font-size: 1.4em; line-height: 1.6em; }
ul.list li section.left span.meta { color: #93989b; font-weight: normal; font-size: 1.1em; }
ul.list li section.right span.price { font-weight: bold; display: block; margin-bottom: 15px; color: #ad3939; font-size: 1.6em; text-align: right; }
ul.list li section.right a.firstbtn { margin-right: 7px; }
Now the grid view is very similar with the exception of our dark hover menu. The title, product ID, and price elements are styled very similar to the original list design. I’m also switching out thumbnail images to display larger grid blocks.
A particularly interesting bit of code is the darkview class for our grid layout. This span is originally set to 0 opacity and transitions into full display. For some people this layout may be annoying or intimidating – but there’s always a workaround to adapt this functionality for your own website.
/** grid view **/
ul.grid { list-style: none; margin: 0 auto; padding-left: 25px; }
ul.grid li { position: relative; display: block; float: left; width: 220px; height: 200px; border-right: 1px solid #b6bdbe; padding: 5px 22px; margin-bottom: 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
ul.grid li.third { border: 0; }
ul.grid li section.left { position: relative; }
ul.grid li section.right { /* nothing */ }
ul.grid li section.left img.featured-banner { position: absolute; top: 0; }
ul.grid li section.left h3 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; text-transform: uppercase; color: #707375; font-size: 1.4em; line-height: 1.5em; }
ul.grid li section.left span.meta { display: block; color: #93989b; font-weight: normal; font-size: 1.1em; margin-bottom: 7px; }
ul.grid li section.right span.price { font-weight: bold; display: block; margin-bottom: 5px; color: #ad3939; font-size: 1.75em; }
ul.grid li section.right span.darkview {
opacity: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 200px;
margin: 0 15px;
border-radius: 6px;
background: rgba(40, 45, 55, 0.75);
overflow: hidden;
text-align: center;
padding-top: 35px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.25s linear 0s;
-o-transition: opacity 0.25s linear 0s;
}
ul.grid li:hover section.right span.darkview { opacity: 1; }
ul.grid li section.right span.darkview a.firstbtn { display: block; margin-bottom: 10px; }
jQuery Switch Effects
I am including the latest jQuery release directly from Google’s cloud hosting for developers. I then created a new script.js file and we can write all our main function code inside. Let’s look at the opening bind method:
$(document).ready(function(){
$("a.switcher").bind("click", function(e){
e.preventDefault();
Once the document is loaded jQuery will bind a click event handler to any anchor links with the class .switcher. We want to disable linking to anything and prevent the default browser action. Then afterwards I go on to setup a few variables which will save us time writing out selectors.
var theid = $(this).attr("id");
var theproducts = $("ul#products");
var classNames = $(this).attr('class').split(' ');
var gridthumb = "images/products/grid-default-thumb.png";
var listthumb = "images/products/list-default-thumb.png";
We need theid in order to determine which view style we’re switching over to display. Also the two thumbnail image URLs help to update the grid/list view later on.
Updating Products List Display
The final portion of my code uses a couple basic if/else clauses. First we check if the button clicked has an active class. This would mean the user is already viewing the desired layout and we don’t need to perform anything. Otherwise we need to check the button ID and switchup the layout accordingly.
if($(this).hasClass("active")) {
// if currently clicked button has the active class
// then we do nothing!
return false;
} else {
// otherwise we are clicking on the inactive button
// and in the process of switching views!
Inside the else clause I’m performing two more logic checks. First we see if the user has clicked gridview and update the current list objects to display in a grid-style. Otherwise we switch back from the grids into a list format.
The lines of code go through a few different functions. First we update the currently active button and change the images to highlight our new display. Then we remove the previous grid/list class and apply our updated selection, along with changing all of the thumbnail images.
if(theid == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
$("#listview").children("img").attr("src","images/list-view.png");
var theimg = $(this).children("img");
theimg.attr("src","images/grid-view-active.png");
// remove the list class and change to grid
theproducts.removeClass("list");
theproducts.addClass("grid");
// update all thumbnails to larger size
$("img.thumb").attr("src",gridthumb);
}
else if(theid == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
$("#gridview").children("img").attr("src","images/grid-view.png");
var theimg = $(this).children("img");
theimg.attr("src","images/list-view-active.png");
// remove the grid view and change to list
theproducts.removeClass("grid")
theproducts.addClass("list");
// update all thumbnails to smaller size
$("img.thumb").attr("src",listthumb);
}
It does seem confusing without context but all the code is fairly straightforward. Much of the DOM manipulation has to do with replacing classes and image src attributes. But if you wanted to get fancy it’s a simple process to further animate fade in/out effects on the layout change. Yet for a basic switcher like this, you don’t always need animations.
Conclusion
This tutorial should give you a strong introduction to manipulating your page layouts with jQuery. Even the simple act of mixing up classes & IDs can boldly enhance the user experience. And developing over the jQuery library makes coding JavaScript easier than ever before! Be sure to let us know your thoughts on the tutorial in our post discussion area below.
