Home/ Questions/Q 597519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:17:22+00:00

I’m wondering how can I access overflowing elements. I would like to copy their

  • 0

I’m wondering how can I access overflowing elements. I would like to copy their content in to another div or something.
Lets say I got a ul with 5 li elements, but only two are visible. So.. How can I get other 3 elements in another div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to compute if something is visible or not and to do that you have to make assumptions. Below is a simple example of this. It assumes that the list is a traditional list (in that each item is below the next). It then uses a calculation to determine if the offsetTop is greater than the container’s height. You can tailor this to see if something is partially visible or completely visible.

    return this.offsetTop + $(this).height() > height;

    means apply the effect if the item isn’t fully visible. To not move items that are partially visible change it to:

    return this.offsetTop > height;

    Full example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  var height = $("#container").height();
  $("#container li").filter(function() {
    return this.offsetTop + $(this).height() > height;
  }).wrapAll("<ul>").parent().appendTo("#overflow");
});
</script>
<style type="text/css">
div, ul, li { border: 0 none; padding: 0; margin: 0; }
#container { background: yellow; margin-bottom: 20px; height: 50px; overflow: hidden; }
#overflow { background: #CCC; }
</style>
</head>
<body>
<div id="container">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</div>
<div id="overflow">
</div>
</body>
</html>

    A more general solution would be much more tedious. You would have to cater for items that are left, right, above or below the “viewport”.

    • 0