javascript - Toggle & Set Cookie -

-

i have trouble understand jquery. hoping me setting cookie toggle.

my script works following way, user toggle(); , changes class in-turn changes bootsrap grid layout 4 columns (3) 6 columns (2), part works fine, wanted add cookie sets according user preference of chosen columns. below js code this:

// toggle click //  $(".two, .three").click(function() {                         $(".two, .three").toggle(); });  // switch class , grid //  $('.grid-toggle a').click(function(event) {     $('.list-products li').removeclass('col-xs-3 col-sm-3 col-xs-2 col-sm-2 col-xs-3 col-sm-3 col-xs-4 col-sm-4 col-xs-6 col-sm-6');      if ($(this).hasclass('three')) {         $('.list-products li').addclass('col-xs-4 col-sm-4');     }     if ($(this).hasclass('two')) { //for less products         $('.list-products li').addclass('col-xs-6 col-sm-6');     }     return false; });

after lot of research using jquery-cookie tool having trouble integrating current code. have looked on basic usage cannot wrap head around how integrate current script or where?

below fiddle (with dependencies included):

https://jsfiddle.net/panoplr/g68j6qfq/1/

you can set cookie using jquery-cookie plugin this,

$.cookie("cookie_name", "value");

so should able set cookie , update preferably when user performs toggle this,

if ($(this).hasclass('three')) {     $('.list-products li').addclass('col-xs-4 col-sm-4');     $.cookie("pref", '4x4'); } if ($(this).hasclass('two')) { //for less products     $('.list-products li').addclass('col-xs-6 col-sm-6');     $.cookie("pref", '6x6'); }

demo

edit:

if want use cookie value display proper grid type, should read cookie value when page loads(inside $(document).ready(function(){}) ) , change classes accordingly below,

var pref = $.cookie("pref");  if (pref == "4x4") {     $('.list-products li').removeclass('col-xs-6 col-sm-6');     $('.list-products li').addclass('col-xs-4 col-sm-4'); } else if(pref == "6x6"){     $('.list-products li').removeclass('col-xs-4 col-sm-4');     $('.list-products li').addclass('col-xs-6 col-sm-6'); }

Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more