Question

I am trying to make a layout switcher. A user clicks a certain div called display, it then toggles a class called display-grid to that class strictly for visual.

At the same time it toggles some classes on and off for my layout.

I have a left column and a right column, the object is to let a user choose which column is on which side of the page. Like a sidebar can be on the left or right side of the page.

Every time they toggle this change it either adds or removes the classes from my 2 other divs (the class are just adding a float: left; and float:right; and swaps them out on each toggle click.

Now on each toggle it also saves the state to a user cookie, so if they change the sidebar location, it will persist across the site for them.

My code is sloppy I do not know 100$ how to do this, but I did ,manage to get it working and then it stopped. Well EVERYTHING described above works except the cookie’s are giving me an issue now, they are not setting a cookie each time a change is made. This is weird because about 10 hours ago I had it working so I cannot figure out what happend.

I am hoping someone with more knowledge of Javascript can help me get this working or possibly even improve it but getting it working for now would make my day.

Below is the code I have this far.

Not included is the jQuery library but I have included the cookie plugin.

 $(window).load(function(){
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1}var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000))}else{date=options.expires}expires='; expires='+date.toUTCString()}var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('')}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break}}}return cookieValue}};

My code

jQuery.noConflict();
jQuery(document).ready(function ($) {
  // Layout Switcher for post list

  // Load existing setting from Cookie
  if ($.cookie('MODE_SWITCHER') == 'null') {
    $('#content-left').attr('class', 'right-sidebar')
    $('#content-right').attr('class', 'left-sidebar')
  } else{
     $('#content-right').attr('class', 'right-sidebar')
     $('#content-left').attr('class', 'left-sidebar')
  }
  // Change LIVE by clicking the Toggle button on the site, save new value to Cookie
  $('.display').click(function () {
        $(this).toggleClass('display-grid');
        $('#content-left').toggleClass('left-sidebar').toggleClass('right-sidebar');
        $('#content-right').toggleClass('right-sidebar').toggleClass('left-sidebar');

        if ($('#content-left').hasClass('left-sidebar')) {
           var postmode = 'leftbody';
        } else {      //var postmode = 'right-sidebar';
          var postmode = '';
        }
        // save preference to Cookie
        $.cookie('MODE_SWITCHER', postmode, {
          path: '/',
          expires: 10000
        });
        return false;
  });
});

HTML

<span class="display" title="Change Layout">List/Grid</span>

<div id="content-left"> Left column content </div>

<div id="content-right"> Right column content </div>

CSS

.display {
    float:left;
    width: 49px;
    height: 20px;
    margin-top: -2px;
    background: url(http://codedevelopr.com/uploads/grid-switcher.gif) no-repeat 0 0;
    text-indent: -5555em;
    overflow: hidden;
    cursor: pointer;
     -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.display-grid {
    background: url(http://codedevelopr.com/uploads/grid-switcher.gif) no-repeat 0 -20px;
}

.grid-content .gridrow {

border-bottom: 1px solid #ECEDE8;

margin: 0 15px;

}

.left-sidebar{
    float:left !important;
    margin-right:15px;
}
.right-sidebar{
    float:right !important;
    margin-right:15px;
}

Answer 1

You have a return statement right before your cookie code so the cookie code will never be reached:

    // save preference to Cookie
    return false;
    $.cookie('MODE_SWITCHER', postmode, {
      path: '/',
      expires: 10000
    });
    return false;

Remove that first return statement and let your cookie code get executed.