GUIDA Fake popups - Istruzioni per l'uso

ertrophy · 16 Maggio 2012

Buon giorno a tutti oggi vorrei distaccarmi un po' dalle guide di cms, e parlare di strumenti utili e divertenti, che si trovano per il web, ovviamente dentro l'ambito del web development.
Oggi ci soffermeremo sull'utilizzo di falsi popup presi dal sito dhtmlpopups, molto divertenti ma soprattutto utili, e ovviamente di facile comprensione.
Contrariamente a cio che potreste pensare non utilizzeremo css per crearli, l'esempio in questione è una finestra aperta tramite un input pulsante e verrà successevamente chiusa cliccando sulla "x" in alto a destra della finestra stessa.

Ecco il codice:

Codice:

<head>
    
<title></title>
</head>
<body>
<body>
<h1></h1>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; right: 50px;'>
<script type='text/javascript'>
function styledPopupClose() {
  document.getElementById("styled_popup").style.display = "none";
}
</script>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("http://www.tomshw.it/forum/images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Contenuto
</td></tr>
</table>
</div>
<input type='submit' value=' Apri ' onClick='document.getElementById("styled_popup").style.display="block"'>

<p>

</p>
</body>
</html>

Per chi non se ne intendesso cominciamo a dire che tra i tag DIV è racchiusa la nostra finestra compresa di istruzioni per rimanere nascosta all'apertura della pagina;

Visto che ne abbiamo parlato il codice sottostante non solo afferma la posizione della finestra nella pagina ma fa si che la nostra finestra rimanga nascosta all'apertura della pagina, in caso volessimo fare il contrario ovvero farla aprire fin dall'inizio basta cambiare il valore "none" con "block";

Codice:

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; right: 50px;'>

Ora passiamo alla funzione che identifica l'azione di chiusura della finestra stessa, come vedete questa funzione va ad assegnare il valore "none" cosi da nascondere la finestra;

Codice:

<script type='text/javascript'>
function styledPopupClose() {
  document.getElementById("styled_popup").style.display = "none";
}
</script>

Ora dobbiamo analizzare la tabella, essa compone graficamente la nostra finestra in questo caso la nostra finestra è composta da tre immagini, la barra blu in alto, lo sfondo del contenuto e la x, in particolare a questa immagine collegheremo la funzione di chiusura della finestra cosi quando cliccheremo la x la finestra si chiuderà;

Codice:

<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>

Per finire con la nostra analisi abbiamo il tasto di input che assegnerà il valore block cosi da mostrare la finestra nascosta;

Codice:

<input type='submit' value=' Apri ' onClick='document.getElementById("styled_popup").style.display="block"'>

è molto semplice ma soprattutto molto utile e personalizzabile fino alle estremo, possiamo assegnare il la funzione di apertura anche ad un immagine senza che venga cliccata cambianto il valore onClick='document.getElementById("styled_popup").style.display="block"' con "OnMouseOver" oppure con altro come doppio click ecc.. insomma ciò che più vi piace

vbs · 20 Maggio 2012

Ciao!

Carina come guida, ma permettimi di fare qualche appunto... Tieni presente che non devi intendere come critiche, ma solo come osservazioni avendo scopo di migliorare la qualità del codice in quanto se vogliamo fare delle guide, esse devono essere tecnicamente esatte (beh, è un mio pallino in quanto mi sono imbattuto spesso in guide approssimative ed ho dovuto perdere più tempo per correggere che fare da 0) ;)

Come primo, presumendo che stiamo usando il XHTML Transitional come doctype (non vado sul "Strict") gli attributi onclick, onmouseover e tutti gli altri vanno scritti in minuscolo, sempre...in più ci sono dei tag ancora aperti nel tuo html (mi riferisco agli <input> che devono diventare <input ... />, ma anche per le <img /> alle quali diventano obbligatori i tag title e alt)...altrimenti il documento non risulta valido rispetto agli standard w3c.

Poi, come spiegazioni di contorno al codice, nulla da eccepire...però avessi il tempo per darti una mano (ahimè mi manca sempre), avrei fatto delle guide che trattino l'appoggio su jQuery come framework anche per garantire il funzionamento tra i vari browser (ricordo che ci sono problemi nel usare getElementById e getElementByName oppure .innerHTML() in quanto IE le tratta diversamente tra le sue versioni e da dei risultati diversi rispetto a FF, Chrome, Opera ecc ecc...)

In conclusione,ribadisco il concetto che la mia non è una critica rivolta contro, ma intendila come costruttiva nell'ottica delle tue future guide...e perché no, magari ti vengono nuove idee ;):ok:

ertrophy · 21 Maggio 2012

ti ringrazio della risposta, questi popups li utilizzavo in passato, e effettivamente avevo scovato gli stessi errorini, mi spiego, quello che hai riscontrato lo ho trovato pure io in passato quando li utilizzavo, infatti questi errori sono presenti nel codice ufficiale fornito, infatti se scarichiamo l'esempio troveremo vari problemi, credevo di averli corretti anche perchè molti erano gravi (nel codice ufficiale c'è un </head> posizonato in un modo che non posso commentare XD) comunque grazie per le precisazioni, la mia credo sia stata una svista anche perchè mi sono affidato un po' troppo alla versione ufficiale, quindi si conferma che anche i creatori non sono perfetti XD

Cerca

GUIDA Fake popups - Istruzioni per l'uso

ertrophy

Nuovo Utente

vbs

Utente Attivo

ertrophy

Nuovo Utente

Ci sono discussioni simili a riguardo, dai un'occhiata!

Entra

Discussioni Simili