problema con .innerHTML la pagina non carica correttamente...

[mocassino]

ciao a tutti,
sto ri-facendo personalmente il mio sito ed ho incontrato alcuni problemi utilizzando .innerHTML

per rendere più facile la mia spiegazione ho già messo online il mio sito così potrete vedere esattamente qual'è il mio problema, l'indirizzo del mio sito è il seguente: www.matteobollati.com

ora se siete andati sul mio sito avrete notato che tutti i link alle thumbnails delle immagini si aprono perfettamente (utilizzando lightwindow) ma se cliccate per cambiare thumbnails (i due cerchietti a destra nella categoria "portfolio") queste cambiano mostrando una seconda serie di thumbnails ma i link non vengono più aperti utilizzando lightwindow ma vengono aperti come nuova pagina ... se si torna alla prima serie di thumbnails questi (che all'inizio si aprivano utilizzando lightwindow) anche loro si aprono come nuove pagine ...

purtroppo non riesco a venire a capo del problema...ed essendo nuovo di javascript la cosa è ancora più complicata ...

per rendervi conto di come ho fatto le varie function vi copio qui il file .js che ho creato (sicuramente sarà "grezzo" vista la mia inesperienza)

nome file: clickcng.js

inizio codice

window.onload=inizio;

function inizio() {
document.getElementById("progetto01").innerHTML='[img]img/prog_01_mini.png[/img]';
document.getElementById("progetto02").innerHTML='[img]img/prog_02_mini.png[/img]';
document.getElementById("progetto03").innerHTML='[img]img/prog_04_mini.png[/img]';
document.getElementById("progetto04").innerHTML='[img]img/prog_03_mini.png[/img]';
document.getElementById("b_por_01").innerHTML='[img]img/page_select.png[/img]';
document.getElementById("b_por_02").innerHTML='[img]img/page_no_select.png[/img]';
document.getElementById("portfolio01").innerHTML='[img]img/port_01_mini.png[/img]';
document.getElementById("portfolio02").innerHTML='[img]img/port_02_mini.png[/img]';
document.getElementById("portfolio03").innerHTML='[img]img/port_03_mini.png[/img]';
document.getElementById("portfolio04").innerHTML='[img]img/port_04_mini.png[/img]';
document.getElementById("vario01").innerHTML='[img]img/varie_01_mini.png[/img]';
document.getElementById("vario02").innerHTML='[img]img/varie_02_mini.png[/img]';
document.getElementById("vario03").innerHTML='';
document.getElementById("vario04").innerHTML='';
}

function changeimgpr(i) {
if (i == 1) {
document.getElementById("progetto01").innerHTML='' ;
document.getElementById("progetto02").innerHTML='' ;
document.getElementById("progetto03").innerHTML='' ;
document.getElementById("progetto04").innerHTML='' ;
} else if (i == 2) {
document.getElementById("progetto01").innerHTML='' ;
document.getElementById("progetto02").innerHTML='' ;
document.getElementById("progetto03").innerHTML='' ;
document.getElementById("progetto04").innerHTML='' ;
}
}

function changeimgpo(i) {
if (i == 1) {
document.getElementById("b_por_01").innerHTML='[img]img/page_select.png[/img]';
document.getElementById("b_por_02").innerHTML='[img]img/page_no_select.png[/img]';
document.getElementById("portfolio01").innerHTML='[img]img/port_01_mini.png[/img]';
document.getElementById("portfolio02").innerHTML='[img]img/port_02_mini.png[/img]';
document.getElementById("portfolio03").innerHTML='[img]img/port_03_mini.png[/img]';
document.getElementById("portfolio04").innerHTML='[img]img/port_04_mini.png[/img]';
} else if (i == 2) {
document.getElementById("b_por_01").innerHTML='[img]img/page_no_select.png[/img]';
document.getElementById("b_por_02").innerHTML='[img]img/page_select.png[/img]';
document.getElementById("portfolio01").innerHTML='[img]img/port_05_mini.png[/img]';
document.getElementById("portfolio02").innerHTML='[img]img/port_06_mini.png[/img]';
document.getElementById("portfolio03").innerHTML='[img]img/port_07_mini.png[/img]';
document.getElementById("portfolio04").innerHTML=' ';
}
}

function changeimgva(i) {
if (i == 1) {
document.getElementById("vario01").innerHTML='';
document.getElementById("vario02").innerHTML='';
document.getElementById("vario03").innerHTML='';
document.getElementById("vario04").innerHTML='';
} else if (i == 2) {
document.getElementById("vario01").innerHTML='';
document.getElementById("vario02").innerHTML='';
document.getElementById("vario03").innerHTML='';
document.getElementById("vario04").innerHTML='';
}
}

fine codice


Grazie fin da subito per l'aiuto!!!
Teo.

[lucavizzi]

Complimenti per il sito, è molto bello...
Volevo avvisarti che su internet explorer 8 le immagini si sovrappongono al testo.

[mocassino]

grazie per i complimenti e per la notifica del problema con IE8 ... un'altra cosa da sistemare dopo aver risolto il problema dei link ... aiuto! hehehe

[lucavizzi]

<meta http-equiv="X-UA-Compatible" content="IE=7" />

questo metatag indica ad ie8 di "comportarsi" come ie7, così prendi due piccioni con una fava, forse è già sufficiente...

Buon Lavoro

[mocassino]

aggiunta la metatag! e se funziona è già un problema in meno!!

Grazie mille dell'aiuto che mi stai dando!!

[lucavizzi]

Figurati, è un piacere...

comunque ho controllato, non basta.
Devi rivedere il foglio di stile.

[mocassino]

ok! grazie mille, adesso darò un'occhiata anche a quello per vedere di far funzionare tutto correttamente anche su IE8!

E per quanto riguarda il problema dei link hai qualche soluzione? oppure qualche consiglio?

[lucavizzi]

io consiglierei di inserire tutti i link nella pagina (eliminerei anche la funzione inizio)

e poi userei lo stile display (block/none) per visualizzare i link desiderati alla pressione del cerchietto.

<div id="div1">

link 1

link 2

</div>

<div id="div2" style="display:none;">

link 3
link 4

</div>

function cerchietto(){
document.getElementById(div1).style.display="none"//nascondo div1
document.getElementById(div2).style.display="block "//mostro div2

}

[mocassino]

perfetto!! il sito ora funziona!!

ho riscritto tutto il codice come da te indicato e un altro paio di modifichine ora i link si aprono perfettamente in lightwindow!!

grazie veramente molto, il tuo aiuto è stato molto prezioso!

(avendo riscritto anche parte del css forse ho risolto anche il problema con IE8)

[lucavizzi]

Figurati, quando vuoi...

IE8 ora mostra le immagini dietro al testo, ti allego uno screenshot