Easy Create List And Grid View With JavaScript

This post tutorial will explains how to create List or Grid mode with JavaScript and some help using CSS style. This feature works using some button to manage it as switcher and will automaticaly change the view when clicked. Ussually this function applied on homepage to change the looks of the most recent posts or products, while you can also applied this in other webpage with some modified CSS style. The button simply will show the visitors on how the most recent post / products will display, probably will make to see much easier for users.

Actually there are several ways to make this button works, probably this is the most simple to make it happen. Light weight version, tiny size using only a few line of JavaScript and I think you don't have to use hosting server to add this, just add in the HTML template.

VIEW Example

The List mode in CSS style is become default style when the first opened webpage and I assumed you already using list view, and we just have to add more style for The Grid view and vice versa. Both List and Grid layout view called with click function on JavaScript using "ID" for the "main section". The transform works with fade in and fade out. This function itself is one of the ways to make your webpage more dynamic, simple, and stylish.

Add List and Grid View Button

Only takes a few minutes to add this button somewhere on webpage. And here are the step by step to applying this:

1. Add the following code above ]]></b:skin> or </style> in CSS style section.

CSS List and Grid

.list-grid { 
    width: 100%; 
    min-height: 30px; 
    }
#list, #grid { 
    cursor: pointer; 
    float: right; 
    margin-right:10px;
    }
.grid {
    width:46%; 
    padding:0; 
    margin:2%; 
    float:left; 
    height:480px;
    }
.grid img {
    width:100%; 
    padding:0; 
    margin:0; 
    float:left; 
    max-height: 190px; 
    margin-bottom: 10px;
    }

Note: I assumed you already using list view, and we just have to add more style for The Grid view and vice versa.

2. Add the following Jquery script code above the </head>

JQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Note: If you already add any similar JQuery above with another version, then skip the step.

3. Add the following JavaScript code above the </head>

Javascript Simple

<script type='text/javascript'>
$(document).ready(function() {
    $('#grid').click(function() {
        $('.post-demo').fadeOut(300, function() {
            $(this).addClass('grid').fadeIn(300);
        });
        return false;
    });
    $('#list').click(function() {
        $('.post-demo').fadeOut(300, function() {
            $(this).removeClass('grid').fadeIn(300);
        });
        return false;
    });
});
></script>

Blue is the "id" and orange is the "class" section that we want to modified with switcher and the pink is the new added styles for Grid in CSS.

4. Add following code somewhere on webpage, in example and commonly after <div class="main-wrapper"> or <div id="main-wrapper"> or similar in main post body section.

HTML for button

    <div class='list-grid'>

<button href='#' id='grid' >Grid view</button>
<button href='#' id='list' >List view</button>

    </div>

Note: The "id" in above code have to be same within JavaScript.

5. Save Template, and see the results.

Hopefully can be useful.

modifine