views:

67

answers:

1

I'm working with a business intelligence tool that only gives me access to a deeply nested iframe to add code. Ideally I would like to use jQuery and/or plain old JavaScript to modify the left and position CSS of a div that is 3 iframes above my IFRAME.

I have access to add JavaScript/HTML to divArea0_1 within the reportiframe IFRAME. I would like to modify the propdiv DIV contained within the JSTabbedPanel IFRAME. Hopefully the HTML below is legible enough. :) Any ideas or help is greatly appreciated.

<html>
<div id = "tabs">
<iframe id = "tabbedPanel">
    <iframe id = "JSTabbedPanel">
        <div id = "treeTypeDiv">
            <div id = "treediv">
                <iframe id = "treeFrame"></iframe>
            </div>
            <div id = "propdiv">
                <iframe id = "propFrame">
                    <div id = "reportpane">
                        <iframe id = "reportiframe">
                            <div id = "divEntire">
                                <div id = "divArea0_1">
                                    <div id = "MyCode goes HERE"></div>
                                </div>
                            </div>
                        </iframe>
                    </div>          
                </iframe>               
            </div>              
        </div>
    </iframe>
</iframe>
</div>
</html>
A: 

Assuming the ids dont change, directly referencing the id of the element is the quickest selector. Use the css method and an object literal to change the position (assuming it is display:absolute)

$(document).ready(function() {
    $('#propdiv').css({top:'12px', left: '34px'});
});
James Westgate
If I'm accessing an element in a different iframe, don't I have to specify the context ? I'm just not sure how to move up 2 iframes.Thanks.
clintboxe