Databases
StackOverflow2013
Postsdbo
POMove all elements which overflow a div horizontally into another
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMove all elements which overflow a div horizontally into another
    text
    copied!<p>I have a "menu bar" (for lack of a better term) which is basically a fixed width <code>ul</code> at 980px. The <code>li</code> elements are populated on page load, and contain an image, a span, and a divider (for the next <code>li</code>).</p> <p>If there are too many <code>li</code> elements, they overflow onto the next line. I want to prepare for such an event by running some JS/jquery after the list is populated to move all of the overflow elements into another div, which will essentially be a css hover menu with the elements inside it (it will say '...view more' or similar).</p> <p>My initial approach has been to check, after populating the menu, if the menu's total width exceeds a certain number, and if so, to append the last element to the new div for overflow. This function would either loop with a variable checking the width of the menu, or call itself recursively, whichever. I got the basic functionality working with an <code>if</code> statement, but it was a single iteration to test - the last element got moved to the div successfully. Unfortunately, when I tried to iterate it (loop or recursive) the browser seemed to go into an endless loop in the js and never loaded the page properly.</p> <p>A version of my current attempt looks like this:</p> <pre><code> /**code for populating etc happens here ... then calls trimList(); */ function trimList(){ var menuWidth = $('#menu').width(); if(menuWidth &gt; 700){ $('#menu li:last-child').appendTo('#overflowList'); trimList(); } } </code></pre> <p>With this version or with a <code>while</code> loop the browser eventually crashes, but I'm not sure why. I'm sure it's something obvious.</p> <p>I'd like to either fix my current implementation, or do it some other way (perhaps - if width is longer, grab ALL elements that push beyond that width, and throw them in the div. All at once, rather than iterating. But I'm not sure what the best way to grab the first offending (boundary pushing) element would be.)</p> <p>I'm sure this is something simple, I'm just struggling to figure out what's causing the issue now.</p> <p>Thanks</p> <p>edit: see below - fixed my issue</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