utentionline
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
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...
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".
Web Marketing
Trucchi headlines efficaci 8Trucchi headlines efficaci 7
tagclouds
Web Marketing Watch 09/2007 Tooltips in JavaScript Come si fa un blog creativity day 2006 Tutorials Flash Mx Importare Video con Flash (par Certificare l'HTML4.0 Posizionamento nei Motori Redirect a sito 'mobile' News n14 01.03.2007 Yes Man - Danny Wallace la Ferrari ed il Dott. Rossisyndicate
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>
