Archive for the Javascript Category
Riporto un paio di operazioni effettuabili da una finestra popup grazie a Javascript.
1) Leggere il valore del campo di un form HTML posto nella pagina da cui viene aperto il popup
var valore = opener.document.getElementById(’nomeCampo’).value;
2) Effettuare un refresh della pagina da cui viene aperto il popup
opener.location.reload();
Scavando nella rete ho trovato una soluzione che attraverso l’utilizzo di Javascript consente di ottenere la versione stampabile di una determinata porzione di pagina. Da notare che non mi riferisco alla pagina intera, in quanto ciò che si manda effettivamente in stampa è una parte di contenuto espressamente indicata nel codice.
Volendo sintetizzare, nella pagina verrà inserito un link che indica la possibilità di stampare un certo contenuto; tale link chiama una funzione Javascript che visualizza in un popup l’anteprima del testo da stampare. A questo punto un link posizionato in cima alla finestra consente di avviare effettivamente la stampa.
Come fare?
1. Inserire il contenuto che si desidera rendere stampabile dentro un DIV con un preciso valore per l’attributo ID.
Esempio: <div id="printable"> [contenuto stampabile] </div>
2. Esternamente al DIV precendentemente creato, inserire un link che indichi la funzione di stampa e che permetta di eseguire la funzione che vedremo al punto 3.
Esempio: <a href="javascript:stampa_popup();">Versione stampabile</a>
3. All’interno dell’intestazione della pagina (tra i tag <head></head>) inserire la seguente funzione Javascript:
function stampa_popup()
{
var css = "<style>body {text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; background: #FFFFFF;}</style>";
var testo = "<html><head><title>"+document.title+"</title>"+css+"</head>";
testo += "<body><a href=\"javascript:print();\">Stampa</a> | <a href=\"javascript:window.close();\">Chiudi finestra</a><br><br>";
testo += document.getElementById(’printable’).innerHTML;
testo += "</body></html>";
var ident_finestra = window.open("","finestra_stampa","height=500,width=600");
ident_finestra.document.open();
ident_finestra.document.write(testo);
ident_finestra.document.close();
}
</script>
Come vedete la funzione non fa altro che creare una pagina HTML con il contenuto dell’elemento di ID "printable" trovato nella pagina di origine. Ovviamente potrete personalizzare il codice che viene generato, tra questo anche la variabile "css".
Questo è quanto. Salvate e testate il tutto.
[Liberamente tratto da questo articolo]
Andando alla ricerca di un menu ad albero per un sito web, mi sono imbattutto in dTree. Si tratta di un menù in javascript davvero ben fatto e facilmente adattabile alle proprie esigenze.
Tra le caratteristiche più importanti segnalo:
- nessun limite al numero di livelli
- ricorda i nodi aperti nel passaggio da una pagina all’altra
- è compatibile con i browser più diffusi (personalmente testato su IE6 e FF 1.0.7)
Risorse:
- Sito ufficiale
- Pagina di esempio
- Scaricatelo subito!
- Guardatelo in azione su OpenSourceCMS
PS: sia nella pagina di esempio che nel sito indicato all’ultimo punto, i nodi sono inseriti manualmente, scrivendoli cioè nel codice della pagina. Ovviamente, se usate un linguaggio di scripting non vi sarà difficile costruire l’albero a partire, per esempio, da un database.
Si supponga di voler dare la possibilità, all’utente di una pagina web, di mostrare o nascondere un blocco di testo cliccando su un apposito link. Vediamo come fare con l’aiuto di un codice Javascript.
All’interno dei tag <head> </head> della pagina in oggetto, inserire senza apportare modifiche il seguente codice:
<SCRIPT language=JavaScript>
function toggle(id){
if (document.all){
if(document.all[id].style.display == ‘none’){
document.all[id].style.display = ”;
} else {
document.all[id].style.display = ‘none’;
}
return false;
} else if (document.getElementById){
if(document.getElementById(id).style.display == ‘none’){
document.getElementById(id).style.display = ‘block’;
} else {
document.getElementById(id).style.display = ‘none’;
}
return false;
}
}
</SCRIPT>
A questo punto bisogna posizionarsi nel punto della pagina dove si vuole inserire il testo, creare il livello che lo conterrà e il link che fungerà da "interruttore":
<a title="apri/chiudi" onclick="toggle(’blocco’);" href="javascript:;">Clicca qui</a>
<div id="blocco" style="display:none">
testo…
</div>
Le modifiche da fare sono:
- title="apri/chiudi": per modificare il testo che appare al passaggio del mouse sul link.
- onclick="toggle(’blocco’);": al posto di "blocco" scrivere il valore del parametro id del tag <div>.
- Clicca qui: inserire al suo posto il testo che farà da link.
- id="blocco": è possibile cambiare il valore del parametro id con un nome più adatto alla pagina.
- style="display:none": fa in modo che il blocco risulti subito invisibile, cancellare se serve visibile.
- testo…: inserire il testo da mostrare/nascondere. Volendo può essere dentro una table.
Tutto qua. Salvare e visualizzare la pagina con un browser. [visualizza esempio]