jQuery загрузка и изменение размера с помощью набора cookie

Question

Ищете немного помощи, чтобы добавить к тому, что у меня уже есть. То, что у меня есть, - это переопределение onLoad и Resize для определенного класса, который изменяет сетку для разных разрешений. Мне нужно, чтобы был установлен файл cookie, поэтому сетка остается постоянной при переходе со страницы на страницу.

// swaps the grid span names when the resolution goes below 1200px 
    // or when page is loaded below 1200px 

    $(window).bind("load resize", function(){ 

     var width = $(window).width(), 
     bodycontent_grid = width < 1200 ? 'span8' : 
        width > 1200 ? 'span6' : ''; 
     rightcol_grid = width < 1200 ? 'span3' : 
        width > 1200 ? 'span5' : ''; 

     $('.bodycontent').removeClass('span6 span8').addClass(bodycontent_grid), 
     $('.rightcol').removeClass('span3 span5').addClass(rightcol_grid); 
    }); 

Answer 1

базировался JS решение не очень хорошо (читать дальше), но в любом случае я постараюсь ответить на вопрос о печенье первым:

Вы могли бы использовать какие-то jQuery cookie plugin или просто JS, который немного сложнее. синтаксиса JQuery является:

$.cookie('name', 'value'); // storing cookie 
$.cookie('name'); // reading cookie 

С помощью этого вы можете изменить исходный код, чтобы что-то вроде этого:

function resizeContainer(var force=false) // additional parameter is used to force resetting cookie 
{ 
    var width; 
    if($.cookie('knownWidth') && !force) // if there's a cookie and we're not forcing reset, use width from cookie 
    { 
     width = $.cookie('knownWidth'); 
    } 
    else 
    { 
     width = $(window).width(); 
     $.cookie('knownWidth', width); 
    } 
    var bodycontent_grid = width < 1200 ? 'span8' : 
       width > 1200 ? 'span6' : ''; 
    rightcol_grid = width < 1200 ? 'span3' : 
       width > 1200 ? 'span5' : ''; 

    $('.bodycontent').removeClass('span6 span8').addClass(bodycontent_grid), 
    $('.rightcol').removeClass('span3 span5').addClass(rightcol_grid); 
} 

$(window).bind("load", function(){ 
    resizeContainer(); // onload use cookie 
}); 
$(window).bind("resize", function(){ 
    resizeContainer(true); // when resizing force changing the cookie 
}); 

из задних, куки могут быть доступны на стороне сервера, а затем контейнеры могут быть сгенерированы с классами appriopriate на стороне сервера.

Должен сказать, что мне не нравится решение с использованием файлов cookie. Там так много говорят о responsive web design, так почему бы вам не использовать CSS @media-queries?

Вы могли бы сделать что-то вроде этого в файле .css:

@media only screen and (min-width : 1200px) { 
    /* Styles when over 1200px */ 
} 

@media only screen and (max-width: 1199px) { 
    /* Styles when under 1200px */ 
} 

Кстати, попытайтесь изменить размеры окна браузера, когда вы на http://bostonglobe.com/ или http://smashingmagazine.com :) Это чистый CSS!