ipeychev/items_overflow.html

## items_overflow.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>YUI3 Accordion widget - overflow example page</title>

        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssreset/reset-min.css&3.1.1/build/cssbase/base-min.css&3.1.1/build/cssfonts/fonts-min.css&gallery-2010.05.19-19-08/build/gallery-accordion/assets/skins/sam/gallery-accordion.css">

        <style type="text/css">
            html, body {
                height:100%;
                background-color: #F2FBFF;
            }

            .main_cont {
                width: 1024px;
                height: 700px;
            }

            .acc_container1 {
                top: 3em;
                position: relative;
                width: 450px;
                height: 400px;
                float: left;
                margin-right: 50px;
                margin-left: 50px;
            }


        </style>

        <script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

        <script type="text/javascript">

        YUI({
            gallery : 'gallery-2010.05.19-19-08'
        }).use( 'dd-constrain', 'dd-proxy', 'dd-drop', 'gallery-accordion', function(Y) {
            var accordion1;

            accordion1 = new Y.Accordion( {
                srcNode: "#acc1",
                reorderItems: true
            });

            accordion1.render();
        });
        </script>
    </head>
    <body class="yui3-skin-sam">
        <div class="main_cont">
            <div id="acc_container" class="acc_container1">
                <div id="acc1" class="yui3-accordion">
                    <div id="item1" class="yui3-accordion-item" data-contentheight="stretch" data-expanded="true">
                        <div class="yui3-widget-hd">
                            <a class="yui3-accordion-item-label">Stretched item1 with overflow</a>
                        </div>
                        <div class="yui3-widget-bd">
                            <div id="item1content" style="position:relative; overflow:auto; height:100%;">
                                <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque felis et risus vestibulum egestas. Mauris at lorem erat. Phasellus vehicula ipsum ac lorem condimentum id rutrum justo cursus. Morbi mattis justo in felis viverra dictum. Aenean egestas nibh eget nunc pharetra eu blandit nisl auctor. Quisque convallis cursus quam, vitae fermentum ligula scelerisque eget. In sed pretium augue. Quisque tellus tellus, fermentum at commodo id, ultricies commodo metus. Duis ullamcorper egestas tempus. In hac habitasse platea dictumst. Aenean vehicula dolor quis ante rhoncus vitae vulputate dui iaculis. Duis semper facilisis ipsum quis egestas. Morbi hendrerit dolor id nisi sagittis vel mattis eros porta. Nullam ut sapien augue, id sagittis justo. Nullam lacinia eleifend sem, vitae pellentesque metus gravida a. Aliquam turpis enim, bibendum mattis pulvinar vitae, suscipit fermentum augue. Suspendisse luctus tellus vitae nibh interdum aliquet. Donec elementum rutrum felis, ac bibendum nibh sodales eu.
                                <p>
<p>
Praesent congue diam sit amet orci laoreet elementum. Nam odio magna, tincidunt at interdum non, placerat vitae felis. Pellentesque vel ipsum feugiat arcu rhoncus consectetur. Sed non lorem nulla, pretium semper lectus. Mauris turpis eros, hendrerit ac suscipit eu, blandit ut eros. In hac habitasse platea dictumst. Praesent ultrices nulla eget nisl malesuada accumsan. Donec viverra aliquam metus vel sagittis. Aenean gravida eleifend felis eleifend sodales. Quisque ac nisi nulla. Donec vel mi non erat eleifend ornare at quis erat. Ut leo sapien, ullamcorper vel faucibus vel, auctor ut massa. In hac habitasse platea dictumst. Nunc vulputate condimentum sem sit amet euismod. Maecenas pellentesque ornare rutrum. Ut et suscipit elit. Aliquam varius consequat enim, vel pulvinar dui viverra tempor. In hac habitasse platea dictumst. Ut in mauris ut nibh cursus venenatis in id elit.
</p>
                            </div>
                        </div>
                    </div>

                    <div id="item2" class="yui3-accordion-item" data-contentheight="stretch">
                        <div class="yui3-widget-hd">
                            <a class="yui3-accordion-item-label">Stretched item2 with overflow</a>
                        </div>
                        <div class="yui3-widget-bd">
                            <div id="item2content" style="position:relative; overflow:auto; height:100%;">
<p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque felis et risus vestibulum egestas. Mauris at lorem erat. Phasellus vehicula ipsum ac lorem condimentum id rutrum justo cursus. Morbi mattis justo in felis viverra dictum. Aenean egestas nibh eget nunc pharetra eu blandit nisl auctor. Quisque convallis cursus quam, vitae fermentum ligula scelerisque eget. In sed pretium augue. Quisque tellus tellus, fermentum at commodo id, ultricies commodo metus. Duis ullamcorper egestas tempus. In hac habitasse platea dictumst. Aenean vehicula dolor quis ante rhoncus vitae vulputate dui iaculis. Duis semper facilisis ipsum quis egestas. Morbi hendrerit dolor id nisi sagittis vel mattis eros porta. Nullam ut sapien augue, id sagittis justo. Nullam lacinia eleifend sem, vitae pellentesque metus gravida a. Aliquam turpis enim, bibendum mattis pulvinar vitae, suscipit fermentum augue. Suspendisse luctus tellus vitae nibh interdum aliquet. Donec elementum rutrum felis, ac bibendum nibh sodales eu.
                                <p>
<p>
Praesent congue diam sit amet orci laoreet elementum. Nam odio magna, tincidunt at interdum non, placerat vitae felis. Pellentesque vel ipsum feugiat arcu rhoncus consectetur. Sed non lorem nulla, pretium semper lectus. Mauris turpis eros, hendrerit ac suscipit eu, blandit ut eros. In hac habitasse platea dictumst. Praesent ultrices nulla eget nisl malesuada accumsan. Donec viverra aliquam metus vel sagittis. Aenean gravida eleifend felis eleifend sodales. Quisque ac nisi nulla. Donec vel mi non erat eleifend ornare at quis erat. Ut leo sapien, ullamcorper vel faucibus vel, auctor ut massa. In hac habitasse platea dictumst. Nunc vulputate condimentum sem sit amet euismod. Maecenas pellentesque ornare rutrum. Ut et suscipit elit. Aliquam varius consequat enim, vel pulvinar dui viverra tempor. In hac habitasse platea dictumst. Ut in mauris ut nibh cursus venenatis in id elit.
</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>YUI3 Accordion widget - overflow example page</title>

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssreset/reset-min.css&3.1.1/build/cssbase/base-min.css&3.1.1/build/cssfonts/fonts-min.css&gallery-2010.05.19-19-08/build/gallery-accordion/assets/skins/sam/gallery-accordion.css">

	<style type="text/css">
	html, body {
	height:100%;
	background-color: #F2FBFF;
	}

	.main_cont {
	width: 1024px;
	height: 700px;
	}

	.acc_container1 {
	top: 3em;
	position: relative;
	width: 450px;
	height: 400px;
	float: left;
	margin-right: 50px;
	margin-left: 50px;
	}


	</style>

	<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

	<script type="text/javascript">

	YUI({
	gallery : 'gallery-2010.05.19-19-08'
	}).use( 'dd-constrain', 'dd-proxy', 'dd-drop', 'gallery-accordion', function(Y) {
	var accordion1;

	accordion1 = new Y.Accordion( {
	srcNode: "#acc1",
	reorderItems: true
	});

	accordion1.render();
	});
	</script>
	</head>
	<body class="yui3-skin-sam">
	<div class="main_cont">
	<div id="acc_container" class="acc_container1">
	<div id="acc1" class="yui3-accordion">
	<div id="item1" class="yui3-accordion-item" data-contentheight="stretch" data-expanded="true">
	<div class="yui3-widget-hd">
	<a class="yui3-accordion-item-label">Stretched item1 with overflow</a>
	</div>
	<div class="yui3-widget-bd">
	<div id="item1content" style="position:relative; overflow:auto; height:100%;">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque felis et risus vestibulum egestas. Mauris at lorem erat. Phasellus vehicula ipsum ac lorem condimentum id rutrum justo cursus. Morbi mattis justo in felis viverra dictum. Aenean egestas nibh eget nunc pharetra eu blandit nisl auctor. Quisque convallis cursus quam, vitae fermentum ligula scelerisque eget. In sed pretium augue. Quisque tellus tellus, fermentum at commodo id, ultricies commodo metus. Duis ullamcorper egestas tempus. In hac habitasse platea dictumst. Aenean vehicula dolor quis ante rhoncus vitae vulputate dui iaculis. Duis semper facilisis ipsum quis egestas. Morbi hendrerit dolor id nisi sagittis vel mattis eros porta. Nullam ut sapien augue, id sagittis justo. Nullam lacinia eleifend sem, vitae pellentesque metus gravida a. Aliquam turpis enim, bibendum mattis pulvinar vitae, suscipit fermentum augue. Suspendisse luctus tellus vitae nibh interdum aliquet. Donec elementum rutrum felis, ac bibendum nibh sodales eu.
	<p>
	<p>
	Praesent congue diam sit amet orci laoreet elementum. Nam odio magna, tincidunt at interdum non, placerat vitae felis. Pellentesque vel ipsum feugiat arcu rhoncus consectetur. Sed non lorem nulla, pretium semper lectus. Mauris turpis eros, hendrerit ac suscipit eu, blandit ut eros. In hac habitasse platea dictumst. Praesent ultrices nulla eget nisl malesuada accumsan. Donec viverra aliquam metus vel sagittis. Aenean gravida eleifend felis eleifend sodales. Quisque ac nisi nulla. Donec vel mi non erat eleifend ornare at quis erat. Ut leo sapien, ullamcorper vel faucibus vel, auctor ut massa. In hac habitasse platea dictumst. Nunc vulputate condimentum sem sit amet euismod. Maecenas pellentesque ornare rutrum. Ut et suscipit elit. Aliquam varius consequat enim, vel pulvinar dui viverra tempor. In hac habitasse platea dictumst. Ut in mauris ut nibh cursus venenatis in id elit.
	</p>
	</div>
	</div>
	</div>

	<div id="item2" class="yui3-accordion-item" data-contentheight="stretch">
	<div class="yui3-widget-hd">
	<a class="yui3-accordion-item-label">Stretched item2 with overflow</a>
	</div>
	<div class="yui3-widget-bd">
	<div id="item2content" style="position:relative; overflow:auto; height:100%;">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque felis et risus vestibulum egestas. Mauris at lorem erat. Phasellus vehicula ipsum ac lorem condimentum id rutrum justo cursus. Morbi mattis justo in felis viverra dictum. Aenean egestas nibh eget nunc pharetra eu blandit nisl auctor. Quisque convallis cursus quam, vitae fermentum ligula scelerisque eget. In sed pretium augue. Quisque tellus tellus, fermentum at commodo id, ultricies commodo metus. Duis ullamcorper egestas tempus. In hac habitasse platea dictumst. Aenean vehicula dolor quis ante rhoncus vitae vulputate dui iaculis. Duis semper facilisis ipsum quis egestas. Morbi hendrerit dolor id nisi sagittis vel mattis eros porta. Nullam ut sapien augue, id sagittis justo. Nullam lacinia eleifend sem, vitae pellentesque metus gravida a. Aliquam turpis enim, bibendum mattis pulvinar vitae, suscipit fermentum augue. Suspendisse luctus tellus vitae nibh interdum aliquet. Donec elementum rutrum felis, ac bibendum nibh sodales eu.
	<p>
	<p>
	Praesent congue diam sit amet orci laoreet elementum. Nam odio magna, tincidunt at interdum non, placerat vitae felis. Pellentesque vel ipsum feugiat arcu rhoncus consectetur. Sed non lorem nulla, pretium semper lectus. Mauris turpis eros, hendrerit ac suscipit eu, blandit ut eros. In hac habitasse platea dictumst. Praesent ultrices nulla eget nisl malesuada accumsan. Donec viverra aliquam metus vel sagittis. Aenean gravida eleifend felis eleifend sodales. Quisque ac nisi nulla. Donec vel mi non erat eleifend ornare at quis erat. Ut leo sapien, ullamcorper vel faucibus vel, auctor ut massa. In hac habitasse platea dictumst. Nunc vulputate condimentum sem sit amet euismod. Maecenas pellentesque ornare rutrum. Ut et suscipit elit. Aliquam varius consequat enim, vel pulvinar dui viverra tempor. In hac habitasse platea dictumst. Ut in mauris ut nibh cursus venenatis in id elit.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>