Установить ширину содержимого на 100%, когда боковая панель скрыта?

Заранее простите меня за мой плохой английский.

Хорошо, вот мой сайт: http://bleachindonesia.com/forum/

Если вы заметили маленький X слева, это переключатель для отображения/скрытия боковой панели. jQuery работает нормально. Единственная проблема заключается в том, что ширина содержимого не будет увеличиваться (до 100%) / не будет заполнять пустое пространство, когда я скрываю боковую панель (боковая панель оставляет пустое место, когда скрыта).

Мне нужно, чтобы ширина содержимого составляла 100%, когда боковая панель скрыта, но сохраняла плавную анимацию. Например, на форуме vBulletin.

Вот jQuery кстати:

//<!--
if($.cookie("sidebarpost") == undefined) {
    $.cookie("sidebarpost", "expanded");
}
var state = $.cookie("sidebarpost");
if(state == "collapsed") {
    $('.lside').hide();
            $('.lclose').hide();
            $('.lopen').show();
}

if($.cookie("sidebarpost") == "expanded") {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    },function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    });
} else {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    },function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    });
}
//-->

Я знаю, что это немного раздуто, возможно, если есть способ минимизировать это, было бы очень полезно. Кто-нибудь может помочь?


person deathlock    schedule 04.07.2011    source источник
comment
почему бы просто не изменить ширину #content на 100%, когда он скрыт?   -  person Andy    schedule 04.07.2011
comment
Я пробовал это, но это выглядит не слишком хорошо; в нем нет плавной анимации скольжения..   -  person deathlock    schedule 04.07.2011


Ответы (2)


Вы можете просто настроить ширину content как часть ваших функций переключения. Что-то типа:

$('.lside').fadeOut(400, function(){$('#content').width("98%")});

$('.lside').fadeIn(400, function(){$('#content').width("76%")});
person Geoff Appleford    schedule 04.07.2011
comment
Большой! Но содержимое не скользит гладко, я имею в виду то, что в vBulletin здесь... vbulletin.com /forum Можно ли сделать так? - person deathlock; 04.07.2011

В приведенном вами примере они делают margin-right: 290px для области содержимого, показывая боковую панель и ширину боковой панели как 270px, а скрывая, они делают margin-right: 0px; и ширина как 0px;

используйте jquery animate, чтобы анимировать правое поле содержимого и ширину боковой панели.

person Sandeep Manne    schedule 04.07.2011
comment
хм, я понимаю, что код jQuery, который я даю, проблематичен, поэтому он не дает желаемого результата. Но если бы вы могли, возможно, вы могли бы посмотреть на живой веб-сайт и пример, который я хотел... - person deathlock; 05.07.2011
comment
Ваш прямой эфир у меня не открывается - person Sandeep Manne; 05.07.2011
comment
Который из? bleachindonesia.com/forum или vbulletin.com/forum ? Оба должны быть доступны, по крайней мере, для меня... - person deathlock; 25.07.2011