Databases
StackOverflow2013
Postsdbo
POchange width of a div on the fly, setting with $('#contentDiv').width(newWidth) does not work
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POchange width of a div on the fly, setting with $('#contentDiv').width(newWidth) does not work
    text
    copied!<p>I have 3 divs arrranged like -</p> <pre><code> -------------------------- | f | headlineDiv | | i | |&lt;- draggable and resizable | l |_______________| | t | | | e | |&lt;- draggable and resizable | r div | storyDiv | |-------------------------- ^ | can be hidden </code></pre> <p>Heres some code :</p> <pre><code> &lt;div id="main"&gt; &lt;div id="showFiltersDiv"&gt; &lt;/div&gt; &lt;div id="filtersDiv"&gt; &lt;div id="hideTextDiv"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="contentDiv"&gt; &lt;div id="headlineDiv"&gt; Block 1&lt;/div&gt; &lt;div id="storyDiv"&gt; Block 2&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>heres the jquery code: for Resize -></p> <pre><code> $('#headlineDiv').resize(function () { var offset = $('#headlineDiv').position(); var height = $('#headlineDiv').height(); var width = $('#contentDiv').width(); var top = offset.top + height + "px"; var newStoryHeight = $("#main").height() - $("#headlineDiv").height(); var maxHeight = $("#main").height(); $('#storyDiv').css({ 'bottom': 0, 'height': newStoryHeight, 'top': top, 'position': 'absolute', 'width': width }); $('#headlineDiv').css({ 'max-height': maxHeight, 'width': width }); }); </code></pre> <p>The code for #storyDiv is similar</p> <p>Heres the code that should make them expand to fit the extra space -</p> <pre><code> $('#showFiltersDiv').click(function () { $('#filtersDiv, #hideTextDiv').show("slide", { direction: "left" }); $('#showFiltersDiv').hide(); var left_margin = $('#filtersDiv').width(); var perm_width = $('#main').width() - left_margin; var storyTop = $('#storyDiv').position().top; $('#headlineDiv').width(perm_width); $('#headlineDiv').css({ 'float': 'right', 'left': $('#main').width() - perm_width, 'position': 'absolute' //'width': perm_width }); $('#storyDiv').css({ 'float': 'right', 'left': $('#main').width() - perm_width, 'position': 'absolute', 'width': perm_width }); }); </code></pre> <p>when headlineDiv is resized, storyDiv should adjust its height accordingly. Their positions are interchangeable. So if the user drags <code>storyDiv</code> above, <code>headlineDiv</code> will be placed below it. Hence, then if <code>storyDiv</code> is resized, <code>headlineDiv</code> will adjust it's height accordingly. For some reason, when the user tries to resize either, their width decreases by around 10px. To fix this, i set the width of these divs to be equal to their parent in the resize function.</p> <p>Now, <code>filterDiv</code> is a toggle <code>div</code>. So when a user hides it, <code>headlineDiv</code> and <code>storyDiv</code> should expand on the left and occupy the new space. To do that, I'm changing their width. However, setting the width with <code>$('#headlineDiv ').width(newWidth)</code> has no effect. Any suggestions on what could do the trick?</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