ExBB: Forum flat-db in italiano 
Questa sequenza assicura che le sottopagine non verranno caricate al di fuori del frameset.
Se un visitatore inserisce l'URL di una sottopagina - la nostra sequenza farà sì che il frameset venga caricato con la sottopagina in uno dei frame.
Sarà necessario inserire una breve sequenza nella sezione <head> sia sulla pagina del frameset sia su ognuna delle sottopagine.
Quello che succede realmente è questo:
Se una sottopagina viene caricata al di fuori del frameset, la sequenza sulla sottopagina lo rileverà, e caricherà invece il frameset.
Quando il frameset viene caricato, la sequenza sul frameset caricherà la relativa sottopagina nel frame window corretto.
Personalizza questa riga per adattarla alle tue pagine:
framespage.htm è il nome della tua pagina dei frame.
subpage.htm è la pagina dove incollerai il codice.
Se la sottopagina si chiamasse mypage.htm e la pagina dei frames si chiamasse index.htm, il link sarebbe:
Questa riga rileva se la pagina è caricata o meno in un frameset:
Se la pagina non è caricata in un frameset, verrà eseguito il comando su questa riga:
Questo fa aprire la pagina frameset come se tu avessi inserito
nella casella url del tuo browser.
Il trucco dell'intera sequenza è che la sequenza nella framespage può accedere a ciò che viene inserito subito dopo il simbolo ? attraverso l'oggetto window.location.search, incorporato in javascript.
Questo è il modo in cui vengono passate le informazioni per indicare alla pagina del frameset quale sottopagina caricare.
Questa è la sequenza da copiare e incollare sulla pagina dei frame:
Personalizza i valori del frameset per adattarli alla tua pagina.
Ricordati di includere tutte le dichiarazioni relative al frameset in enunciati del tipo document.write - nella stessa maniera in cui il frame "nav" viene definito nell'esempio qui sopra.
Il frame window che caricherà le sottopagine dovrà essere così:
Valori della riga qui sopra che possono essere cambiati secondo le proprie esigenze:
* defaultsub.htm è la pagina di default che viene aperta se il frameset viene aperto normalmente (Cioè: Se il frameset non viene caricato dalla sequenza in una sottopagina).
* display è il nome del frame. Puoi scegliere qualsiasi nome per il frame.
Questa funzione è in grado di stabilire se un valore è stato passato alla pagina frameset che segue un simbolo ? nell'url:
Se un valore viene inserito dopo il simbolo ? nell'url, la funzione rimanda allora il valore. Altrimenti rimanda defaultsub.htm - il nome della pagina di default da caricare.
Per sempllificare, sostituiamo l'output di questa funzione con il nome FunctionGeneratedPage.htm (per questo esempio, non ha importanza se è una pagina default o una sottopagina).
Possiamo quindi sostituire la dichiarazione originale del frame:
con questa semplice dichiarazione, che mostra come la riga apparirà nel browser dopo che la funzione è stata decifrata:
In questo modo, ciò che succede si vede in maniera più ovvia ed immediata.
La sequenza raccoglie il valore passato da una sottopagina, oppure il nome della sottopagina di default.
E infine aggiunge al frame l'attributo relativo al nome "display".
Se un visitatore inserisce l'URL di una sottopagina - la nostra sequenza farà sì che il frameset venga caricato con la sottopagina in uno dei frame.
Sarà necessario inserire una breve sequenza nella sezione <head> sia sulla pagina del frameset sia su ognuna delle sottopagine.
Quello che succede realmente è questo:
Se una sottopagina viene caricata al di fuori del frameset, la sequenza sulla sottopagina lo rileverà, e caricherà invece il frameset.
Quando il frameset viene caricato, la sequenza sul frameset caricherà la relativa sottopagina nel frame window corretto.
IL CODICE PER LE SOTTOPAGINE
La sequenza da copiare e incollare sulle sottopagine é questa:<HEAD>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var correct_frame = 0 + (parent.nav ? 1 : 0);
if (self == top || !correct_frame)
top.location.href = 'framespage.htm?subpage.htm';
//-->
</SCRIPT>
</HEAD>
Personalizza questa riga per adattarla alle tue pagine:
top.location.href = 'framespage.htm?subpage.htm';
framespage.htm è il nome della tua pagina dei frame.
subpage.htm è la pagina dove incollerai il codice.
Se la sottopagina si chiamasse mypage.htm e la pagina dei frames si chiamasse index.htm, il link sarebbe:
top.location.href = 'index.html?mypage.htm';
COME FUNZIONA
Questa riga rileva se la pagina è caricata o meno in un frameset:
if (self == top || !correct_frame)
Se la pagina non è caricata in un frameset, verrà eseguito il comando su questa riga:
top.location.href = 'framespage.htm?subpage.htm';
Questo fa aprire la pagina frameset come se tu avessi inserito
http://www.yourdomain.com/framespage.htm?subpage
nella casella url del tuo browser.
Il trucco dell'intera sequenza è che la sequenza nella framespage può accedere a ciò che viene inserito subito dopo il simbolo ? attraverso l'oggetto window.location.search, incorporato in javascript.
Questo è il modo in cui vengono passate le informazioni per indicare alla pagina del frameset quale sottopagina caricare.
IL CODICE PER LA PAGINA FRAMESET
Questa è la sequenza da copiare e incollare sulla pagina dei frame:
<HTML>
<HEAD>
<TITLE>MyFramesPage</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var correct_frame = true;
document.write('<FRAMESET COLS="50%,50%">');
document.write('<FRAME SRC="navpage.htm" NAME="nav">');
document.write('<FRAME SRC="',(location.search ?
location.search.substring(1):"defaultsub.htm"),'"" NAME="display">');
document.write('<\/FRAMESET>');
//-->
</SCRIPT>
</HTML>Personalizza i valori del frameset per adattarli alla tua pagina.
Ricordati di includere tutte le dichiarazioni relative al frameset in enunciati del tipo document.write - nella stessa maniera in cui il frame "nav" viene definito nell'esempio qui sopra.
Il frame window che caricherà le sottopagine dovrà essere così:
document.write('<FRAME SRC="',(location.search ? location.search.substring(1):"defaultsub.htm"),'"" NAME="display">');
Valori della riga qui sopra che possono essere cambiati secondo le proprie esigenze:
* defaultsub.htm è la pagina di default che viene aperta se il frameset viene aperto normalmente (Cioè: Se il frameset non viene caricato dalla sequenza in una sottopagina).
* display è il nome del frame. Puoi scegliere qualsiasi nome per il frame.
COME FUNZIONA
Questa funzione è in grado di stabilire se un valore è stato passato alla pagina frameset che segue un simbolo ? nell'url:
location.search ? location.search.substring(1) : "defaultsub.htm")
Se un valore viene inserito dopo il simbolo ? nell'url, la funzione rimanda allora il valore. Altrimenti rimanda defaultsub.htm - il nome della pagina di default da caricare.
Per sempllificare, sostituiamo l'output di questa funzione con il nome FunctionGeneratedPage.htm (per questo esempio, non ha importanza se è una pagina default o una sottopagina).
Possiamo quindi sostituire la dichiarazione originale del frame:
<FRAME SRC="',location.search ? location.search.substring(1) : "defaultsub.htm"),'"" NAME="display">
con questa semplice dichiarazione, che mostra come la riga apparirà nel browser dopo che la funzione è stata decifrata:
<FRAME SRC="',FunctionGeneratedPage.htm,'"" NAME="display">
In questo modo, ciò che succede si vede in maniera più ovvia ed immediata.
La sequenza raccoglie il valore passato da una sottopagina, oppure il nome della sottopagina di default.
E infine aggiunge al frame l'attributo relativo al nome "display".
domenica, 02 ottobre 2005 -- 12:14
| 
( 0 / 0 )
( 0 / 0 )In questo articolo vedremo come realizzare un elenco di link con effetto rollover utilizzando i fogli di stile css. Un elenco di link di questo tipo risulta particolarmente adatto per essere utilizzato come menu di navigazione per un sito web.
Il codice html per l'elenco di links sarà di questo tipo:
Il foglio di stile associato sarà:
Ed ecco l'effeo ottenuto con questo esempio:
Senza il foglio di stille CSS l'elenco di links si presenterà così:
Il codice html per l'elenco di links sarà di questo tipo:
<DIV ID="navmenu">
<UL>
<LI><A href="#">Home</A></LI>
<LI><A href="#">Html</A></LI>
<LI><A href="#">How To</A></LI>
<LI><A href="#">Link</A></LI>
<LI><A href="#">Tips</A></LI>
</UL>
</DIV>
Il foglio di stile associato sarà:
<STYLE TYPE="text/css">
#navmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#navmenu a
{
display: block;
color: #000066;
background-color: transparent;
width: 100px;
padding: 2px 8px;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #000066;
border-bottom: 1px solid #000066;
}
#navmenu a:hover
{
background-color: #003399;
color: #FFFFFF;
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#navmenu li { margin-bottom: 2px; }
</STYLE>
Ed ecco l'effeo ottenuto con questo esempio:
Senza il foglio di stille CSS l'elenco di links si presenterà così:
martedì, 27 settembre 2005 -- 08:08
| ( 0 / 0 )
( 0 / 0 )Per inserire nelle nostre pagine due comandi che funzionano come i tasti AVANTI e INDIETRO del nostro browser il codice da utilizzare è:
Esempio:
<FORM><INPUT type="button" value="INDIETRO" onclick="history.go(-1)"></FORM>
<FORM><INPUT type="button" value="AVANTI" onclick="history.go(1)"></FORM>
Esempio:
martedì, 27 settembre 2005 -- 07:51
| ( 0 / 0 )
( 0 / 0 )A volte può essere utile inserire nelle nostre pagine web la data di ultima modifica. Un modo molto semplice per farlo è inserire questo codice:
Otterremo questo effetto:
Se vogliamo che la data sia espressa in italiano:
<script language="JavaScript">
document.write(document.lastModified)
< /script>
Otterremo questo effetto:
Se vogliamo che la data sia espressa in italiano:
<script language="JavaScript">
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments
}
var DOWArray = new initArray("Domenica","Lunedì","Martedì","Mercoledì",
"Giovedì","Venerdì","Sabato");
var MOYArray = new initArray("Gennaio","Febbraio","Marzo","Aprile",
"Maggio","Giugno","Luglio","Agosto","Settembre",
"Ottobre","Novembre","Dicembre");
var LastModDate = new Date(document.lastModified);
document.write("Questa pagina è stata modificata ");
document.write(DOWArray[(LastModDate.getDay()+1)],", ");
document.write(LastModDate.getDate()," ");
document.write(MOYArray[(LastModDate.getMonth()+1)]," ");
document.write(".");
</SCRIPT> martedì, 27 settembre 2005 -- 07:36
| ( 0 / 0 )
( 0 / 0 )Vediamo come creare una interfaccia di questo tipo con l'uso del CSS.
Il foglio di stile associato è questo:
Le righe di codice html sono queste:
Il foglio di stile associato è questo:
<style type="text/css">
<!--
/* Tabbed example */
div.tabs {
min-height: 7em;
position: relative;
line-height: 1;
z-index: 0}
div.tabs > div {
display: inline}
div.tabs > div > a {
color: black;
background: #CCC;
padding: 0.2em;
border: 0.1em outset #BBB;
border-bottom: 0.1em solid #CCC}
div.tabs > div:not(:target) > a {
border-bottom: none;
background: #999}
div.tabs > div:target > a,
:target #default2 > a {
border-bottom: 0.1em solid #CCC;
background: #CCC}
div.tabs > div > div {
background: #CCC;
z-index: -2;
left: 0; top: 1.3em;
bottom: 0; right: 0;
overflow: auto;
padding: 0.3em;
border: 0.1em outset #BBB}
div.tabs > div:not(:target) > div {
position: absolute }
div.tabs > div:target > div, :target #default2 > div {
position: absolute;
z-index: -1}
--></style> Le righe di codice html sono queste:
<div class=example>
<div class=tabs>
<div id=tab1>
<a href="#tab1">Tab 1</a>
<div>One might well argue, that...</div>
</div>
<div id=tab2>
<a href="#tab2">Tab 2</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id=tab3>
<a href="#tab3">Tab 3</a>
<div>... that 2 should have been enough, but...</div>
</div>
<div id=default2>
<a href="#default2">Default</a>
<div>... it works!</div>
</div>
</div>
</div>
martedì, 27 settembre 2005 -- 06:52
| ( 0 / 0 )
( 0 / 0 )Indietro Altre notizie