Menu non visualizzato correttamente una volta chiamato da iframe

Sto riscontrando un problema nella visualizzazione di un iframe su una pagina.Menu non visualizzato correttamente una volta chiamato da iframe

Ho una cornice superiore che visualizza un logo lungo la parte superiore (che va bene) Ho un menu lungo il lato sinistro della pagina. (che sto avendo un problema con) Ho una cornice alla destra del menu che visualizzerà la mia pagina.

La mia pagina index.htm è il caricamento di tutti i fotogrammi e si presenta così:

<script language="javascript"> 
    function win_resize() 
    { 
     var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight; 
      document.getElementById('leftMenu').height = _docHeight - 90; 
    } 
</script> 

<body onresize="win_resize()"> 
    <!-- Header --> 
    <div id="header"> 
     <div> 
      <img src="logo.png"> 
     </div> 
    </div> 

    <!-- Left Menu --> 
    <div id="left-sidebar" > 
     <iframe id="leftMenu" src="menu.htm" STYLE="top:72px; left:0px; position:absolute;" NAME="menu" width="270px" frameborder="0"></iframe> 
    </div> 

    <!-- Main Page --> 
    <div id="content"> 
     <iframe src="users1.htm" STYLE="top:72px" NAME="AccessPage" width="100%" height="100%" frameborder="0"></iframe> 
    </div> 
</body>

La mia pagina Menu.htm ha il seguente codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en-GB"> 

<head> 
    <link rel="stylesheet" type="text/css" href="_styles.css" media="screen"> 
</head> 
<body> 

    <ol class="tree"> 
     <li> 
      <li class="file"><a href="file1.htm">File 1</a></li> 
      <li class="file"><a href="file2.htm">File 2</a></li> 
      <li class="file"><a href="file3.htm">File 3</a></li> 
      <li class="file"><a href="file4.htm">File 4</a></li> 
      <li class="file"><a href="file5.htm">File 5</a></li> 

     </li> 
    <li> 
      <label for="folder2">My Test 1</label> <input type="checkbox" id="folder2" /> 

      <ol> 
      <li class="file"><a href="status.htm">Settings</a></li> 
       <li> 

        <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
    </li> 
    <li> 
      <label for="folder2">My Test 2</label> <input type="checkbox" id="folder2" /> 

      <ol> 
      <li class="file"><a href="status.htm">Settings</a></li> 
       <li> 

        <label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
       <li> 
        <label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" /> 
        <ol> 
         <li class="file"><a href="">file1</a></li> 
         <li class="file"><a href="">file2</a></li> 
         <li class="file"><a href="">file3</a></li> 
         <li class="file"><a href="">file4</a></li> 
         <li class="file"><a href="">file5</a></li> 
         <li class="file"><a href="">file6</a></li> 
        </ol> 
       </li> 
    </li> 
</body> 
</html>

Il mio file _styles.css ha il seguente:

/* Just some base styles not needed for example to function */ 
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; } 

body, form, ul, li, p, h1, h2, h3, h4, h5 
{ 
    margin: 0; 
    padding: 0; 
} 
body { background-color: #606061; color: #ffffff; margin: 0; } 
img { border: none; } 
p 
{ 
    font-size: 1em; 
    margin: 0 0 1em 0; 
} 

html { font-size: 100%; /* IE hack */ } 
body { font-size: 1em; /* Sets base font size to 16px */ } 
table { font-size: 100%; /* IE hack */ } 
input, select, textarea, th, td { font-size: 1em; } 

/* CSS Tree menu styles */ 
ol.tree 
{ 
    padding: 0 0 0 30px; 
    width: 300px; 
} 
    li 
    { 
     position: relative; 
     margin-left: -15px; 
     list-style: none; 
    } 
    li.file 
    { 
     margin-left: -1px !important; 
    } 
     li.file a 
     { 
      background: url(document.png) 0 0 no-repeat; 
      color: #fff; 
      padding-left: 21px; 
      text-decoration: none; 
      display: block; 
     } 
     li.file a[href *= '.pdf'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href *= '.html'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href $= '.css'] { background: url(document.png) 0 0 no-repeat; } 
     li.file a[href $= '.js']  { background: url(document.png) 0 0 no-repeat; } 
    li input 
    { 
     position: absolute; 
     left: 0; 
     margin-left: 0; 
     opacity: 0; 
     z-index: 2; 
     cursor: pointer; 
     height: 1em; 
     width: 1em; 
     top: 0; 
    } 
     li input + ol 
     { 
      background: url(toggle-small-expand.png) 40px 0 no-repeat; 
      margin: -0.938em 0 0 -44px; /* 15px */ 
      height: 1em; 
     } 
     li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; } 
    li label 
    { 
     background: url(folder-horizontal.png) 15px 1px no-repeat; 
     cursor: pointer; 
     display: block; 
     padding-left: 37px; 
    } 

    li input:checked + ol 
    { 
     background: url(toggle-small.png) 40px 5px no-repeat; 
     margin: -1.25em 0 0 -44px; /* 20px */ 
     padding: 1.563em 0 0 80px; 
     height: auto; 
    } 
     li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */} 
     li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

La pagina sembra mostrare correttamente eccetto che il menu a sinistra mostra un checkb bue dove non dovrebbe e shold essere releaced con le icone + o -.

Se apro il mio Menu.htm da è di per sé si mostra correttamente

enter image description here

però quando ho vista la mia pagina index.htm (che carica il menu nella iframe) non mostra il menu correttamente come illustrato di seguito:

enter image description here

tuttavia, non appena si aggiunge questo codice che mostra il menu correttamente:

01.235.164,106174 millions

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

tuttavia, non mostra correttamente l'altezza del documento utilizzando la funzione win_resize.

Immagino che l'ultimo bit di codice stia bloccando il mio codice altezza del documento dalla visualizzazione dell'altezza corretta.

Ho bisogno di quella funzione in modo che possa visualizzare correttamente la cornice del mio menu sulla pagina.

Qualcuno sa dove ho sbagliato, perché funziona bene da solo, ma appena lo chiamo da un iframe non viene visualizzato correttamente?

An I utilizza il codice corretto nella mia funzione per ottenere l'altezza dei documenti per intero o esiste un CSS che posso usare per ottenere l'altezza dei documenti?

fonte

2012-09-24 Aaron

L'iframe 'Left-menu' nel tuo' index.htm' non ha una proprietà 'height'.(Può essere irrilevante) – Souta

Non è necessario riutilizzare gli ID I'd = checkbox2 Gli id per le cattive pratiche sono pensati per essere unici, ecco a cosa servono le classi e potrebbe anche essere uno dei tuoi problemi – Dnaso

Spero che tu sia pronto per una lunga risposta :) Ci sono un sacco di domande che ho sul perché ti accosti alle cose come sei, ma prenderò questo come vincoli per il progetto su cui stai lavorando./tosse/perché no jQuery o simile?/tosse/

In primo luogo l'iFrame problema altezza: Ho semplicemente cambiato il codice per incorporare una funzione di rilevamento altezza cross browser testati come segue

<script language="javascript"> 

    function win_resize() 
    { 
     var _docHeight = getDocHeight(); 
     document.getElementById('leftMenu').height = _docHeight - 90; 
    } 

    //This fixes your calculation of height issue 
    //Cross browser doc height calculator **Credit to http://james.padolsey.com** 
    function getDocHeight() { 
     var D = document; 
     return Math.max(
      Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
      Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
      Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
     ); 
    } 
</script>

Ho anche aggiunto un onload e onResize chiamare per questa funzione in modo da essere inizializzata all'altezza corretta e ridimensionata all'altezza corretta ...

<body onload="win_resize()" onresize="win_resize()">

In secondo luogo la tua pseudo classe "checked" non funzionerà in ie8 o sotto - che presumo tu stia cercando di supportare in quanto ho ottenuto solo il tuo errore di casella di controllo visibile in ie.

Per rimediare a questo problema ho aggiunto alcuni script di base per attivare o disattivare un nome di classe sul ingresso selezionato ...

<script type="text/javascript"> 
    function getCheckedState(e){ 
    var inputId = e.id; 
    var getCheckedState = document.getElementById(inputId).checked; 

    if (getCheckedState == true) { 
     /*if checked add class*/ 
     e.className += " " + 'checked'; 
    } else { 
     /*if not checked set class to empty string*/ 
     e.className = ""; 
    } 
} 

</script>

Sarà inoltre necessario aggiungere la classe .checked agli stili rilevanti nel CSS per esempio

li input:checked + ol, li input.checked + ol

In terzo luogo, le caselle di controllo visibili fastidiosi Questa è stata la parte più semplice, basta aggiungere l'opacità e il filtro l'opacità vale a dire per il CSS sugli ingressi.

li input { 
cursor:pointer; 
... 
opacity: 0; 
filter:alpha(opacity=0); 
}

Infine - cosa forse più importante

Vorrei seriamente in discussione molte cose su questa build e come questo nav funziona. Esistono sicuramente metodi alternativi che è possibile utilizzare che utilizzano elementi html nativi e librerie JS testate su più browser come jQuery per ottenere una migliore compatibilità. Per non parlare dei migliori metodi di costruzione su iFrame!

Ancora una volta che ho detto - presumo che tu sia semplicemente costretto qui.

Un altra cosa che mi sento di sottolineare - è la funzione "onclick" Io uso per innescare il cambiamento di stato dell'ingresso è una scelta deliberata di nuovo per IE Compatibilty - il "onchange" funzionalità è supportata, ma non aggiorna fino alla perdita di onblur di quell'input lasciandolo fuori sincrono (per maggiori informazioni onchange checkbox test page)

Spero che questa risposta ti aiuti anche se solo una parte di questo ti porta nella giusta direzione.

fonte

2012-11-11 01:40:34 frazerjay

L'esempio è molto coinvolta, ma sembra che potrebbe essere questa riga:

li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }

(o un'altra modifica di valori dei margini della ingresso)

Prova modificando i valori dei margini di ingresso e vedere se fornisce i risultati desiderati. La mia ipotesi è che l'iframe stia spingendo il valore di input troppo a sinistra quando viene aggiunto.

fonte

2012-09-24 07:29:17

Utilizzare un file css di ripristino. http://meyerweb.com/eric/tools/css/reset/

Indovina che ti aiuterà.

fonte

2012-11-05 09:16:24

Provate a rendere tutti i vostri ID univoci, il checkbox 2 ne cambia due e potreste essere ok perché è molto caratteristico. Anche l'etichetta per i tag è HTML5 che dovresti sapere ormai odio.

fonte

2012-11-11 18:17:05 Dnaso

Menu non visualizzato correttamente una volta chiamato da iframe

risposta

Problemi correlati