Search code examples
jquerycsssharepoint-2010

Resize specific div

Given:

<html>
<body class="v4master">
    <form id="aspnetForm">
        <div id="s4-workspace"></div>
    </form>

    <div class="ms-dlgContent"></div>
        <div class="ms-dlgBorder"></div>
            <div class="ms-dlgFrameContainer">
                <iframe class="ms-dlgFrame">
                    <html class="ms-dialog">
                        <body class="v4master">
                            <form id="aspnetForm">
                                <div id="s4-workspace"></div>
                            </form>
                        </body>
                    </html>
                </iframe>
            </div>
        </div>
    </div>
</body>

How can alter the height of the first "s4-workspace" with jquery while leaving the one in the iframe alone? I would perfer to use a method like this:

jQuery('#s4-workspace').css('cssText', 'height: ' + NewHeight + 'px;');
Solution

  • jQuery will not target the #s4-workspace inside the <iframe> anyway since the content in that belongs to a parallel DOM. Besides that you should use

    jQuery('#s4-workspace').css('height', NewHeight);

    http://jsfiddle.net/udfs8e24/12/