Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I simplify this JavaScript code
    primarykey
    data
    text
    <p>I have three divs which are stacked with css on top of each other. The middle one should be a draggable separator, such that the top div and its content is above and the other div is below. And each has its own scrollbar. See <a href="http://jsfiddle.net/d4j3V/1/" rel="nofollow">jsfiddle</a></p> <p>It works however if find my js code not very nice because it set the heights of the three divs separately:</p> <p>The html:</p> <pre class="lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt; &lt;div id="content"&gt; &lt;div id="dragger"&gt;&lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The css code</p> <pre class="lang-css prettyprint-override"><code> #wrapper { height: 100%; width: 100%; overflow: auto; position: relative; } #content { position: fixed; bottom: 25%; width:100%; height: 75%; overflow:scroll; overflow-x:hidden; } #dragger { position: fixed; bottom: 25%; width:100%; cursor: ns-resize; height: 5px; } #footer { position: fixed; bottom: 0; width:100%; height: 25%; overflow:scroll; overflow-x:hidden; } </code></pre> <p>The js code:</p> <pre class="lang-js prettyprint-override"><code> ... $('#footer').css({ "height": bodySize - e.pageY }); $('#content').css({ "bottom": bodySize - e.pageY, "height": e.pageY }); $('#dragger').css({ "bottom": bodySize - e.pageY }); ... </code></pre> <p>Is there a better way to achieve the same behavior, I thought of some way to make the footer and content div height depending on the position of dragger in css. But I do not know how. Can anyone help me?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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