kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
 Inviato: 31 Mar 2007 13:06 Oggetto: * Note a fondo pagina con Javascript(unobtrusive) e CSS |
 |
|
Ecco una serie di script molto carini che danno la possibilita' di formattare le note di richiamo a fondo pagina o i link contenuti nel testo.
NOTE
Format Footnotes with Javascript & CSS
http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
esempio:
http://www.brandspankingnew.net/specials/footnote.html
Sempre di bsn le sidenotes,le note questa volta sono inserite lateralmente (il loro utilizzo qui comporta pero' una preparazione dello spazio di visualizzazione nel vostro layout)
Sidenotes with Javascript & CSS.
http://www.brandspankingnew.net/specials/footnote_3.html
*************************************************
Altro script molto semplice nell'implementazione
A simple footnote script
http://krijnhoetmer.nl/stuff/javascript/footnotes/
Modificherei leggermente lo script in questo modo cmq, per essere + facilmente configurabile, creando delle variabili in testa per personalizzare le parti di testo fisse inserite nelle funzioni:
| Codice: |
footnotes.js
<script type="text/javascript">
window.onload = function() {
/* PERSONALIZZAZIONE */
var FNCssClass = "notesList"; // classe css che formattera' le note
var FNBackSymbol = "[ ↑ ]"; // simbolo per ritorna alla lettura
var FNTitle = "Visualizza nota a pie pagina"; // testo alternate per saltare alla note
var FNBackTitle = "Ritorna al contenuto"; // testo link per ritornare alla lettura
var FNOpen = "["; // se volete sostituire con parentesi tonde, oppure nulla
var FNClose = "]";
/* FINE PERSONALIZZAZIONE */
if (!DOMsupport) return;
var footNoteHolder = document.getElementById('footnotes');
var allNotes = footNoteHolder.getElementsByTagName('small');
var notesList = document.createElement('ol');
notesList.className = FNCssClass;
for (var i = 0; i < allNotes.length; i++) {
var newA = document.createElement('a');
newA.id = 'text-' + (i + 1);
newA.setAttribute('href', '#footnote-' + (i + 1));
newA.setAttribute('title', FNTitle);
newA.appendChild(document.createTextNode(FNOpen + (i + 1) + FNClose));
newBackLink = document.createElement('a');
newBackLink.id = 'footnote-' + (i + 1);
newBackLink.setAttribute('href', '#text-' + (i + 1));
newBackLink.setAttribute('title', FNBackTitle);
newBackLink.appendChild(document.createTextNode(FNBackSymbol));
newNote = document.createElement('li');
newNote.appendChild(document.createTextNode(allNotes[i].firstChild.nodeValue + ' '));
newNote.appendChild(newBackLink);
notesList.appendChild(newNote);
allNotes[i].replaceChild(newA, allNotes[i].firstChild);
}
footNoteHolder.appendChild(document.createElement('hr'));
footNoteHolder.appendChild(notesList);
}
</script>
|
LINK PER STAMPA
Per quanto riguarda invece i LINK ottimizzati per la stampa ecco l'ottima soluzione di A List a Part:
Improving Link Display for Print
http://alistapart.com/articles/improvingprint
esempio:
http://alistapart.com/d/improvingprint/files/final.html
nello script praticamente se proprio volete modificare qualcosa è la scritta che apparira' come fondo pagina che è nella variabile:
| Codice: |
var h2_txt = document.createTextNode('Links');
|
al posto di "Links" inserite il valore desiderato |
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
