Floting side bar help

**shas1280** · 10-25-2009, 07:10 AM

My vertical floating side bar defined in the css 350px from the top and it is appearing below the page header. I need my floating side bar very top on the page only when i am scrolling down.

Can any one help me Pls....Really i need it

**stringcugu** · 10-25-2009, 08:45 AM

play with this one

<script>
var ns=(document.layers)?true:false;
var ie=(document.all)?true:false;
var Ver4=(document.getelementbyid)?true:false;
</script>
< img src=1.gif height=500>
<script>
function stat(){
document.elField1.top=pageYOffset+window.innerHeight-400;//105;
document.elField1.left=pageXOffset+window.innerHeight-600;
document.elField2.top=pageYOffset+window.innerHeight-350;//200;//-295;
document.elField2.left=pageXOffset+window.innerHeight-750;//-616;
document.elField3.top=pageYOffset+window.innerHeight-300;//295;//-200;
document.elField3.left=pageXOffset+window.innerHeight-600;//-600;
document.elField4.top=pageYOffset+window.innerHeight-250;//400;
document.elField4.left=pageXOffset+window.innerHeight-600;
document.elField5.top=pageYOffset+window.innerHeight-200;//460;
document.elField5.left=pageXOffset+window.innerHeight-600;
document.elField6.top=pageYOffset+window.innerHeight-150;//516;
document.elField6.left=pageXOffset+window.innerHeight-600;
document.elField7.top=pageYOffset+window.innerHeight-100;//576;
document.elField7.left=pageXOffset+window.innerHeight-600;//170;
//document.bars.top=pageYOffset+window.innerHeight-111;
document.elField8.top=pageYOffset+window.innerHeight-578;//170;
document.elField8.left=pageXOffset+window.innerHeight-600;//170;
document.bars.top=pageYOffset+window.innerHeight-111;
var a=pageYOffset+window.innerHeight-516;
var aa=pageXOffset+window.innerHeight+219;
document.bars.left=pageXOffset+window.innerHeight+219;
document.bar.top=a
document.bar.left=aa
setTimeout("stat()",scroll||fixed(0,0))}
function fix(){if(ns){stat()}else{
elField1.style.top=document.body.scrollTop+document.body.clientHeight-550;//530;//100;
elField1.style.left=document.body.scrollLeft+1
elField2.style.top=document.body.scrollTop+document.body.clientHeight-350;//205;
elField2.style.left=document.body.scrollLeft+-170
elField3.style.top=document.body.scrollTop+document.body.clientHeight-300;//295;
elField3.style.left=document.body.scrollLeft+1
elField4.style.top=document.body.scrollTop+document.body.clientHeight-250;//335;
elField4.style.left=document.body.scrollLeft+1
elField5.style.top=document.body.scrollTop+document.body.clientHeight-200;//410;
elField5.style.left=document.body.scrollLeft+1
elField6.style.top=document.body.scrollTop+document.body.clientHeight-150;//510;
elField6.style.left=document.body.scrollLeft+1
elField7.style.top=document.body.scrollTop+document.body.clientHeight-100;//530;
elField7.style.left=document.body.scrollLeft+1;//319
elField8.style.top=document.body.scrollTop+document.body.clientHeight-70;//530;
elField8.style.left=document.body.scrollLeft+855;//319
bars.style.top=document.body.scrollTop+document.body.clientHeight-119;//516;
var a=document.body.scrollTop+document.body.clientHeight-516;//119;
bar.style.left=document.body.scrollLeft+815
bar.style.top=a
bars.style.left=document.body.scrollLeft+815
}}function fix1(){
if(ns){document.elField1.top=pageYOffset+window.innerHeight-105;
document.elField1.left=pageXOffset+window.innerHeight-900;
}
else
elField1.style.top=document.body.scrollTop+document.body.clientHeight-100;
elField1.style.left=document.body.scrollLeft+-111
}
</script>
<body onLoad="fix();upDate();xxxxupDate();xxxupDate();xxupDate();xupDate();Dat()" onScroll="fix()" onResize="fix()">
<img name="imPic" SRC="Cynic001.jpg" width="200" height="850" hspace="10" align="left">
<span id=bar style="position:absolute;left:68px;top:355px;width:614px;height:45px;z-index:9">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr align=center>
<td width=190><a href=http://www.ccidnet.com/><A HREF="javascript:showPrev(-1)">PREVIOUS</A><A HREF="javascript:showNext(1)">NEXT</A>
<A HREF="javascript:showPrev()">PREVIOUS</A> || <A HREF="javascript:showNext()">NEXT</A></a></td>
</tr></table></span>
<span id=bars style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr align=center>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>barsClick here</strong></a></td>
</tr></table></span>
<span id=elField1 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr align=center>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>one1</strong></a></td>
</tr></table></span>
<span id=elField2 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr align=center>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>two2</strong></a></td>
</tr></table></span>
<span id=elField3 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:29">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr align=center>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>three3</strong></a></td>
</tr></table></span>
<span id=elField4 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>four4</strong></a></td>
</tr></table></span>
<span id=elField5 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>five5</strong></a></td>
</tr></table></span>
<span id=elField6 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>six6</strong></a></td>
</tr></table></span>
<span id=elField7 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:29">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>seven7</strong></a></td>
</tr></table></span>
<span id=elField8 style="position:absolute;left:68px;top:55px;width:614px;height:45px;z-index:29">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF><tr>
<td width=190><a href=http://www.ccidnet.com/><a href=javascript:showhide()><strong>seven7888888</strong></a></td>
</tr></table></span>

**stringcugu** · 10-25-2009, 11:46 AM

one more

<html><head><title>EXTRÁK - kataporta.net</title>
<META content="webdesign, web, design, weblapkészítés, honlapkészítés">
<LINK href="haver.css" type=text/css rel=stylesheet>
<style>
#divMenu0 {position:absolute; top:10px; left:150px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:12px; font-weight:bold;}
#divMenu1 {position:absolute; top:0px; left:250px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:12px; font-weight:bold;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){
this.ns=(document.layers)?true:false;
this.Ver4=(document.getElementById)?true:false;
this.ie=(document.all)?true:false;
return this
}
var bw=new lib_bwcheck()
var tMove=10;
var tSpeed=20
var tMoveOnScroll=true
var tShow=20
function makeMenu(obj,nest,show,move,speed){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.Ver4?document.getElementById(obj):bw.ie?document.all[obj]:bw.ns?eval(nest+'document.'+obj):0;
this.style=bw.Ver4?document.getElementById(obj).style:bw.ie?document.all[obj].style:bw.ns?eval(nest+'document.'+obj):0;
this.x=this.style.left||this.style.pixelLeft||this.el.offsetLeft||0
this.y=this.style.top||this.style.pixelTop||this.el.offsetTop||0
this.state=1;
this.go=0;
this.mup=b_mup;
this.show=show;
this.mdown=b_mdown;
this.height=bw.ns?this.style.document.height:this.el.offsetHeight
this.moveIt=b_moveIt;
this.move=move; this.speed=speed
this.obj = obj+"Object"; eval(this.obj +"=this")
}
var px = bw.ns||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.style.left=this.x+px; this.style.top=this.y+px;}
function b_mup(){
if(this.y>-this.height+this.show){
this.go=1; this.moveIt(this.x,this.y-this.move)
setTimeout(this.obj+".mup()",this.speed)
}else{this.go=0; this.state=1}
}
//Menu out
function b_mdown(){
if(this.y<eval(scrolled)){
this.go=1; this.moveIt(this.x,this.y+this.move)
setTimeout(this.obj+".mdown()",this.speed)
}else{this.go=0; this.state=0}
}
function moveTopMenu(num){
if(!oMenu[num].go){
if(!oMenu[num].state)oMenu[num].mup()
else oMenu[num].mdown()
}
for(i=0;i<oMenu.length;i++){
if(i!=num && !oMenu[i].state){ oMenu[i].mup()}
}
}
function checkScrolled(){
for(i=0;i<oMenu.length;i++){
if(!oMenu[i].go){
y=!oMenu[i].state?eval(scrolled):eval(scrolled)-oMenu[i].height+oMenu[i].show
oMenu[i].moveIt(oMenu[i].x,y)
}
}
setTimeout('checkScrolled()',40)
}
function topMenuInit(){
oMenu=new Array()
oMenu[0]=new makeMenu('divMenu0',"",tShow,tMove,tSpeed)
oMenu[1]=new makeMenu('divMenu1',"",tShow,tMove,tSpeed) //*
scrolled=bw.ns?"window.pageYOffset":"document.body.scrollTop"
for(i=0;i<oMenu.length;i++){
oMenu[i].moveIt(oMenu[i].x,-oMenu[i].height+oMenu[i].show)
oMenu[i].style.visibility='visible'
}
bw.ns?checkScrolled():window.onscroll=checkScrolled;
}
onload=topMenuInit;
</script>
</head>
<body bgcolor=#000011 marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>

<div id="divMenu0">

<a href="javascript://">Link1</a><br><br>
<a href="javascript://">Link2</a><br><br>

<a href="javascript://">Link3</a><br><br>
<a href="javascript://">Link4</a><br><br>
<a href="#" onclick="moveTopMenu(0); return false">MENU1</a>
</div>
<div id="divMenu1">
<a href="javascript://">Link1</a><br><br>
<a href="javascript://">Link2</a><br><br>
<a href="javascript://">Link3</a><br><br>
<a href="javascript://">Link4</a><br><br>
<a href="#" onmouseover="moveTopMenu(1)">MENU2</a>

</div>
<img CLASS="s" src="1.gif" width="11" height="999">
</body>
</html>

**shas1280** · 10-26-2009, 06:27 AM

Thank You..

Thread: Floting side bar help

Thread Tools

Search Thread

Floting side bar help

Bookmarks

Bookmarks

Posting Permissions