2015-05-12 13 views
6

Ho una barra di navigazione laterale che consente di nascondere e mostrare su ciascun clic nella barra laterale (contiene un collegamento elenco). E un iframe in cui sto visualizzando un sito web. quando clicco su un link nasconderà la barra laterale e la reindirizzerà all'URL corrispondente all'interno dell'area iframe. Il problema è quando sto visualizzando alcuni siti web all'interno di iframe, i collegamenti di quei siti web reindirizzati funzioneranno solo nella metà superiore dell'iframe e rimanendo nella restante metà dei link iframe sono disabilitati. quando scorrono all'interno di iframe i.e quando il collegamento nella metà inferiore arriva alla parte superiore i collegamenti sono abilitati. Ho bisogno di aiuto.Uso di Iframe che causa l'invalidità dei collegamenti

.menu_sample { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     width: 100px; 
 
     border: solid 1px; 
 
     transition: transform 0.1s ease-out; 
 
    } 
 

 
    .content { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     left: 0; 
 
     padding: 10px; 
 
     transition: left 1s ease-out; 
 
     margin-left: -1.5%; 
 
     margin-top: 150%; 
 
    } 
 

 
    /*transition*/ 
 
    .top_mar { 
 
     margin-top: 25%; 
 
    } 
 

 
    /* on toggle*/ 
 
    .content.pushed { 
 
     left: 225px; 
 
    } 
 

 
    .hide { 
 
     transform:translateX(-100px); 
 
    }
<div class="menu_sample top_mar"> 
 
    <div class="col-sm-3 col-md-2 sidebar"> 
 
      <ul class="nav nav-sidebar"> 
 
     <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> 
 
     {% for Dashboard in dashboards %} 
 
<li><a href="{{ Dashboard.d_url }}">{{ Dashboard.d_name }}</a></li> 
 
      {% endfor %} 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    <div class="content pushed top_mar"> 
 
     <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button> 
 
</div> 
 

 
<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" > 
 
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe> 
 
</div>

risposta

0

.menu_sample { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     width: 100px; 
 
     border: solid 1px; 
 
     transition: transform 0.1s ease-out; 
 
    } 
 

 
    .content { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     left: 0; 
 
     padding: 10px; 
 
     transition: left 1s ease-out; 
 
     margin-left: -1.5%; 
 
     margin-top: 150%; 
 
    } 
 

 
    /*transition*/ 
 
    .top_mar { 
 
     margin-top: 25%; 
 
    } 
 

 
    /* on toggle*/ 
 
    .content.pushed { 
 
     left: 225px; 
 
    } 
 

 
    .hide { 
 
     transform:translateX(-100px); 
 
    }
<div class="menu_sample top_mar"> 
 
    <div class="col-sm-3 col-md-2 sidebar"> 
 
      <ul class="nav nav-sidebar"> 
 
     <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> 
 
      
 
<li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li><li><a href="#">Link</a></li> 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    <div class="content pushed top_mar" style="display:none"> 
 
     <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button> 
 
</div> 
 

 
<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" > 
 
<iframe width="100%" height="95%" name="iframe_a" frameborder="0" src="http://en.wikipedia.org/wiki/Help:Link"></iframe> 
 
</div>

Il tuo problema principale è la <div class="content pushed top_mar">. Pls controlla lo screenshot allegato. Questo div si sovrappone agli iframe, ecco perché i link non funzionano in quella regione. I collegamenti sopra il div funzionano come la parte superiore non è coperta dal div.

Non sono sicuro di quale sia lo scopo del div per l'applicazione. Se imposto lo display:none tutti i collegamenti all'interno dell'iframe sono selezionabili.

enter image description here

+0

lo fa supporta IE anche –

+0

se ho impostato la visibilità a nessuno allora sarà nascondere la barra laterale itseflf .. –

+0

Dovrebbe funzionare su IE. Il 'display: none' dovrebbe essere applicato a'

'. Non il contenitore del menu di sinistra. – Adnan

Problemi correlati