Devo effettuare due click per l'apertura del div :(

Salve, ho uno script che è composto da due div a scomparsa. Il problema è che quando carico la pagina (solo quando la carico) devo fare doppio click sul link per far aprire il div! Poi tutto il resto è ok...
Vi posto il codice!

Codice HTML:

<html> <head> <script type="text/javascript"> function message() { if (document.getElementById('messagebox-top').style.display == 'none') { if (document.getElementById('notifybox').style.display == 'block') { document.getElementById('notifybox').style.display = 'none'; document.getElementById('messagebox-top').style.display = 'block'; } else if (document.getElementById('notifybox').style.display == 'none') { document.getElementById('messagebox-top').style.display = 'block'; } } else { document.getElementById('messagebox-top').style.display = 'none'; document.getElementById('notifybox').style.display = 'none'; } } function notify() { if (document.getElementById('notifybox').style.display == 'none') { if (document.getElementById('messagebox-top').style.display == 'block') { document.getElementById('messagebox-top').style.display = 'none'; document.getElementById('notifybox').style.display = 'block'; } else if (document.getElementById('messagebox-top').style.display == 'none') { document.getElementById('notifybox').style.display = 'block'; } } else { document.getElementById('notifybox').style.display = 'none'; document.getElementById('messagebox-top').style.display = 'none'; } } </script> <style> .messagebox-top { display: none; } .notifybox { display: none; } </style> </head> <body> <table> <td onclick="message();">Apri DIV 1</td> <td onclick="notify();">Apri DIV 2</td> </table> <div id="messagebox-top"> Content </div> <div id="notifybox"> Content 2 </div>

Grazie in anticipo

Citazione:

Originalmente inviato da colore123

Salve, ho uno script che è composto da due div a scomparsa. Il problema è che quando carico la pagina (solo quando la carico) devo fare doppio click sul link per far aprire il div! Poi tutto il resto è ok...
Vi posto il codice!

Codice HTML:

<html> <head> <script type="text/javascript"> function message() { if (document.getElementById('messagebox-top').style.display == 'none') { if (document.getElementById('notifybox').style.display == 'block') { document.getElementById('notifybox').style.display = 'none'; document.getElementById('messagebox-top').style.display = 'block'; } else if (document.getElementById('notifybox').style.display == 'none') { document.getElementById('messagebox-top').style.display = 'block'; } } else { document.getElementById('messagebox-top').style.display = 'none'; document.getElementById('notifybox').style.display = 'none'; } } function notify() { if (document.getElementById('notifybox').style.display == 'none') { if (document.getElementById('messagebox-top').style.display == 'block') { document.getElementById('messagebox-top').style.display = 'none'; document.getElementById('notifybox').style.display = 'block'; } else if (document.getElementById('messagebox-top').style.display == 'none') { document.getElementById('notifybox').style.display = 'block'; } } else { document.getElementById('notifybox').style.display = 'none'; document.getElementById('messagebox-top').style.display = 'none'; } } </script> <style> .messagebox-top { display: none; } .notifybox { display: none; } </style> </head> <body> <table> <td onclick="message();">Apri DIV 1</td> <td onclick="notify();">Apri DIV 2</td> </table> <div id="messagebox-top"> Content </div> <div id="notifybox"> Content 2 </div>

Grazie in anticipo

A parte che hai usato una marea di codice, il comportamento è corretto, poiché all'apertura della pagina i due DIV sono visibili e quindi al primo click vengono nascosti ed al secondo inizia a funzionare il tuo script ...

Il problema è che nel definire gli stili hai definito lo stile per delle classi (.messagebox-top, .notifybox, mentre avresti dovuto usare gli identificato per gli ID #messagebox-top, #notifybox) e poi usato degli id.

No scusa ho sbagliato io! I div hanno una classe che setta il display su none e un id (notifybox e messagebox-top) ma al caricamento della pagina non sono visibili proprio perche hanno il display su none
Come posso fare?

Nessuno ?!?!??

Prova così

Codice PHP:

<html> <head> <script type="text/javascript"> function message() { if (document.getElementById('messagebox-top').style.display == 'none') { if (document.getElementById('notifybox').style.display == 'block') { document.getElementById('notifybox').style.display = 'none'; document.getElementById('messagebox-top').style.display = 'block'; } else if (document.getElementById('notifybox').style.display == 'none') { document.getElementById('messagebox-top').style.display = 'block'; } } else { document.getElementById('messagebox-top').style.display = 'none'; document.getElementById('notifybox').style.display = 'none'; } } function notify() { if (document.getElementById('notifybox').style.display == 'none') { if (document.getElementById('messagebox-top').style.display == 'block') { document.getElementById('messagebox-top').style.display = 'none'; document.getElementById('notifybox').style.display = 'block'; } else if (document.getElementById('messagebox-top').style.display == 'none') { document.getElementById('notifybox').style.display = 'block'; } } else { document.getElementById('notifybox').style.display = 'none'; document.getElementById('messagebox-top').style.display = 'none'; } } function init() { document.getElementById('messagebox-top').style.display = 'none'; document.getElementById('notifybox').style.display = 'none'; } </script> </head> <body onload="init()"> <table> <td onclick="message();">Apri DIV 1</td> <td onclick="notify();">Apri DIV 2</td> </table> <div id="messagebox-top"> Content </div> <div id="notifybox"> Content 2 </div> </body> </html>

In sostanza non setti lo stile (così eviti anche che chi ha JS diabilitato non veda nulla) e lanci al caricamento della pagina una funzione che provvede a nascondere i due div (init).

;)

Sii grazie mille ha funzionato! :)