jQueryクッキーセットを使用したオンロードとサイズ変更

Question

私が既に持っているものに追加するための少しの助けを探しています。私が働いているのは、異なる解像度のグリッドを変更する特定のクラスへのonLoadとResizeのスワップです。私が必要とするのは、ページ間を移動するときにグリッドが永続的になるように設定されるクッキーです。

// 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 

：讲义1コースの

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 
}); 

、クッキーは、サーバ側でアクセスすることができ、その後、コンテナが生成される可能性サーバー側には魅力的なクラスがあります。

私はクッキーを使用して解決策が好きではないと言う必要があります。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です！