trying to change width on click

Question

Concerrning this, I wanted to get the same effect, then I thought I'll just change width of my div on click.

I have a left sidebardiv and contentdiv on the right, and I have an image with onclick trigger, which hides the left sidebardiv and sets the right contentdiv width to 100 %.
It does hide the left sidebardiv but it doesn't expand the contentdiv to 100%, strange thing happens when I press firebug to open, just after its opened the contentdiv then expands to 100%, can anyone figure out what am I doing wrong?

Thank you

Here is some HTML :

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

Here is 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 is passed as an argument to the above function

HERE IS SOME 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;
}

Latest update :

The div streches as it should when I click on window restore button and back. Also when I open firebug I mention that earlier. Is there some kind of hack from javascript that could simulate this event?

More info

I found some similar posts like :

http://stackoverflow.com/questions/667426/javascript-resize-event-firing-multiple-times-while-dragging-the-resize-handle -> I need this resize event to fire when I trigger my Page.toogle function so the div streches properly

Answer 1

I have seen that on Firefox before. How does your javascript code look like?

Answer 2

There's an error in this line:

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

You need two equals signs:

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

Answer 3

I think it's in your call to Page.toogle

When I just make this a regular function like here http://jsbin.com/iyeka/edit it seems to work just fine...

should toogle be toggle?

Answer 4

Given that content is floated isnt a percentage based width going to be calculated from the last parent element in the hierarchy that is given a hard width or if none its intrinsic width?

What happens if you give #contentholder a hard width in px/pt/cm or alternately use one of the former units in your dynmic width assignment for content?

Answer 5

Most likely the page browser did not trigger the onresize event to your browser. When you open firebug, it is triggered which in turn is catched by your resize event handler. Try even resizing the page itself, it should trigger too.

This happens because your divs are floating so layout is not relative. One solution is to manually fire the onresize event when you resize the leftdiv.

Answer 6

Here's what I recommend.

1. Use jQuery instead of plain old javascript to do this sort of thing. There are often workarounds built in it for browser flaws.

2. Don't just use the width property to change the width, instead create a css class with the width settings and toggle the css class in the div using jquery.

I've modified div before, and it's worked fine for me. But I've always done that using jQuery.

Answer 7

leftsidebar is passed as an argument to the above function

You're passing the Class Name to the function, not the ID.

Answer 8

You should be able to trigger the resize event handler with something like:

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