Floating banner script - UBB.Developers

UBB.Dev

Hej!
I have at floating script, which makes it possible for a banner, picture, box or whatever you want, to float up and down when you scrolling the page. The script will both work in relative or absolute position. I have only used it in relative position, in a large . I havent translated the comments, it will be another day

1. Put this code into your HEAD section:

Code

<script language="javascript">
<!--
flyderX=1; //vandret afstand fra kant.Anvendes kun ved absolute position.
flyderY=1; // Lodret afstand fra kant.Anvendes kun ved absolute position. 
elementbredde=148;
elementhøjde=800; 
talign=""; // Definerer hvilken skærmkant flyderX skal regnes fra ved absolut positionering. Top-center-bottom. 
valign="top"; // Definerer placering af elementets visning på skærmen. Top- center-bottom.
forsinkelse=3; // Tidsforsinkelse før elementet er positioneret. 0- hurtig/ 3-langsom.

(NS6)=false;
(IE6)=(document.all);
if (!IE6) {NS6=(document.getElementById);}

function adjust() {
if (NS6) {
if (lastX==-1 || forsinkelse==0)
{
lastX=window.pageXOffset + flyderX;
lastY=window.pageYOffset + flyderY;
}
else
{
var dx=Math.abs(window.pageXOffset+flyderX-lastX);
var dy=Math.abs(window.pageYOffset+flyderY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+flyderX>lastX) {lastX=lastX+forsinkelse+c;}
if (window.pageXOffset+flyderX<lastX) {lastX=lastX-forsinkelse-c;}
if (window.pageYOffset+flyderY>lastY) {lastY=lastY+forsinkelse+c;}
if (window.pageYOffset+flyderY<lastY) {lastY=lastY-forsinkelse-c;}
}
if (NS6){
//document.getElementById('flyderbanner').style.left=lastX;
document.getElementById('flyderbanner').style.top=lastY;
}
}
else if (IE6){
if (lastX==-1 || forsinkelse==0)
{
lastX=document.body.scrollLeft + flyderX;
lastY=document.body.scrollTop + flyderY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+flyderX-lastX);
var dy=Math.abs(document.body.scrollTop+flyderY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+flyderX>lastX) {lastX=lastX+forsinkelse+c;}
if (document.body.scrollLeft+flyderX<lastX) {lastX=lastX-forsinkelse-c;}
if (document.body.scrollTop+flyderY>lastY) {lastY=lastY+forsinkelse+c;}
if (document.body.scrollTop+flyderY<lastY) {lastY=lastY-forsinkelse-c;}
//if (document.body.scrollTop+flyderY>lastY){LastY=LastY+(document.body.scrollTop(0,5-LastY)+1)+'0'}
}
//document.all['flyderbanner'].style.posLeft = lastX;
document.all['flyderbanner'].style.posTop = lastY;
} 
setTimeout('adjust()',50);
}// Her kan delay yderligere ændres.

function define()
{
if (NS6) 
{ 
if (talign=="left") {flyderX=iflyderX};
if (talign=="right") {flyderX=window.innerWidth-iflyderX-layerwidth-20};
if (talign=="center") {flyderX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {flyderY=iflyderY};
if (valign=="bottom") {flyderY=window.innerHeight-iflyderY-layerheight};
if (valign=="center") {flyderY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE6) 
{
if (talign=="left") {flyderX=iflyderX};
if (talign=="right") {flyderX=document.body.offsetWidth-iflyderX-layerwidth-20}
if (talign=="center") {flyderX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {flyderY=iflyderY};
if (valign=="bottom") {flyderY=document.body.offsetHeight-iflyderY-layerheight}
if (valign=="center") {flyderY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>

2. Put this code just BEFORE the thing you wants to float:

Code

<script>
if ((IE6) || (NS6)) {document.write('<div id="flyderbanner" style="position:relative; left:'+flyderX+'; top:'+flyderY+';">');}
</script>

3. Put this code AFTER the thing you wants to float:

Code

<script>
if ((IE6) || (NS6)) 
{
document.write('</DIV>');
}
iflyderX=flyderX;
iflyderY=flyderY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();
</script>

Thats it! Just float it if you dare...

Cool, thank you for sharing

Allright! Heres the script with english comments, edited to use in absolute position. As an exampel of use, I have put in one of my bannerscripts marked with red.

1. Copy this code into your section:

Code

<SCRIPT LANGUAGE="JavaScript">
<!--
flyderX=10; //Horizontal distance from monitor border. Only used in absolute position.
flyderY=10; // Vertical distance from monitor border.Only used in absolute position. 
layerwidth=148; // Element width.
layerheight=74; // Element height.
halign="top"; // Defines which monitor border FlyderX shall be couted from in absolute position. Top- center- bottom. 
valign="top"; // Defines the postion of the elements' placement on the monitor. Top- center-bottom.
delayspeed=3; //  Delay before element has been positioned. 0- fast/ 3-slow.

 (NS6)=false;
(IE6)=(document.all);
if (!IE6) {NS6=(document.getElementById);}

function adjust() {
if (NS6) {
if (lastX==-1 || delay==0)
{
lastX=window.pageXOffset + flyderX;
lastY=window.pageYOffset + flyderY;
}
else
{
var dx=Math.abs(window.pageXOffset+flyderX-lastX);
var dy=Math.abs(window.pageYOffset+flyderY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+flyderX>lastX) {lastX=lastX+delay+c;}
if (window.pageXOffset+flyderX<lastX) {lastX=lastX-delay-c;}
if (window.pageYOffset+flyderY>lastY) {lastY=lastY+delay+c;}
if (window.pageYOffset+flyderY<lastY) {lastY=lastY-delay-c;}
}
if (NS6){
document.getElementById('flyderbanner').style.left=lastX;
document.getElementById('flyderbanner').style.top=lastY;
}
}
else if (IE6){
if (lastX==-1 || delay==0)
{
lastX=document.body.scrollLeft + flyderX;
lastY=document.body.scrollTop + flyderY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+flyderX-lastX);
var dy=Math.abs(document.body.scrollTop+flyderY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+flyderX>lastX) {lastX=lastX+delay+c;}
if (document.body.scrollLeft+flyderX<lastX) {lastX=lastX-delay-c;}
if (document.body.scrollTop+flyderY>lastY) {lastY=lastY+delay+c;}
if (document.body.scrollTop+flyderY<lastY) {lastY=lastY-delay-c;}
if (document.body.scrollTop+flyderY>lastY){LastY=LastY+(document.body.scrollTop(0,5-LastY)+1)+'0'}
}
document.all['flyderbanner'].style.posLeft = lastX;
document.all['flyderbanner'].style.posTop = lastY;
} 
setTimeout('adjust()',50);
}

function define()
{
if (NS6) 
{ 
if (talign=="left") {flyderX=iflyderX};
if (talign=="right") {flyderX=window.innerWidth-iflyderX-layerwidth-20};
if (talign=="center") {flyderX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {flyderY=iflyderY};
if (valign=="bottom") {flyderY=window.innerHeight-iflyderY-layerheight};
if (valign=="center") {flyderY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE6) 
{
if (talign=="left") {flyderX=iflyderX};
if (talign=="right") {flyderX=document.body.offsetWidth-iflyderX-layerwidth-20}
if (talign=="center") {flyderX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {flyderY=iflyderY};
if (valign=="bottom") {flyderY=document.body.offsetHeight-iflyderY-layerheight}
if (valign=="center") {flyderY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>

2. Copy this code into your section.

The red marked bannnercode contains 2 different 148x74 banners. An advertisment for the holy bible, made as gif images and an advertisment for a organisation helping poor children, made as sfw image. Just remove the bannercode and put in something else and spend some time changeing the variables in the header code.

Good Pleasure!