Archive for the HTML Category
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]
Lo sfondo di una pagina web può essere reso "fisso"; in questo modo l’immagine resta ferma mentre scorre soltanto il contenuto. A parte la bellezza o meno dell’effetto visivo che si ottiene (del tutto soggettiva), la cosa si può rivelare utile quando si vuole usare come sfondo un’immagine di grandi dimensioni (es. 1024×768) che deve ricoprire l’intera area visibile. Se l’immagine non è fatta per essere ripetuta più volte, si ottiene un "collage" non troppo bello da vedere, quindi è utile bloccarla.
Fissare lo sfondo è molto semplice e si può fare in due modi, con HTML o con i CSS.
In HTML bisogna usare un parametro del tag <Body> che non fa parte dello standard; ciò significa che l’effetto sarà visibile solo con Internet Explorer 
. Il codice da usare è il seguente:
<body background="percorso_immagine_sfondo" bgproperties="fixed">
Da notare la parte in grassetto con il parametro bgproperties e il valore fixed che blocca lo sfondo. Si tenga presente, inoltre, che gli attributi del tag Body sono considerati deprecati; maggiori info QUI (ringrazio Marco per la precisazione).
Con i CSS, invece, si utilizza una proprietà che fa parte dello standard, quindi visibile anche da altri browser. Generalmente avremo una riga che specifica l’immagine da utilizzare come sfondo:
background: url("http://www………../immagine.jpg");
Per bloccare l’immagine basta andare a capo ed aggiungere:
background-attachment: fixed;
Questo è tutto. Da notare che l’immagine viene prima ripetuta per coprire tutta l’area visibile e poi fissata. Così se si usa una texture si può ugualmente ricoprire tutta la pagina.
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]