problema di visibilità con 2 o piu layer

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Salve a tutti.
Ho un problema banale da risolvere, ma che al momento da solo non trovo soluzioni.
Ho 2 tabelle che vorrei aprire (cliccando su un'immagine) e chiudere in maniera indipendente l'una dall'altra.
Così cme ho scritto il codice (sicuramente errato) in realtà gli eventi sono legati e le operazioni risultanti pure.
Vorrei sapere avendo due layer distinti (search,searchd) come renderli indipendenti nelle operazioni di visibilità.

Grazie

Codice:
#search
{
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}

Codice:
<script language="javascript">
function showlayer(search,searchd)
{
document.getElementById("search").style.visibility="visible"; 
document.getElementById("searchd").style.visibility="visible"; 
}
function hidelayer(search,searchd)
{
document.getElementById("search").style.visibility="hidden"; 
document.getElementById("searchd").style.visibility="hidden"; 
}
</script>

Codice:
<a href= "javascript:hidelayer()">Close this windows</a>
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Codice:
function showlayers()
{
document.getElementById("search").style.display="block"; 
document.getElementById("searchd").style.display="block"; 
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}
Non ho capito bene che intendevi per non legati tra loro, forse cosi? Ho un po corretto il codice
 

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Grazie!
Ricapitolando:Ho due layer su entrambi c'è un'immagine,se ci clicco mi apre una tabella che posso successivamente chiudere;
il problema è che se provo a chiudere la tabella del layer "search" mi chiude anche la tabella del layer "searchd" e stessa cosa all'inverso(si aprono entrambi).
Con il codice che mi hai postato adesso non mi apre ne chiude niente ma sicuramente pr errore mio:
all'interno del div devo specificare qualcosa oppure va bene così scritto:

Codice:
<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2" alt="provaaaaaa">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>

Vi posto comunque tutte le parti del codice che interessano:

Codice:
<html>
<head>
</head>
<style type="text/css">

#i4
{
position: absolute;
top: 30px;
left: 770px;
}

#i5
{
position: absolute;
top: 550px;
left: 180px;
}


#search
{
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayers()
{
document.getElementById("search").style.display="block"; 
document.getElementById("searchd").style.display="block"; 
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}
</script>

<body bgcolor="C0C0C0">
<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer()">Close windows</a>
</td></tr></table>
</div>

<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Cosi funziona, ti posto tutta la pagina per evitare incomprensioni
Codice:
<html>
<head>
</head>
<style type="text/css">

#i4
{
position: absolute;
top: 30px;
left: 770px;
}

#i5
{
position: absolute;
top: 550px;
left: 180px;
}


#search
{
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1()
{
document.getElementById("search").style.display="block";  
}
function showlayer2(){
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}
</script>

<body bgcolor="C0C0C0">
<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>
 

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Grazie tante, perfetto!!
se è possibile volevo chiederti un'ulteriore spiegazione:
Se volessi nascondere automaticamente un livello quando ne seleziono un'altro?
Cliccando l'immagine mi appare la tabella, se clicco sull'altra immagine mi si apre l'altra tabella e vorrei che la prima che si chiudesse automaticamente(una volta selezionato il nuvo livello quello vecchio si nasconde).
Ho trovato questo codice (da controllare se ho messo i giusti parametri) ma se provo ad utilizzarlo non funziona, inoltre non so cosa aggiungere nei div:

Codice:
<script language="javascript">

oldlayer = ""

function showlevel(search)
if(search)
{
document.layers[search].visibility = "hidden"
}
document.layers[searchd].visibility = "visible"
search = searchd
</script>
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Non ho capito molto bene, intendi forse di volerne tenere solo uno aperto?
Codice:
function showlayer1(){
  hidelayer2();
  document.getElementById("search").style.display="block";  
}
function showlayer2(){
    hidelayer1();
    document.getElementById("searchd").style.display="block";
}
 

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Provo a spiegarmi:in pratica se apro tabella1 e dopo apro tabella2, tabella1 si chiuderà automaticamente (stessa cosa se faccio l'inverso); in pratica non avrò mai nello stesso momento i due livelli (o tabelle) visibili.
Con l'ultimo codice ho sempre le tabelle visibili

grazie
 

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Non riesco a farlo funzionare..Potresti postarmi anche il codice da metter dentro il div o è uguale a quello precedente:
Grazie

Codice:
<div id="search">
<a href= "javascript:hidelayer()">Close this windows</a>
</div>

<div id="searchd">
<a href= "javascript:hidelayer()">Close windows</a>
</div>

<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Non riesco a farlo funzionare..Potresti postarmi anche il codice da metter dentro il div o è uguale a quello precedente:
Grazie

Codice:
<div id="search">
<a href= "javascript:hidelayer()">Close this windows</a>
</div>

<div id="searchd">
<a href= "javascript:hidelayer()">Close windows</a>
</div>

<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>
Setta una delle tabelle non visibile da css e prova modificando i nomi delle funzioni
Codice:
<div id="search">
<a href= "javascript:hidelayer1()">Close this windows</a>
</div>

<div id="searchd">
<a href= "javascript:hidelayer2()">Close windows</a>
</div>

<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>
 

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Scusa,Non so se ho capito....
Settando una tabella non visibile non riesco piu a visualizzarla se provo a cliccare sull'immagine

Grazie

Codice:
<style type="text/css">

#search
{
visibility:hidden;
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1()
{
document.getElementById("search").style.display="block";  
}
function showlayer2(){
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}

</script>

<body bgcolor="C0C0C0">

<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<body bgcolor="C0C0C0">
<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2" alt="prova">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Scusa,Non so se ho capito....
Settando una tabella non visibile non riesco piu a visualizzarla se provo a cliccare sull'immagine

Grazie

Codice:
<style type="text/css">

#search
{
visibility:hidden;
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1()
{
document.getElementById("search").style.display="block";  
}
function showlayer2(){
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}

</script>

<body bgcolor="C0C0C0">

<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<body bgcolor="C0C0C0">
<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2" alt="prova">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>

Ma tu intendevi una cosa simile?
Codice:
<style type="text/css">

#search
{
z-index:5;
display:none;
position:absolute;
top:130px;
left:120px;
}

#searchd
{
z-index:6;
display:none;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1(){
  hidelayer2();
  document.getElementById("search").style.display="block";  
}
function showlayer2(){
    hidelayer1();
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}

</script>

<body bgcolor="C0C0C0">

<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2" alt="prova"></a>
</div>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2"></a>
</div>
 

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Si intendevo così! Grazie!
L'ultimissima cosa..all'apertura della pagina vorrei che le tabelle in questione non fossero visualizzate ma che apparissero solo quando vado a cliccare sull'immagine.Ho provato con "visibility:hidden;" nel css ma così la tabella non viene piu visualizzata.
Devo implementare la funzione?

grazie ancora
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Si intendevo così! Grazie!
L'ultimissima cosa..all'apertura della pagina vorrei che le tabelle in questione non fossero visualizzate ma che apparissero solo quando vado a cliccare sull'immagine.Ho provato con "visibility:hidden;" nel css ma così la tabella non viene piu visualizzata.
Devo implementare la funzione?

grazie ancora

Ciao,

sicuro che all'apertura della pagina visualizzi i div search e searchd?

hanno la proprietà display impostata a none nel css

display:none;

cambi la proprietà a block quando clicchi sull'immagine.

Valeria.
 

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Grazie vale, erano impostati su block,cambiando su none ora funziona tutto.

Grazie ancora!
 
Discussioni simili
Autore Titolo Forum Risposte Data
S [HTML] Problema non visibilità del sito HTML e CSS 1
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1

Discussioni simili