пытаясь изменить ширину на клик

Question

Что касается этого , я хотел получить тот же эффект, тогда я подумал, что я просто изменю ширину моего div при клике.

У меня есть левый sidebardiv и contentdiv справа, и у меня есть изображение с триггером onclick, которое скрывает левый sidebardiv и устанавливает ширину правого contentdiv в 100%.
Он скрывает левую боковую панель, но не расширяет контентдив до 100%, странная вещь происходит, когда я нажимаю firebug, чтобы открыть, сразу после открытия контентдив расширяется до 100%, может кто-нибудь понять, что я Я делаю не так?

Спасибо

Вот немного HTML:

<div id="content_holder">
<div class="leftsidebar" id="sidebar">
....
</div>
<div class="content" id="content">
....
</div>
</div>

Вот JavaScript:

var flag = false;

          Page.toogle = function(id)
          {
              var x = document.getElementById('content');
              if(!flag){
                    document.getElementById(id).style.display = 'none';
                    x.style.width = '99%';
                             flag=1;
                }
              else {
                    x.style.width = '683px';
                    document.getElementById(id).style.display = '';
                             flag=0;
                }
          }

leftsidebar передается в качестве аргумента вышеупомянутой функции

ЗДЕСЬ НЕКОТОРЫЙ CSS:

div.content {
        display: block;
        float: left;
        width: 683px;
        text-align: left;
        margin-left:10px;
    }

     div.leftsidebar {
    padding-bottom:20px; 
    width:303px; 
    background: url('left_holder.png') left bottom no-repeat;
}

Последнее обновление:

Div растягивается как надо, когда я нажимаю на кнопку восстановления окна и обратно. Также, когда я открываю firebug, я упоминал об этом раньше. Есть ли какой-нибудь хак из javascript, который может имитировать это событие?

Подробнее

Я нашел несколько похожих сообщений, таких как:

событие изменения размера javascript запускается несколько раз при перетаскивании маркера изменения размера -> мне нужно, чтобы это событие изменения размера срабатывало, когда я запускаю функцию Page.toogle, чтобы div правильно растягивался

Answer 1

leftsidebar передается в качестве аргумента к вышеуказанной функции

Вы передаете имя класса функции, а не идентификатор.

Answer 2

Вы должны иметь возможность запускать обработчик события изменения размера с помощью чего-то вроде:

window.resizeBy(1,1);
window.resizeBy(-1,-1);

Answer 3

Вот что я рекомендую.

1. Используйте jQuery вместо простого старого javascript, чтобы делать подобные вещи. Часто в него встроены обходные пути для устранения недостатков браузера.

2. Не просто используйте свойство width для изменения ширины, вместо этого создайте класс css с настройками ширины и переключайте класс css в div с помощью jquery.

Я модифицировал div раньше, и он работал нормально для меня. Но я всегда делал это, используя jQuery.

Answer 4

Скорее всего, браузер страницы не вызвал событие onresize для вашего браузера. Когда вы открываете firebug, он срабатывает, что, в свою очередь, перехватывается вашим обработчиком событий изменения размера. Попробуйте даже изменить размер самой страницы, она тоже должна срабатывать.

Это происходит из-за того, что ваши div'ы плавают, поэтому расположение не является относительным. Одно из решений состоит в том, чтобы вручную вызывать событие onresize при изменении размера leftdiv.

Answer 5

Учитывая, что содержимое является плавающим, разве ширина в процентах не будет рассчитываться по последнему родительскому элементу в иерархии, которому дана жесткая ширина или, если ее нет, его собственная ширина?

Что произойдет, если вы укажете #contentholder жесткую ширину в px / pt / cm или поочередно используете одну из первых единиц в своем назначении ширины dynmic для содержимого?

Answer 6

Я думаю, что это в вашем звонке на Page.toogle

Когда я просто делаю эту обычную функцию, как здесь http://jsbin.com/iyeka/edit, она, кажется, работает просто отлично ...

должен toogle be toggle ?

Answer 7

В этой строке есть ошибка:

if(x.style.width = '683px')

Вам нужно два знака равенства:

if(x.style.width == '683px')