I am using DD_roundies to generate rounded corners in Internet Explorer. The pages that have the rounded elements are loaded very often and the roundies script has to run many times to round corners and fix pngs. This costs a lot of time. The script produces some VML elements that are placed in the targeted elements, and some CSS that it injects into a block.
I want to save both the VML and the CSS to reuse when the page loads so that I don't have to run the script every time. The targeted elements are already being saved in a database and reinserted into the DOM through java at load time.
I made a test page where after the roundies script runs I then grab the html of the elements including the VML, the XML namespace, and the CSS. I'm having some troubles getting the innerHTML of the block in IE, but I was able to get it using IE developer tools just so I could test it. After getting the various pieces I placed them on a separate HTML file to see if they would render correctly. My test did not work.
Here is the first test page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function(){
DD_roundies.addRule('#block_1', '20px 20px 0 0', true);
DD_roundies.addRule('#block_2', '0 20px 20px 0', true);
DD_roundies.addRule('#block_3', '0 0 20px 20px', true);
DD_roundies.addRule('#block_4', '20px 0 0 20px', true);
$('#getContent').click(function(){
var allHTML = $('#allContent').html();
$('#captureContent').text(allHTML).val(allHTML);
});
$('#getStyles').click(function(){
var allStyles = $('#allStyles').html();
$('#captureStyles').text(allStyles).val(allStyles);
});
});
</script>
<div id="allContent">
<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<style id="allStyles" type="text/css">
.blocks{
width: 150px;
height: 100px;
margin: 5px;
border: 3px solid #999;
}
</style>
<div id="block_1" class="blocks"></div>
<div id="block_2" class="blocks"></div>
<div id="block_3" class="blocks"></div>
<div id="block_4" class="blocks"></div>
</div>
<button id="getStyles">Get Styles</button>
<textarea id="captureStyles"></textarea>
<br />
<button id="getContent">Get Content</button>
<textarea id="captureContent"></textarea>
Any help will be greatly appreciated, thanks!