Databases
StackOverflow2013
Postsdbo
POtrying to change width on click
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtrying to change width on click
    text
    copied!<p>Concerrning <a href="https://stackoverflow.com/questions/1846944/nice-effect-widget">this</a>, I wanted to get the same effect, then I thought I'll just change width of my div on click.</p> <p>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 %. <br /> 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? </p> <p>Thank you</p> <p>Here is some HTML :</p> <pre><code>&lt;div id="content_holder"&gt; &lt;div class="leftsidebar" id="sidebar"&gt; .... &lt;/div&gt; &lt;div class="content" id="content"&gt; .... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is javascript : </p> <pre><code>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; } } </code></pre> <p>leftsidebar is passed as an argument to the above function</p> <p>HERE IS SOME CSS :</p> <pre><code>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; } </code></pre> <p><strong>Latest update :</strong> </p> <p>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?</p> <p><strong>More info</strong> </p> <p>I found some similar posts like : </p> <p><a href="https://stackoverflow.com/questions/667426/javascript-resize-event-firing-multiple-times-while-dragging-the-resize-handle">javascript resize event firing multiple times while dragging the resize handle</a> -> I need this resize event to fire when I trigger my Page.toogle function so the div streches properly</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload