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!
The first problem is you will get different CSS depending on what browser you use (which may be obvious to you!). The CSS3 rounded corners standard have yet to stabilize, the required CSS will be different on Firefox, the Webkit based browsers (Safari, Chrome) and Opera. Therefore you need to use different developer tools to acquire the CSS/VML.
Using Firebug in Firefox you can aquire this:
Using Chrome’s developer tools you can acquire this:
If I simplify your example to so that it is only:
Then the IE8 Developer tool gives me:
The job now is to recombine all the various CSS/VML developer tool dumps back into a single HTML file which hopefully won’t need DD_roundies any longer! Alternatively, you could just trust DD_roundies to do it’s job. Personally I’m always in danger of attempting the more challenging task when the simple one would do the job better!