JS, DOM e CSS: mostra "questo", nascondi "gli altri"...

**ALFABreezE** · 11-06-2007, 22:45

Uela'!
Apparte che non capisco perché se esiste un "this" non esiste qualcosa tipo "others" o almeno "!this"...
Non capisco granché di giavascritt (= "non ne so proprio una mazza"); conosco un pochino-ino-ino-ino[...]ino di PHP e lì mi fermo.
Per il resto disegno pupazzi e *faccio il grafico*.

Arriviamo al punto.
Dopo interminabili ricerche sul forum, letture dai contenuti incomprensibili, studî ripetuti delle guide sul sito, ho deciso di farmi da solo uno script che non riuscivo a trovare altrove.
Eccoloqquà:

Codice PHP:


var titoli = new array ('titolo_01', 'titolo_02', 'titolo_03');

var subMenu = new array('subCont_01', 'subCont_02', 'subCont_03');



function shideSet(obj, class1, class2) {

var obj = document.getElementById(obj);

for (a=1; a<=3; a++) {

    if (obj==titoli[a]) {

        obj.className='class2';

        document.getElementById(subMenu[a]).style.display = (document.getElementById(subMenu[a]).style.display=='block') ? 'none' : 'block';

        }

    else {

    obj.className='class1';

    subMenu[a].style.display = 'none';

        }

    }

}

Che è una cosa che secondo me dovrebbe funzionare e invece non funzia (mavà?).
Vi spiego cosa vorrei che succedesse, anche se mi sa che l'avete già capito;
in pratica è una variante dei soliti "menu", con qualche complicazione in più.
(O in meno; a seconda di qual è la soluzione, suppongo)..

:::mmm:::
Mi sa che se posto un HTML semplificato facciamo tutti prima, va'....

codice:

<html>
<head><title>PROVE JAVASCRIPT</title>
<script language="javascript" type="text/javascript">

/*== [Qua ci va lo script dicuisopra] ==*/

</script>
<style type="text/css">
a {text-decoration:none; font:bold 16px "Trebuchet MS", Verdana, sans-serif; color:white;}
a:focus {outline:0}

#titolo_01, #titolo_02, #titolo_03, #titolo_01 a,  #titolo_02 a,  #titolo_03 a {
float:left;
height:auto;
width:100px;
display:block;
background-color:blue;}

#titolo_01 a:hover, #titolo_02 a:hover, #titolo_03 a:hover {
background-color:yellow;
display:block;
color:black;}

#titolo_01 a:focus, #titolo_02 a:focus, #titolo_03 a:focus {
background-color:black;
display:block;
color:white;}

.act1, .act2, .act3, .act1 a, .act2 a, .act3 a{
float:left;
height:auto;
width:100px;
display:block;
background-color:green;
}

#subCont_01, #subCont_02, #subCont_03 {
float:left;
height:30px;
width:100px;
overflow:hidden;
display:none;
background-color:red;}

</style>
</head>
<body>

<div id="titolo_01" class="titolo1">CONT_01
    <div id="subCont_01">Prova 1</div>
</div>
<div id="titolo_02" class="titolo2">CONT_02
    <div id="subCont_02">Prova 2</div>
</div>
<div id="titolo_03" class="titolo3"> CONT_03
    <div id="subCont_03">Prova 3</div>
</div>
</body>
</html>

Nel caso non si fosse ancora capito, ci sono tre DIV "titolo" - visibili - i quali ne contengono a loro volta un altro - invisibile - che dovrebbe "saltare fuori" quando "onclicco" sul titolo.
E naturalmente quando clicco su un altro titolo dovrebbe scomparire il contenuto degli altri, nonché ripristinarsi lo stato inziale delle rispettive classi, in modo che l'unico titolo evidenziato sia sempre e solo quello con il contenuto visibile.

Nonsossemmisonocapìto....
(Io, micatanto... spero che voi ve la caviate meglio ;-)p

'Nzomma... A 'sto punto io sono completamente lesso e non so se ho toppato più sul JS o sui CSS o su entrambi.
La domanda sarebbe "Com'è che il mio script non funzia?", ma se avete altre soluzioni (comprensibili)(da ME!) va bene lostess...

TIA ;-)

cià
ale

**fcaldera** · 11-06-2007, 22:56

ci credi se ti dico che si potrebbe farlo persino in puro CSS?
Non per convincerti a tutti i costi ma gli elementi fondamentali di usabilità di un sito (come la navigazione appunto) dovrebbero funzionare anche se javascript è disattivato.

ma ciò implicherebbe l'uso delle pseudoclassi :hover e :focus e i workaround per Explorer... magari potresti guardare sui menu di cssplay.co.uk per farti un idea...

**ALFABreezE** · 11-06-2007, 23:49

Originariamente inviato da fcaldera
ci credi se ti dico che si potrebbe farlo persino in puro CSS?
Non per convincerti a tutti i costi ma gli elementi fondamentali di usabilità di un sito (come la navigazione appunto) dovrebbero funzionare anche se javascript è disattivato.

ma ciò implicherebbe l'uso delle pseudoclassi :hover e :focus e i workaround per Explorer... magari potresti guardare sui menu di cssplay.co.uk per farti un idea...

Cerrrrrrrto che ti credo.
E non hai bisogno di convincermi di niente; sono perfettamente d'accordo con te.
Credo di aver preso in considerazione un po' tutte le soluzioni possibili e penso che tu abbia in mente qualcosa come il buon "suckerfish" qua: http://www.htmldog.com/articles/suck...downs/example/ ;-)

Il problema è che adesso mi sono fissato che devo risolvere 'sta cosa con javascript e quando mi prende così è un casino... :/
(Anche perché non ne so veramente niente e mi farebbe comodo capirci qualcosina in più, sai com'è... 'nsisammai).

E poi mi serve proprio l' "onClick", nella fattispecie, che non so quanto sia replicabile con i CSS.
Almeno, tutto quello che ho visto io ruotava intorno all':hover e anche riuscendo a trasporre il tutto su :focus e :active non credo che riuscirei ad ottenere l'effetto che mi serve, visto che vorrei mantenere il titolo evidenziato anche cliccando altrove nella pagina.
(Senza contare il fatto che Safari l' :active non lo 'tiene' proprio; infatti questa sul browser di mamma Apple non va affatto bene).

GIURO che appena ho finito 'sto sito lo rifaccio da capo coi CSS e tutti gli "ul li ul li li li" del caso ;-)
(No, sul serio, dico; me lo ero già ripromesso).

Nel frattempo non è che mi daresti una dritta sullo script dicuisopra?

TNX ;-)

cià
ale

**Shagrat** · 12-06-2007, 10:02

Codice PHP:


<html>

<head><title>PROVE JAVASCRIPT</title>

<script language="javascript" type="text/javascript">



var titoli = new Array ('titolo_01', 'titolo_02', 'titolo_03');    //javascript è case sensitive, la dichiarazione di un nuovo array è con la "A" maiuscola

var subMenu = new Array('subCont_01', 'subCont_02', 'subCont_03');



function shideSet(obj) {

  //var obj = document.getElementById(obj);  //obj è già l'id del div contenitore se dichiari una variabile con lo stesso nome si incasina tutto

  

  for (a=0; a<3; a++) { //gli indici degli array partono da 0 e finiscono alla dimensione -1 (nel tuo esempio 0,1,2)

    if (obj==titoli[a]) {

      document.getElementById(obj).className='class2';

      document.getElementById(subMenu[a]).style.display = (document.getElementById(subMenu[a]).style.display=='block') ? 'none' : 'block';

    }

    else {

      document.getElementById(obj).className='class1';

      document.getElementById(subMenu[a]).style.display = 'none'; //qui dovevi recuperare l'oggetto come avevi fatto correttamente nell' "if"

    }

  }

}



</script>

<style type="text/css">

a {text-decoration:none; font:bold 16px "Trebuchet MS", Verdana, sans-serif; color:white;}

a:focus {outline:0}



#titolo_01, #titolo_02, #titolo_03, #titolo_01 a,  #titolo_02 a,  #titolo_03 a {

float:left;

height:auto;

width:100px;

display:block;

background-color:blue;}



#titolo_01 a:hover, #titolo_02 a:hover, #titolo_03 a:hover {

background-color:yellow;

display:block;

color:black;}



#titolo_01 a:focus, #titolo_02 a:focus, #titolo_03 a:focus {

background-color:black;

display:block;

color:white;}



.act1, .act2, .act3, .act1 a, .act2 a, .act3 a{

float:left;

height:auto;

width:100px;

display:block;

background-color:green;

}



#subCont_01, #subCont_02, #subCont_03, #subCont_04 {

float:left;

height:30px;

width:100px;

overflow:hidden;

display:none;

background-color:red;}



</style>

</head>

<body>



<div id="titolo_01" class="titolo1">[url="javascript:void(0);"]CONT_01[/url]

  <div id="subCont_01">Prova 1</div>

</div>

<div id="titolo_02" class="titolo2">[url="javascript:void(0);"]CONT_02[/url]

    <div id="subCont_02">Prova 2</div>

</div>

<div id="titolo_03" class="titolo3">[url="javascript:void(0);"] CONT_03[/url]

    <div id="subCont_03">Prova 3</div>

</div>

</body>

</html>

Questo esempio semicommentato funziona, ti avviso però che è "scorretto" in un punto...quello in cui usi lo stesso indice sia per far apparire e scomparire il sottomenu che per girare l'array dei menu in cima. lì dovresti fare un ciclo che trova tutti i sottomenu e man mano li nasconde e li fa riapparire. infatti questo esempio funziona solo con un sottomenu... se hai bisogno di qualche altra dritta siam sempre qui

**ALFABreezE** · 12-06-2007, 13:44

Originariamente inviato da Shagrat
Questo esempio semicommentato funziona, ti avviso però che è "scorretto" in un punto...quello in cui usi lo stesso indice sia per far apparire e scomparire il sottomenu che per girare l'array dei menu in cima. lì dovresti fare un ciclo che trova tutti i sottomenu e man mano li nasconde e li fa riapparire. infatti questo esempio funziona solo con un sottomenu... se hai bisogno di qualche altra dritta siam sempre qui

Mi sa che avrò bisogno di MOLTE altre dritte ;-)
TNX!

Sì... per il ciclo credo di aver capito; è solo un caso che in questa fattispecie particolare ci siano solo tre titoli con soli tre sottomenu. Quindi mi basta un contatore capace di contare fino a tre per entrambi.

Resta però un problem...
Come faccio a fargli cambiare le classi, se non le inserisco come proprietà della funzione e nemmeno le dichiaro quando richiamo la funzione?
Ho provato a (ri)scrivere l'intestazione della funzione così:

Codice PHP:


function shideSet(obj, classe1, classe2) {...

(dove 'classe1' e 'classe2' - come 'obj' - sono variabili generiche, come avrei fatto per una funzione in PHP; - ma non so se in Javascript funzia allo stesso modo)
e poi a richiamarla nell'HTML così:

Codice PHP:


[...]

<div id="titolo_01" class="titolo1">[url="javascript:void(0);"]CONT_01[/url]

[...]

ma il risultato non è quello sperato;
quando clicco su "titolo_01" e "titolo_02" la classe non cambia affatto;
se clicco su "titolo_03" la classe cambia in modo corretto, ma poi non torna al valore di partenza quando ri-clicco sugli altri titoli.

E... visto che intanto che scrivevo 'sto post verificavo tutte le varianti che mi venivano in mente e i risultati sono stati i più disparati tranne quello che volevo io, mi sa che è meglio se posto di nuovo tutto il pippone (D)HTML e tengo le mani apposto finché qualcuno non mi dice che devo fare per attribuire la "classe2" al click su un titolo e allo stesso tempo reimpostare gli altri su "classe 1".
(E, magari, mi spiega anche perché succede quello che succede)

Codice PHP:


<html>

<head><title>PROVE JAVASCRIPT</title>

<script language="javascript" type="text/javascript">



var titoli = new Array ('titolo_01', 'titolo_02', 'titolo_03');

var subMenu = new Array('subCont_01', 'subCont_02', 'subCont_03');

function shideSet(obj, classe1, classe2) {

for (a=0; a<3; a++) {

    if (obj==titoli[a]) {

        document.getElementById(obj).className=classe2;

        document.getElementById(subMenu[a]).style.display = (document.getElementById(subMenu[a]).style.display=='block') ? 'none' : 'block';

        }

    else {

    document.getElementById(obj).className=classe1;

    document.getElementById(subMenu[a]).style.display = 'none';

        }

    }

}



</script>

<style type="text/css">

a {text-decoration:none; font:bold 16px "Trebuchet MS", Verdana, sans-serif; color:white;}

a:focus {outline:0}



#titolo_01, #titolo_02, #titolo_03 {

float:left;

height:auto;

width:100px;

display:block;}



.titolo1, .titolo2, .titolo3 {

float:left;

height:auto;

width:100px;

display:block;

background-color:blue;}



.act1, .act2, .act3 {

float:left;

height:auto;

width:100px;

display:block;

background-color:green;}



#subCont_01, #subCont_02, #subCont_03 {

float:left;

height:30px;

width:100px;

overflow:hidden;

display:none;

background-color:red;}



</style>

</head>

<body>



<div id="titolo_01" class="titolo1">[url="javascript:void(0);"]CONT_01[/url]

    <div id="subCont_01">Prova 1</div>

</div>

<div id="titolo_02" class="titolo2">[url="javascript:void(0);"]CONT_02[/url]

    <div id="subCont_02">Prova 2</div>

</div>

<div id="titolo_03" class="titolo3">[url="javascript:void(0);"] CONT_03[/url]

    <div id="subCont_03">Prova 3</div>

</div>

</body>

</html>

Ari-GRAZZ!! ;-)

cià
ale

**olivs** · 25-06-2007, 23:11

Uppo la discussione che sto cercando una funzione js da applicare su un menu CSS orizzontale con tanto di submenu orizzontale inline.
Insomma una cosa come quello qui sopra quello (html.it - siti - servizi...) ma non così allucinante.

**ALFABreezE** · 26-06-2007, 00:43

Aggià...
M'ero scordato di dire che avevo scovato l'errore.

Qua:

codice:

var titoli = new Array ('titolo_01', 'titolo_02', 'titolo_03');
var subMenu = new Array('subCont_01', 'subCont_02', 'subCont_03');
function shideSet(obj, classe1, classe2) {
for (a=0; a<3; a++) {
    if (obj==titoli[a]) {
        document.getElementById(obj).className=classe2;
        document.getElementById(subMenu[a]).style.display = (document.getElementById(subMenu[a]).style.display=='block') ? 'none' : 'block';
        }
    else {
    document.getElementById(obj).className=classe1;
    document.getElementById(subMenu[a]).style.display = 'none';
        }
    }
}

andava così:

codice:

[...]
    else {
    document.getElementById(titoli[a]).className=classe1;
    document.getElementById(subMenu[a]).style.display = 'none';
        }
    }
}

Mo'... se è giusto o no e per quale motivo nollosò.
Però così funzia ;-)

cià
ale

**olivs** · 27-06-2007, 10:56

Ho preso il tuo codice tale quale e riportato su un filettino html, a me non va

Codice PHP:


<html>

<head><title>PROVE JAVASCRIPT</title>

<script language="javascript" type="text/javascript">



var titoli = new Array ('titolo_01', 'titolo_02', 'titolo_03');

var subMenu = new Array('subCont_01', 'subCont_02', 'subCont_03');

function shideSet(obj, classe1, classe2) {

for (a=0; a<3; a++) {

    if (obj==titoli[a]) {

        document.getElementById(obj).className=classe2;

        document.getElementById(subMenu[a]).style.display = (document.getElementById(subMenu[a]).style.display=='block') ? 'none' : 'block';

        }

    else {

    document.getElementById(titoli[a]).className=classe1;

    document.getElementById(subMenu[a]).style.display = 'none';

        }

    }

} 



</script>

<style type="text/css">

a {text-decoration:none; font:bold 16px "Trebuchet MS", Verdana, sans-serif; color:white;}

a:focus {outline:0}



#titolo_01, #titolo_02, #titolo_03 {

float:left;

height:auto;

width:100px;

display:block;}



.titolo1, .titolo2, .titolo3 {

float:left;

height:auto;

width:100px;

display:block;

background-color:blue;}



.act1, .act2, .act3 {

float:left;

height:auto;

width:100px;

display:block;

background-color:green;}



#subCont_01, #subCont_02, #subCont_03 {

float:left;

height:30px;

width:100px;

overflow:hidden;

display:none;

background-color:red;}



</style>

</head>

<body>



<div id="titolo_01" class="titolo1">[url="java-script:void(0);"]CONT_01[/url]

    <div id="subCont_01">Prova 1</div>

</div>

<div id="titolo_02" class="titolo2">[url="java-script:void(0);"]CONT_02[/url]

    <div id="subCont_02">Prova 2</div>

</div>

<div id="titolo_03" class="titolo3">[url="java-script:void(0);"] CONT_03[/url]

    <div id="subCont_03">Prova 3</div>

</div>

</body>

</html>

ho messo quello che dici di cambiare bo magari sono troppo arruginito.

**olivs** · 27-06-2007, 11:02

Scusa con FF va un pochino con IE XP nisba

**ALFABreezE** · 27-06-2007, 12:17

Originariamente inviato da olivs
Scusa con FF va un pochino con IE XP nisba

Chevvordi' "va un pochino"? Che è che non fà?
La console degli errori di FF (mela-shift-J) cheddice ?
Btw... io l'ho riprovato e da me va (FF su Tiger e IE6 su VPC_nonciòisoldiperunMacPro). L'unica cosa è che va dichiarata la variabile "a" che sta nel ciclo.
Quindi:

codice:

function shideSet(obj, classe1, classe2) {
var a = 0;
for (a=0; a<3; a++) {
    if (obj==titoli[a]) {....

eccetera...

Poi... (scusami se mi permetto, ma 'nsisammai) ... ;-)
Quando hai "preso" il codice l'hai copincollato dal forum al file ebbasta?
Se sì, hai corretto i varii "java-script" in "javascript"?
(Anche se in genere Firefox ti avvisa del problema quando 'onclicchi').

Boh.

Magari funzia, ma non è quello che serviva a te.
Per quello che serviva a me funzia.

cià
ale

Discussione: JS, DOM e CSS: mostra "questo", nascondi "gli altri"...

Strumenti discussione

Ricerca discussione

Visualizza

JS, DOM e CSS: mostra "questo", nascondi "gli altri"...

Permessi di invio