Show/Hide Layer

**Jigen** · 10-05-2008, 12:06

Buongiorno,

sto utilizzando uno script "show/hide layer" per visualizzare al'interno di una stessa pagina un certo numero di div.

Ho configurato lo script in modo tale che al click dei link si apre il relativo div.

Nell'aprire i layer in successione (Primo, Secondo, Terzo) non ho riscontrato problemi ma nell'effettuare il procedimento al contrario (Terzo, Secondo, Primo) ho rilevato che i div non posso essere sovrapposti.

QUI ho pubblicato un piccolo esempio.

Chi di voi sa aiutarmi con questo problema?

Grazie!

codice:

<script language="JavaScript" type="text/JavaScript"> 
<!-- 
function MM_reloadPage(init) { //reloads the window if Nav4 resized 
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { 
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} 
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); 
} 
MM_reloadPage(true); 
//--> 
</script> 
<script language="JavaScript">
<!--
function showHideLayers() 
{ 
var i, visStr, obj, args = showHideLayers.arguments; 
for (i=0; i<(args.length-2); i+=3) 
{ 
if ((obj = findObj(args[i])) != null) 
{ 
visStr = args[i+2]; 
if (obj.style) 
{ 
obj = obj.style; 
if(visStr == 'show') visStr = 'visible'; 
else if(visStr == 'hide') visStr = 'hidden'; 
} 
obj.visibility = visStr; 
} 
} 
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>


Primo Link

<div id="Layer1" style="position:absolute; width:400px; height:300px; z-index:1; background-color: #CCCC99; border: 1px darkred; left: 300px; top: 200px; visibility: hidden;"> <p align="justify"> Primo DIV</p>
</div>

**Jigen** · 10-05-2008, 12:48

Agendo sul comando "z-index" determinato l'ordine dei layer ma non risolvo il problema segnalato.

Attendo con impazienza suggerimenti.

Grazie.

**Jigen** · 11-05-2008, 10:18

Buongiorno,

chi di voi sa aiutarmi?

Grazie.

**cavicchiandrea** · 11-05-2008, 10:38

Ma vuoi mostrare/nascondere i layer o spostare la cronologia (zIndex) degli stessi?

P.S. Consiglio quando non si risponde spesso è perché non se capita la domanda/problema , aiuterebbe di molto integrare la richiesta con maggiori informazioni dettagli di ciò che si vuole fare.

**Jigen** · 11-05-2008, 10:48

Riproverò a riformulare la mia richiesta:

ho un menù di "n" voci, vorrei che al click di una voce si aprisse un div che fino a quel momento è rimasto nascosto.
Cliccando su un'altra voce del medesimo menù, vorrei inoltre che al posto del div precedentemente aperto si sovrapponesse un'altro div.

Con lo script che ho postato riesco ad aprire un layer ma se clicco prima sulla "terza voce del menù, poi sulla seconda ed infine sulla prima" (come da link segnalato) i div non si visualizzano.

Allego un'anteprima del risultato finale.

Spero di essere stato questa volta più chiaro nella mia spiegazione (anche se credo di essermi solo ripetuto).

Grazie.

**cavicchiandrea** · 11-05-2008, 11:48

Originariamente inviato da Jigen
Spero di essere stato questa volta più chiaro nella mia spiegazione (anche se credo di essermi solo ripetuto).

Può darsi, comunque io ti posto l'ipotesi "mostra/nascondi"

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nuova pagina 1</title>
</head>


<script language="JavaScript" type="text/JavaScript"> 
<!-- 
function ShowLayers(Layer,Stato){
var elemento = document.getElementsByTagName("div")
for(var i=0; i<elemento.length; i++){
var display = (document.getElementById(Layer).style.visibility == Stato) ? "hidden" : "visible";
if(elemento[i].style.position == "absolute" && elemento[i].id  == Layer && elemento[i].style.visibility == "hidden")
elemento[i].style.visibility = "visible";
else if(elemento[i].style.position == "absolute")
elemento[i].style.visibility = "hidden";
}}
//-->
</script>



<body>


Primo Link 


Secondo Link 


Terzo Link


<div id="Layer1" style="position:absolute; width:400px; height:300px; z-index:1; background-color: #CCCC99; border: 1px darkred; left: 300px; top: 200px; visibility: hidden;"> 
<p align="justify"> Primo DIV</p>

</div>


<div id="Layer2" style="position:absolute; width:400px; height:300px; z-index:1; background-color: #CCCC99; border: 1px darkred; left: 300px; top: 200px; visibility: hidden;"> 
<p align="justify"> Secondo DIV</p>
</div>


<div id="Layer3" style="position:absolute; width:400px; height:300px; z-index:1; background-color: #CCCC99; border: 1px darkred; left: 300px; top: 200px; visibility: hidden;"> 
<p align="justify"> Terzo DIV</p>
</div>


<div id="testo">
Provate a cliccare in successione "Primo Link, Secondo, Terzo" 

e successivamente provate a cliccare "Terzo Link, Secondo, Primo".
</div>

</body>

</html>

**Jigen** · 11-05-2008, 16:13

Grazie "cavicchiandrea", era proprio quello che stavo cercando e tentando di ottenere tramite la configurazione del codice.

Grazie per la tua disponibilità.

Buon Domenica.

**Jigen** · 12-05-2008, 12:36

Per far comparire i div in una determinata porzione del sito ho impostato "margin-left" e "top", al cambio della risoluzione video però il div non viene più visualizzato nella porzione di pagina desiderata.

Come posso far comparire il div sempre nella stessa posizione anche al cambio della risoluzione?

Grazie.

**cavicchiandrea** · 12-05-2008, 15:16

Perché i div sono su posizione assoluta, puoi tramite il javascript rilevare la risoluzione e imposti lo stile adeguato, vedi nella sezione javascript area script.

**Jigen** · 12-05-2008, 16:04

Ok, grazie.

Spero di risolvere.

Discussione: Show/Hide Layer

Strumenti discussione

Ricerca discussione

Visualizza

Show/Hide Layer [problema]

Permessi di invio