10 utentionline
(1) Calendario eventi in PHP
(1) Logo omni-presente
(1) Pubblicare un sito
(1) home
(1) il nuovo libro di Fabio volo
(1) news n.9 - 18 Ottobre 2006
(1) Tutorials XHTML
(1) Tutorials Javascript
(1) Guida CSS 2
Yappybook
searchengine
quicklinks
WebDesigner
Tutorials ASP
Tutorials XHTML
Tutorials Javascript
Tutorials HTML-CSS
Tutorials SQL
Tutorials PHP & MySQL
AJAX applicazioni web
Web Development
Template & Layout
Non solo Web :: Blog
Portfolio Lavori
Who is Yappy?
Benvenuto nella Newsletter
libririviste
Newsletter
Calendario motoGP 2007
newscorsi
FAQ & Domande
newscorsi
Web Designer gratuitoCorso Web Designer Gratuito per creare siti internet trucchi, consigli, esempi pratici e template per diventare un vero web designer.
Seo Extreme 2007
Al corso nazionale "Seo Extreme 2007" troverai le ultime tecniche e strategie di Posizionamento nei motori di ricerca. Parteciperai ad un corso di alto livello dedicato a chi vuole fare posizionamento...
Newsletter
Obiettivi e risultatiCiao,
ho atteso un po' a mandarti una nuova newsletter ma volevo essere sicuro di aver qualcosa da dire e qualcosa da offrire.
News n.13 - 27 febbraio 2007
In questa edizione ci sono nuovi tutorial e domande a cui ora è facilissimo trovare risposta come mettere il bottone Skype oppure una Google Map sul tuo sito internet.
Inoltre novità e corsi per diventare professionisti del web...
libririviste
Web Design Facile"Web Design Facile" di Davide Vasta è una guida pratica che conduce il lettore, passo per passo attraverso la realizzazione di un sito Internet: dalla creazione di un prototipo da mostrare al cliente fino al suo sviluppo definitivo.
WebDesigner 22
Web Designer Magazine n.22. Flash in prima linea, conoscere l'ultima versione del programma Macromedia. Inserire video Flash nelle vostre pagine. In primo piano "diventare Designer di successo".
tagclouds
Scrolling in Javascript Fight club Trucchi headlines efficaci 4 Certificare l'HTML4.0 Icone validazione newsletter for webdesigner ActionScript - Scrolling testo guida Illustrator CS la Ferrari ed il Dott. Rossi Yes Man - Danny Wallace Briciole di pane SPACE InVaDeRs Gestione thumbnail onlinesyndicate
RSS 2.0Atom feed
CreativeCommons
stampa l'articolo
segnala ad un amicoLogo omni-presente
[16 Mag 2004]Si vuole creare un oggetto che permane sullo schermo anche se l'utente si muove all'interno della pagina. Può essere un menu o un logo, comunque qualcosa che vogliamo sempre presente sullo schermo duranta la consultazione del sito, nonostante lo sc
Si vuole creare un oggetto che permane sullo schermo anche se l'utente si muove all'interno della pagina.
Può essere un menu o un logo, comunque qualcosa che vogliamo sempre presente sullo schermo duranta la consultazione, nonostante lo scrolling della pagina.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" />
<head />
<style>
body {font: 8pt Verdana, Arial, Helvetica, sans Serif}
#logo { position:absolute;top:10px;left:2px;}
</style>
Iniziamo con la definizione della pagina e degli stili da utilizzare al suo interno. In particolare la posizione del livello "logo" che contiene l'elemento da spostare nella pagina.
<script type="text/javascript">
var pos_y= 10;
var ie4 = document.all;
var ns6 = document.getElementById&&!document.all;
var ns4 = document.layers;
La sezione appena descritta invece analizza il tipo di browser utilizzato dall'utente della pagina e dalla variabile pos_y che indica l'unità? di movimento per l'oggetto in esame.
Di seguito in funzione del browser utilizziamo la funzione adatta a riposizionare l'elemento all'interno della pagina.
function posiziona() {
if (ie4) {
logo.style.pixelTop=document.body.scrollTop+pos_y
} else if (ns6) {
document.getElementById("logo").style.top=window.pageYOffset+pos_y
} else if (ns4) {
eval(document.logo.top=eval(window.pageYOffset+pos_y));
}
if(ie4 || ns6 || ns4) setTimeout("posiziona()",1);
}
</script />
Analizziamo ad esempio il codice relativo a InternetExplorer 4
logo.style.pixelTop=document.body.scrollTop+sposta
La posizione del livello "logo" viene impostata in funzione allo scrolling verticale della pagina document.body.scrollTop.
Dopo aver posizionato il livello "logo" all'interno della pagina, per avere l'effetto scrolling, abbiamo posizionato un nuovo livello più in basso nella pagina.
<div id="logo">[...]</div>
<span style="LEFT: 200px; POSITION: absolute; TOP: 600px">
<b>Copyright © 2004 - Yappy Web :: B<sup>2</sup></b>
</span>
L'ultimo elemento da inserire è il comando per iniziare il controllo dell'animazione.
<script type="text/javascript">posiziona();</script>
