jquery - Current class is removed on page refresh -



jquery - Current class is removed on page refresh -

i trying create user interface, when refresh page, it's removing class current navigation link.

i next tutorial http://www.ssdtutorials.com/tutorials/series/list-grid-view-jquery-cookies.html

below code:

$(function() { var cc = $.cookie('list_grid'); if (cc == 'g') { $('#products').addclass('grid'); } else { $('#products').removeclass('grid'); } }); $(document).ready(function() { $('#grid').click(function() { $(".current").removeclass("current"); $(this).addclass("current"); $('#products').fadeout(500, function() { $(this).addclass('grid').fadein(500); $.cookie('list_grid', 'g'); }); homecoming false; }); $('#list').click(function() { $(".current").removeclass("current"); $(this).addclass("current"); $('#products').fadeout(500, function() { $(this).removeclass('grid').fadein(500); $.cookie('list_grid', null); }); homecoming false; }); });

in case need html code

<div id="wrapper"> <div id="navigation"> <a href="#" id="list">list view</a> <a href="#" id="grid">grid view</a> </div> <div id="products"> <?php for($i = 1; $i <= 4; $i++) { ?> <div class="product"> <div class="wrapper"> <div class="image"> <img src="images/0<?php echo $i; ?>.jpg" alt="image <?php echo $i; ?>" width="160" height="160" /> </div> <div class="description"> <h1><a href="#">article title</a></h1> <p>nulla consequat massa quis enim. donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. in enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. nullam dictum felis european union pede mollis pretium. integer tincidunt.</p> </div><!-- end description --> </div><!-- end wrapper --> </div><!-- end product --> <?php } ?> </div><!-- end products --> </div><!-- end wrapper -->

when refresh page, reloaded in original state. doesn't remember item had current class. need utilize cookie you're employing if want page able remember element had class added dynamically.

something this:

$(function() { var cc = $.cookie('list_grid'); if (cc == 'g') { $('#products').addclass('grid'); $('#grid').addclass('current'); } else { $('#products').removeclass('grid'); $('#list').addclass('current'); } });

btw, $(function() { ... } short-hand way of writing $(document).ready(function() { ... }, can combine 2 functions above.

jquery class

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -