- ARCHIVES
- » [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
Pages: 1
[b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
- aidenlive
- » FTalkGeek
1269
0
1969-12-31
[b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
[b]Description: [/b]
Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone?
[url=http://www.friendster.com/profiles/adnpht][color=green]DEMO[/color][/url]
[b]Code:[/b] [i]edit the red bold part..[/i]
[quote][spoiler]adnpht="<div id='point1' STYLE='position:absolute;visibility:visible;'>[color=red]<img src='[b]IMAGE DIRECT LINK[/b]'>[/color]</div>";
flow=document.getElementById('flo_wrapper');
river=document.createElement("div");
river.innerHTML=adnpht;
flow.parentNode.insertBefore(river,flow);
var XX=20;
var xstep=1;
var delay_time=60;
var YY=0;
var ch=0;
var oh=0;
var yon=0;
var ns4=document.layers?1:0
var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
if(ie){
YY=document.body.clientHeight;
point1.style.top=YY;
}
else if (ns4){
YY=window.innerHeight;
document.point1.pageY=YY;
document.point1.visibility="hidden";
}
else if (ns6){
YY=window.innerHeight
document.getElementById('point1').style.top=YY
}
function reloc1()
{
if(yon==0){YY=YY-xstep;}
else{YY=YY+xstep;}
if (ie){
ch=document.body.clientHeight;
oh=point1.offsetHeight;
}
else if (ns4){
ch=window.innerHeight;
oh=document.point1.clip.height;
}
else if (ns6){
ch=window.innerHeight
oh=document.getElementById("point1").offsetHeight
}
if(YY<0){yon=1;YY=0;}
if(YY>=(ch-oh)){yon=0;YY=(ch-oh);}
if(ie){
point1.style.left=XX;
point1.style.top=YY+document.body.scrollTop;
}
else if (ns4){
document.point1.pageX=XX;
document.point1.pageY=YY+window.pageYOffset;
}
else if (ns6){
document.getElementById("point1").style.left=XX
document.getElementById("point1").style.top=YY+window.pageYOffset
}
}
function onad()
{
if(ns4)
document.point1.visibility="visible";
loopfunc();
}
function loopfunc()
{
reloc1();
setTimeout('loopfunc()',delay_time);
}
if (ie||ns4||ns6)
window.onload=onad[/spoiler][/quote]
[i]Simply add the code in your js ext.[/i]
[b]Credits:[/b] [color=green]Bruce Anderson[/color]
[url=http://www.friendster.com/profiles/adnpht][color=green]DEMO[/color][/url]
[b]Code:[/b] [i]edit the red bold part..[/i]
[quote][spoiler]adnpht="<div id='point1' STYLE='position:absolute;visibility:visible;'>[color=red]<img src='[b]IMAGE DIRECT LINK[/b]'>[/color]</div>";
flow=document.getElementById('flo_wrapper');
river=document.createElement("div");
river.innerHTML=adnpht;
flow.parentNode.insertBefore(river,flow);
var XX=20;
var xstep=1;
var delay_time=60;
var YY=0;
var ch=0;
var oh=0;
var yon=0;
var ns4=document.layers?1:0
var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
if(ie){
YY=document.body.clientHeight;
point1.style.top=YY;
}
else if (ns4){
YY=window.innerHeight;
document.point1.pageY=YY;
document.point1.visibility="hidden";
}
else if (ns6){
YY=window.innerHeight
document.getElementById('point1').style.top=YY
}
function reloc1()
{
if(yon==0){YY=YY-xstep;}
else{YY=YY+xstep;}
if (ie){
ch=document.body.clientHeight;
oh=point1.offsetHeight;
}
else if (ns4){
ch=window.innerHeight;
oh=document.point1.clip.height;
}
else if (ns6){
ch=window.innerHeight
oh=document.getElementById("point1").offsetHeight
}
if(YY<0){yon=1;YY=0;}
if(YY>=(ch-oh)){yon=0;YY=(ch-oh);}
if(ie){
point1.style.left=XX;
point1.style.top=YY+document.body.scrollTop;
}
else if (ns4){
document.point1.pageX=XX;
document.point1.pageY=YY+window.pageYOffset;
}
else if (ns6){
document.getElementById("point1").style.left=XX
document.getElementById("point1").style.top=YY+window.pageYOffset
}
}
function onad()
{
if(ns4)
document.point1.visibility="visible";
loopfunc();
}
function loopfunc()
{
reloc1();
setTimeout('loopfunc()',delay_time);
}
if (ie||ns4||ns6)
window.onload=onad[/spoiler][/quote]
[i]Simply add the code in your js ext.[/i]
[b]Credits:[/b] [color=green]Bruce Anderson[/color]
Last edited by aidenlive (2009-01-18 21:43:04)
 |
- bobcbar
- » FTalkElite
- 5223
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
Thanks for sharing another nice code for floating images, this one almost bounces from the top to the bottom 
|
- Afzulnizam
- » SuperFTalker
- 8122
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
wah nice. thanks for sharing here.
i will try this trick if i not busy 
|
- robin182
- » FTalkAddict
- 471
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
another float image.. nice..
thx for share here.. 
|
- rebora2007
- » FTalkAddict
- 300
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
[quote=robin182]where would i paste it???[/quote]
Paste it in your js file.
By the way thanks for sharing 
|
- ---xXirukiTepe---
- » SuperFTalker
- 8896
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
another nice code 
|
![;]](img/smilies/wink.gif)
- scott159
- » FTalkAddict
- 329
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
[quote=mikee0930]..can i just put the codes in my media box.?[/quote]
i dont think so...
u need to paste it in ur .js extension...
nice tricks...
thanks for sharing...
|
- slashedkite
- » FTalkManiac
- 973
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
nice version of floating object trick.. i'll use this..
|
- y4sir
- » FTalkFreak
- 1976
- 0
- 1969-12-31
Re: [b]Description: [/b] Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if the user scrolls the page. Going up anyone? :
so cool !!!
nice trick bro !!!
keep creative
|