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?
Add a comment
|
1 Answer
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".
