jQuery: How to hide a frame on parent?

Question

Hello,

I have the main page that contains multiple frames within the frameset. One of the frames is a toolbar with buttons, I would like to be able to press a button on that toolbar and it will go and hide one of the frames on the main page.

I've tried the following from within the toolbar frame but it doesn't work...

$(document).parent.$("#other_frame").hide("slow");

I'm REALLY new to jQuery and after searching the web I'm pretty much lost.

Thank you for your help.

EDIT: My complete main page

<frameset frameborder="0"  rows="70, *">
   <frame name="toolbar" src="toolbar.html" marginwidth="8px" marginheight="8px" />
   <frameset id="lineNumFrameset" frameborder="0" cols="50, *">
      <frameset rows="*, 16">
      <frame id="other_frame" name="lineNum" src="lineNum.html" marginwidth="8px" marginheight="8px" align="top" />
      </frameset>

      <frame name="editor" src="editor.html" marginwidth="8px" marginheight="8px" />
   </frameset>
</frameset>

Answer 1

As far as my understanding of things goes, you need to perform actions like hide on divs. Basically, whatever you are trying to affect needs to respond to the css display attribute. If you must use frames, I would strongly suggest you use divs instead, then you will need to write some jQuery that actually removes the frame from the DOM instead of just trying to hide it.

Answer 2

$(document).parent.$("#other_frame").hide("slow");

Ah. Several problems here. Firstly, it's parent() to call the function. However, jQuery can't step out of a document to the parent document using parent(). To navigate up frames you need the window.parent property:

window.parent.$('#other_frame').hide('slow');

But for this to work you would need a copy of jQuery loaded in the parent document so you could call its $. (Scripting one document from another document's copy of $ doesn't generally work; jQuery is not especially designed for cross-frame-scripting.)

And the final reason it doesn't work is that you can't really script/style frameset pages. Browsers may ignore scripts in these special pages, and many CSS properties just don't work on frames (including display: none, which jQuery's hide() uses).

Try using iframes instead of frames to get a more readily scriptable page. (Getting the frame-style layout: fixed stuff to work in IE6 will be a pain though.) Or, if you can manage it at all, doing it all in one document will be much more manageable. Cross-frame scripting has many subtle and annoying traps.

Answer 3

I did this way, without jquery, I've a "link" in the main frame that calls the go() function. go function expands or collapses the first frame of the "FrameSetMain". I've tested on ie8 and firefox 3.6.

var oggFS = parent.document.getElementById("FrameSetMain");
var startingWidth = oggFS.cols
var w = 0;
function collapse(min) { 
    s = oggFS.cols.split(",");
    w = parseInt(parseFloat(s[0]) / 2);
    oggFS.cols = w + ",8,*";
    if (w>min) { setTimeout("collapse("+min+")",50); } else {
        oggFS.cols = min + ",8,*";
        document.getElementById("link").title = "Show menu";
    }
}
function expand(max) { 
    s = oggFS.cols.split(",");
    if (s[0]==0) s[0]=5;
    w = parseInt(parseFloat(s[0]) * 2);
    oggFS.cols = w + ",8,*";
    if (w<max) { setTimeout("expand("+max+")",50); } else {
        oggFS.cols = max + ",8,*";
        document.getElementById("link").title = "Hide menu";
    }
}
function go(){ if (oggFS.cols != "0,8,*") { collapse(0); } else { s = startingWidth.split(","); expand(s[0]); } }

Answer 4

Thanks a lot for your code Pons, it helped me a lot on the same kind of problem.