jQuery: Comment masquer un cadre sur un parent?

Question

J'ai la page principale qui contient plusieurs cadres dans le jeu de cadres. L'un des cadres est une barre d'outils avec des boutons, je voudrais pouvoir appuyer sur un bouton sur cette barre d'outils et il ira cacher un des cadres sur la page principale.

J'ai essayé ce qui suit à l'intérieur du cadre de la barre d'outils, mais il ne fonctionne pas ...

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

Je suis vraiment nouveau à jQuery et après recherche sur le Web, je suis à peu près perdu.

Nous vous remercions de votre aide.

EDIT: Ma page principale complète

<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

En ce qui concerne ma compréhension des choses va, vous devez effectuer des actions comme le cacher divs. Fondamentalement, tout ce que vous essayez d'affecter doit répondre à l'attribut d'affichage css. Si vous devez utiliser des cadres, je vous suggérerais fortement d'utiliser divs, alors vous aurez besoin d'écrire un certain jQuery qui supprime réellement l'image du DOM au lieu de simplement essayer de le cacher.

Answer 2

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

Ah. Plusieurs problèmes ici. Premièrement, c'est parent() pour appeler la fonction. Toutefois, jQuery ne peut pas sortir d'un document vers le document parent en utilisant parent(). Pour naviguer vers le haut cadres dont vous avez besoin la propriété window.parent:

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

Mais pour cela, vous devez travailler une copie de jQuery chargé dans le document parent pour que vous puissiez appeler son $. (Le scriptage d'un document provenant de la copie de $ d'un autre document ne fonctionne généralement pas, jQuery n'est pas spécialement conçu pour le cross-frame-scripting.)

Et la dernière raison pour laquelle cela ne fonctionne pas, c'est que vous ne pouvez pas vraiment écrire/style des pages de frameset. Les navigateurs peuvent ignorer les scripts dans ces pages spéciales, et de nombreuses propriétés CSS ne fonctionnent pas sur les cadres (y compris display: none, que hide() de jQuery utilise).

Essayez d'utiliser iframe s au lieu de frame s pour obtenir une page plus facilement scriptable. (Obtenir les trucs layout: fixed de style cadre pour travailler dans IE6 sera cependant pénible.) Ou, si vous pouvez le gérer du tout, tout faire en un seul document sera beaucoup plus gérable. Les scripts inter-frames comportent de nombreux pièges subtils et ennuyants.

Answer 3

Je l'ai fait de cette façon, sans jquery, j'ai un "lien" dans le cadre principal qui appelle la fonction go(). La fonction go étend ou réduit la première image de "FrameSetMain". J'ai testé sur IE8 et 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

Vous pouvez modifier le frameset avec quelque chose comme:

//hide 
     var orig = $('#myFrameSet', top.document).attr('rows'); 
     $('#myFrameSet', top.document).attr({'rows':'0,*'}) 

     .... 

//show 
     $('#myFrameSet', top.document).attr({'rows':orig}) 
     orig = null; 

Vous pouvez le faire pour les Col. aussi bien.

Answer 5

Essayez ceci:

if(window.parent.document.getElementById("myFrameset").cols!="40px,*"){ 
       $('#left-title-txt').hide(); 
       window.parent.document.getElementById("myFrameset").cols="40px,*"; 
       $(this).css('background-image','url(img/openleft.png)'); 
      }else{ 
       $('#left-title-txt').show(); 
       window.parent.document.getElementById("myFrameset").cols="20%,80%"; 
       $(this).css('background-image','url(img/hideleft.png)'); 
      }