Skip to content

Instantly share code, notes, and snippets.

@ipeychev

ipeychev/test_dynamically_loading.html

Created February 22, 2010 20:20
Show Gist options
  • Save ipeychev/311451 to your computer and use it in GitHub Desktop.
Save ipeychev/311451 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test_dynamically_loading.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Accordion - test dynamic content loading</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="http://github.com/ipeychev/yui3-gallery/raw/dynamic_load/build/gallery-accordion/assets/skins/sam/gallery-accordion.css">
<style type="text/css">
html, body {
height:100%;
}
</style>
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://github.com/ipeychev/yui3-gallery/raw/dynamic_load/build/gallery-accordion/gallery-accordion-min.js"></script>
</head>
<body class="yui-skin-sam">
<div style="position: absolute; width:300px; height: 550px;">
<div id="bb1" class="yui-accordion">
<div id="acc1" class="yui-accordion-content">
<div id="item1" class="yui-accordion-item">
<div class="yui-widget-hd">
<a class="yui-accordion-item-label">Label 1 from markup</a>
</div>
</div>
<div id="item2" class="yui-accordion-item" data-contentheight="stretch" data-alwaysvisible="true">
<div class="yui-widget-hd">
<a class="yui-accordion-item-label">Label 2 from markup</a>
</div>
<div class="yui-widget-bd">
<div style="position: relative; height: 100%; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus libero a ipsum iaculis euismod. Quisque ac enim a ipsum ornare bibendum condimentum nec quam. Quisque viverra gravida velit vel interdum. Pellentesque id quam non odio dictum mattis ut ut erat. Mauris convallis sodales risus, at placerat purus vestibulum nec. Phasellus ac lectus dui. Nunc quam eros, suscipit et venenatis sit amet, hendrerit at sapien. Vivamus non odio arcu. Vestibulum id neque sapien, vel sollicitudin augue. Proin vel velit nulla.<br>
In hac habitasse platea dictumst. Sed velit ante, semper eget accumsan sed, posuere ut turpis. Duis lacinia massa fringilla urna venenatis non feugiat lectus faucibus. Cras quis dui vel turpis commodo rutrum vel et neque. Nulla vestibulum pharetra ante, nec mollis libero ultricies eget. Quisque tempor urna sed justo lacinia eleifend. Duis eget nisl augue, quis lacinia lorem. Maecenas sed mi quis lacus euismod adipiscing eget non ante. Praesent sagittis rhoncus enim, at pretium purus placerat sit amet. Nunc porta turpis id turpis tristique ac facilisis felis gravida. Vivamus neque ante, fermentum fringilla bibendum dapibus, cursus sit amet est. Proin porta hendrerit aliquam. In hac habitasse platea dictumst. In nec diam in libero mollis sollicitudin sit amet non dolor. In sed adipiscing elit. Duis aliquam sapien et ligula dictum pharetra. Vivamus posuere odio gravida sapien vehicula scelerisque. Donec nunc neque, faucibus vel volutpat a, pulvinar ac odio.
</div>
</div>
</div>
<div id="item3" class="yui-accordion-item" data-contentheight="stretch" data-alwaysvisible="1">
<div class="yui-widget-hd">
<a class="yui-accordion-item-label">Label 3 from markup</a>
</div>
<div class="yui-widget-bd">
<div style="position: relative; height: 100%; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus libero a ipsum iaculis euismod. Quisque ac enim a ipsum ornare bibendum condimentum nec quam. Quisque viverra gravida velit vel interdum. Pellentesque id quam non odio dictum mattis ut ut erat. Mauris convallis sodales risus, at placerat purus vestibulum nec. Phasellus ac lectus dui. Nunc quam eros, suscipit et venenatis sit amet, hendrerit at sapien. Vivamus non odio arcu. Vestibulum id neque sapien, vel sollicitudin augue. Proin vel velit nulla.<br>
In hac habitasse platea dictumst. Sed velit ante, semper eget accumsan sed, posuere ut turpis. Duis lacinia massa fringilla urna venenatis non feugiat lectus faucibus. Cras quis dui vel turpis commodo rutrum vel et neque. Nulla vestibulum pharetra ante, nec mollis libero ultricies eget. Quisque tempor urna sed justo lacinia eleifend. Duis eget nisl augue, quis lacinia lorem. Maecenas sed mi quis lacus euismod adipiscing eget non ante. Praesent sagittis rhoncus enim, at pretium purus placerat sit amet. Nunc porta turpis id turpis tristique ac facilisis felis gravida. Vivamus neque ante, fermentum fringilla bibendum dapibus, cursus sit amet est. Proin porta hendrerit aliquam. In hac habitasse platea dictumst. In nec diam in libero mollis sollicitudin sit amet non dolor. In sed adipiscing elit. Duis aliquam sapien et ligula dictum pharetra. Vivamus posuere odio gravida sapien vehicula scelerisque. Donec nunc neque, faucibus vel volutpat a, pulvinar ac odio.
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
YUI().use("gallery-accordion", function(Y) {
this.accordion1 = new Y.Accordion( {
boundingBox: "#bb1",
contentBox: "#acc1"
});
this.accordion1.render();
this.accordion1.on( "beforeItemExpand", function( attrs ){
var item = attrs.item;
if( item.get('contentBox').get('id') === "item1" &&
item.getStdModNode('body').get('children').size() === 0 ){
item.set( "bodyContent", "<div>Loading, please wait...</div>" );
Y.later(1000, this, function(){
item.set( "bodyContent", "<div>Loading finished successfully!<br>This is the new content of the item.</div>" );
});
}
}, this );
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment