dynamic VML element creation

685 views Asked by At

I am creating the VML element dynamically.Please refer below code.

<html> 
<head>  
<!-- VML requires VML namespace and behavior. --> 
 <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
    //Flag to stop rectangle from spinning. 
    var spin;
    $(document).ready(function () {
        document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
        // Create element in memory. 
        var r = document.createElement("v:rect");
        // Define width, height, color, and unique ID.
        $(r).css("width", "100");
        $(r).css("height", "100");
        $(r).attr("fillcolor", "blue");
        $(r).attr("strokecolor", "red");
        $(r).attr("strokeweight", "5");
        $(r).css('left', '100');
        $(r).css('top', '100');
        $(r).css('position', 'absolute');
        $(r).css('opacity', '0.2');
        r.id = "myRect";
        // Attach rectangle to the document at the  the specified Div. 
        anchorDiv.appendChild(r);

    });

</script>  
</head>  
<body>  

<div id="anchorDiv"></div>  
</body> 
</html> 

Which displays the output in browser mode -> IE 7 and document mode -> IE 5 .Please refer below image.

enter image description here

but after am changing the document mode -> IE 7 nothing displayed.(i.e. blank screen). then i clicked edit button two times in developer tools of IE browser. Please refer below image

enter image description here

it displays the rectangle. i don't know what is the reason for this ? and some times even in IE 5 document mode itself rectangle not showing then i followed same procedure ( clicked edit button two times in developer tools of IE browser),it will displays the rectangle. can some explain what's going wrong on this ?

Thanks,

Siva

0

There are 0 answers