Flytande lager
Det här javaskriptet ger ett flytande lager som följer med i scrollningen på sidan. Du kan använda det till exempel som en meny, eller för att visa en bild som du vill ha tillgänglig över hela sidan.
Vi kommer att använda ett javaskript, en händelsehanterare och en DIV-tagg. Du kan hämta hela funktionen som en färdig HTML-sida med noggrant kommenterad kod.
Jag har testat funktionen så att jag vet den fungerar i Netscape 4, 6 och 7, Mozilla Firefox 0.9 och Internet Explorer 6.0.
När sidan öppnas i webbläsaren kommer det flytande extralagret att placeras så långt från webbläsarfönstrets/ramens överkant och vänsterkant som koden anger. Indraget från vänsterkanten kan anges som procent av webbläsarfönstret/ramen, eller som ett exakt antal pixlar.
Varje scrollning i sidan kommer sedan att flytta lagret så att det följer med och hela tiden visas i samma position som från början.
Lagret består av ett DIV-element med ett ID som används i skriptet. I den inledande DIV-taggen anger vi stilen för lagret. I själva DIV-elementet placerar vi sedan koden för det som skall följa med i scrollningen, det vill säga hela innehållet i lagret. Lagret kan innehålla normal HTML-kod, inklusive till exempel länkar, bilder och liknande.
Koden
Koden till den här funktionen består av tre delar:
- Ett javaskript som placeras i sidans HEAD-element. Skriptet utför alla förflyttningar och ser till att koden hela tiden anpassas till den webbläsare som används.
- En händelsehanterare som kör i gång skriptet när sidan för övrigt är färdigladdad. Denna onLoad-hanterare skall ligga i den inledande BODY-taggen.
- Ett DIV-element som lämpligen placeras direkt efter den inledande BODY-taggen. Den kan i och för sig placeras även på andra platser i BODY-elementets kod, men eftersom det här ger ett lager som kommer att flyttas runt på sidan känns det bra att ha det alldeles i början.
Javaskriptet
Skriptet kan verka litet långt, men mycket av koden sysslar helt enkelt med att kontrollera vilken webbläsare som används. Det gör att det flytande lagret fungerar i de flesta webbläsare.
Jag förklarar viktiga delar av koden allt eftersom:
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onerror = null;
Variabeln uppMarginal anger vilket avstånd det skall vara mellan lagret och fönstrets överkant. Variabeln flyttTid påverkar hastigheten i uppdateringen.
var uppMarginal = 10;
var flyttTid = 10;
I det följande avsnittet kontrolleras vilken webbläsare som används och värdet objekt anpassas efter detta.
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function lagerObjekt(id,left) {
if (ns6) {
this.objekt = document.getElementById(id).style;
this.objekt.left = left;
return this.objekt;
}
else if(ie4) {
this.objekt = document.all[id].style;
this.objekt.left = left;
return this.objekt;
}
else if(ns4) {
this.objekt = document.layers[id];
this.objekt.left = left;
return this.objekt;
}
}
Talet .5 i flytLgr anger lagrets avstånd från webbläsarfönstrets/ramens vänsterkant – .01 placerar det indraget 1 procent av webbläsarfönstrets hela bredd från vänsterkanten, .5 innebär 50 procent in.
function lagerSetup() {
flytLgr = new lagerObjekt('flytLager', sidBredd * .5);
Alternativt kan man ange en exakt placering från vänsterkanten räknat, genom att byta raden ovan mot flytLgr = new lagerObjekt('flytLager', 50); och ändra talet 50 till antal pixlar från vänsterkanten.
Talet 50 i setInterval anger tiden innan lagret flyttas – ett lägre tal ger en snabbare förflyttning.
window.setInterval("Scroll()", 50)
}
Olika webbläsare hanterar fönsterhöjd olika. Funktionen flytStart längre ned behöver veta hur högt webbläsarfönstret är. Här kommer därför funktionen flytObjekt att ta fram detta värde och göra det på olika sätt beroende på vilken webbläsare som används.
function flytObjekt() {
if (ns4 || ns6) {
hittaHoejd = window.innerHeight;
} else if(ie4) {
hittaHoejd = document.body.clientHeight;
}
}
Sedan behöver funktionen startScroll uppgiften om var fönstrets överkant befinner sig – även detta är webbläsarberoende.
function Scroll() {
if (ns4) {
this.nuY = document.layers["flytLager"].top;
this.scrollTop = window.pageYOffset;
startScroll();
}
else if(ns6) {
this.nuY = parseInt(document.getElementById('flytLager').style.top);
this.scrollTop = scrollY;
startScroll();
} else if(ie4) {
this.nuY = flytLager.style.pixelTop;
this.scrollTop = document.body.scrollTop;
startScroll();
}
}
Nu följer funktionerna startScroll, flytStart och animering som flyttar lagret till den nya positionen.
function startScroll() {
var nyFlyttaTillY = this.scrollTop + this.uppMarginal;
if ( this.nuY != nyFlyttaTillY ) {
if ( nyFlyttaTillY != this.flyttaTillY ) {
this.flyttaTillY = nyFlyttaTillY;
flytStart();
}
animering();
}
}
function flytStart() {
var nu = new Date();
this.A = this.flyttaTillY - this.nuY;
this.B = Math.PI / ( 2 * this.flyttTid );
this.C = nu.getTime();
if (Math.abs(this.A) > this.hittaHoejd) {
this.D = this.A > 0 ? this.flyttaTillY - this.hittaHoejd : this.flyttaTillY + this.hittaHoejd;
this.A = this.A > 0 ? this.hittaHoejd : -this.hittaHoejd;
}
else {
this.D = this.nuY;
}
}
function animering() {
var nu = new Date();
var nyY = this.A * Math.sin( this.B * ( nu.getTime() - this.C ) ) + this.D;
nyY = Math.round(nyY);
if (( this.A > 0 && nyY > this.nuY ) || ( this.A < 0 && nyY < this.nuY )) {
if ( ie4 )document.all.flytLager.style.pixelTop = nyY;
if ( ns4 )document.layers["flytLager"].top = nyY;
if ( ns6 )document.getElementById('flytLager').style.top = nyY + "px";
}
}
Här följer den funktion som dras i gång först av alla, från onLoad-hanteraren i den inledande BODY-taggen. Funktionen undersöker vilka värden somn skall användas för att ange webbläsarfönmstrets/ramens höjd och bredd. Detta är webbläsarberoende.
Därefter avslutar vi skriptet.
function start() {
if(ns6||ns4) {
sidBredd = innerWidth;
sidHoejd = innerHeight;
lagerSetup();
flytObjekt();
}
else if(ie4) {
sidBredd = document.body.clientWidth;
sidHoejd = document.body.clientHeight;
lagerSetup();
flytObjekt();
}
}
// -->
</SCRIPT>
I BODY-taggen
I den inledande BODY-taggen placerar vi en händelsehanterare son anropar funktionen start(), men gör det först när sidan för övrigt är inläst.
Du kan ändra marginalerna som du vill, men observera att du inte kan ha mer än en onLoad i BODY-taggen.
<BODY topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onLoad="start()">
DIV-elementet
Direkt efter den inledande BODY-taggen placerar vi hela DIV-elementet. Det består av inledande och avslutande DIV-taggar samt lagrets HTML-kod. I den inledande DIV-taggen anger vi ID och stilmall för lagret.
Stilmallen för id="flytlager" skall bara innehålla placeringen samt bredd och höjd.
Såväl bredd som höjd kommer att påverkas av innehållet i DIV-elementet. Om bredden anges till 100 pixlar, men DIV-elementet sedan innehåller en 250 pixlar bred tabell, kommer den senare att råda.
Värdet i top bör vara detsamma som i skriptets uppMarginal eftersom flytlagret annars kommer att "hoppa" när man uppdaterar sidan i IE eller Netscape.
Mellan DIV-taggarna lägger vi all den HTML-kod som anger vad flytlagret för övrigt skall innehålla. I taggarna som anger innehållet i lagret kan man utnyttja vanliga stilmallar. Ange på något sätt en bakgrundsfärg, eftersom bakgrunden i annat fall kommer att synas genom lagret och förvilla. Observera att border-color på tabellen inte fungerar i Netscape eller Firefox.
<DIV id="flytLager" style="position: absolute; height:20px; width:100px; left:1px; top:100px; z-index:100">
<TABLE style="background-color:#FFFFCC; border-color:#FF0000;" border="1" width="125" cellspacing="0" cellpadding="3">
<TR><TD width="100%">
<P style="margin:3px;">En text som följer med.</P>
</TD></TR>
</TABLE>
</DIV>
Du kan använda det flytande lagret som en länkmeny och låta menyn följa med när besökaren scrollar i sidan. Menyn kan till exempel ligga tvärs över sidans överkant och innehålla klickbara bilder som länkar till de olika delarna av din webbplats.
Hämta skriptet som färdig HTML-sida. Sidan är noggrant kommenterad så att du ser vilka ändringar du bör göra.
© SupportData.Net