1
2
3
4
5
6

Animating a Silverlight Object's Embed Size Using jQuery or MooTools

One of the projects I'm working on right now requires having a Silverlight object on a page grow to be larger and shrink to be smaller as its containing <div> area's size is changed using javascript. Below is the Silverlight embed code, and the relative javascript for using either jQuery or MooTools. All the javascript functions take action on a div section named 'resizableControlHost' which I added to wrap the normal 'silverlightControlHost' div section.

Basic HTML of Silverlight object embed (wrapped in a 'resizableControlHost' div):

<div id="resizableControlHost">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," 
                type="application/x-silverlight-2" 
                width="100%" height="100%">
        <!-- details removed -->
        </object>
    </div>
</div>

Resizing the 'resizableControlHost' div with jQuery:

function gotoSmallSize() {
    $("#resizableControlHost").animate({
        width: "200px",
        height: "100px",
    }, 500);
}

(click 'read more' to keep reading..)