Previous Thread
Next Thread
Print Thread
Rate Thread
#311610 10/05/2006 6:46 PM
Joined: Oct 2006
Posts: 18
Newbie
Newbie
Joined: Oct 2006
Posts: 18
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 sleep

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...

trosfrihed.dk
Custom Ubb 7.5.2
Sponsored Links
Joined: Mar 2000
Posts: 21,079
Likes: 3
I type Like navaho
I type Like navaho
Joined: Mar 2000
Posts: 21,079
Likes: 3
Cool, thank you for sharing smile


- Allen wavey
- What Drives You?
Joined: Oct 2006
Posts: 18
Newbie
Newbie
Joined: Oct 2006
Posts: 18
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!


trosfrihed.dk
Custom Ubb 7.5.2

Link Copied to Clipboard
Donate Today!
Donate via PayPal

Donate to UBBDev today to help aid in Operational, Server and Script Maintenance, and Development costs.

Please also see our parent organization VNC Web Services if you're in the need of a new UBB.threads Install or Upgrade, Site/Server Migrations, or Security and Coding Services.
Recommended Hosts
We have personally worked with and recommend the following Web Hosts:
Stable Host
bluehost
InterServer
Visit us on Facebook
Member Spotlight
isaac
isaac
California
Posts: 1,157
Joined: July 2001
Forum Statistics
Forums63
Topics37,573
Posts293,925
Members13,849
Most Online5,166
Sep 15th, 2019
Today's Statistics
Currently Online
Topics Created
Posts Made
Users Online
Birthdays
Top Posters
AllenAyres 21,079
JoshPet 10,369
LK 7,394
Lord Dexter 6,708
Gizmo 5,833
Greg Hard 4,625
Top Posters(30 Days)
Top Likes Received
isaac 82
Gizmo 20
Brett 7
WebGuy 2
Top Likes Received (30 Days)
None yet
The UBB.Developers Network (UBB.Dev/Threads.Dev) is ©2000-2024 VNC Web Services

 
Powered by UBB.threads™ PHP Forum Software 8.0.0
(Preview build 20221218)