Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Зафиксировать слой на экране


Автор: alafin 8.3.2008, 21:00
Есть шапка сделанная на JavaScript которая запускается из body:

<body onload="setVariables();scrollOn()">

Код

<script language=javaScript>

function setVariables(){
y1=-50;ob=1;max=20 // this max sets the distance from the top of the page

if (navigator.appName == "Netscape") {
v=".top=";h=".left=";dS="document.";sD="";
y="window.pageYOffset";x="window.pageXOffset";iW="window.innerWidth";iH="window.innerHeight"
}
else {h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";
y="document.body.scrollTop";x="document.body.scrollLeft";iW="document.body.clientWidth";iH="document.body.clientHeight"
}


object="object1";
checkLocationA()
}
movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0


function checkLocation(){
//  innerX=eval(iW)-115 // place to the right
 innerX=21 // controls the horizontal from the left side of the page

//  innerY=eval(iH)-35 // place at the bottom
  innerY=5 // controls the verticle from the top of the page
if (document.layers){innerY-=10;innerX-=10}
yy=eval(y);
xx=eval(x);
ydiff=ystart-yy;
xdiff=xstart-xx;
if ((ydiff<(-0.01))||(ydiff>(0.01))) movey=Math.round(ydiff/10),ystart-=movey



N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
object="object1"
eval(dS+object+sD+v+(ystart+innerY+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object2"
eval(dS+object+sD+v+(ystart+innerY+spread+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object3"
eval(dS+object+sD+v+(ystart+innerY+spread*2+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object4"
eval(dS+object+sD+v+(ystart+innerY+spread*3+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object5"
eval(dS+object+sD+v+(ystart+innerY+spread*4+10));
eval(dS+object+sD+h+(xstart+innerX+10));


//eval(dS + objectX + sD + v + y);
}
else{
object=document.getElementById('object1')
object.style.top=ystart+innerY
object.style.left=xstart+innerX

object=document.getElementById('object2')
object.style.top=ystart+innerY+spread
object.style.left=xstart+innerX

object=document.getElementById('object3')
object.style.top=ystart+innerY+spread*2
object.style.left=xstart+innerX

object=document.getElementById('object4')
object.style.top=ystart+innerY+spread*3
object.style.left=xstart+innerX

object=document.getElementById('object5')
object.style.top=ystart+innerY+spread*4
object.style.left=xstart+innerX





//object=document.getElementById('object2')
//object.style.top=50+innerY
//object.style.left=50+innerX

}




setTimeout("checkLocation()",10)}

function checkLocationA(){
ystart=eval(y)+5;
xstart=eval(x)+5;}
spread=40
function scrollOn(){
items=5
if (ob<=items){
objectX="object"+ob;
y1+=10;

N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
eval(dS + objectX + sD + v + y1);}
else{
object=document.getElementById(objectX)
object.style.top=y1}


//eval(dS + objectX + sD + v + y);


        if (y1<max) xx=setTimeout ("scrollOn()",20)
        else y1=-50, max+=spread, ob+=1, xx=setTimeout("scrollOn()",20) // this max sets the spacing
        }
if (ob>5){clearTimeout(xx);checkLocation();}
}
</script>


Подскажите каким образом мне сделать так чтобы эту шапку можно было заморозить по нажатию кнопки, т.е. сделать так чтобы она при скролинге не перемещалась 

Автор: SelenIT 9.3.2008, 00:20
Цитата

аналог стиля position: fixed на JS

Почему бы по нажатию кнопки в самом деле не задать шапке такой стиль?

P.S. Ковыряться в ископаемом коде эпохи 4-го Нетскейпа, сорри, не имею ни времени, ни желания. Лучше было бы просто и четко описать словами задачу (из чего состоит шапка, как она должна двигаться и т.д.), тогда мы могли бы общими усилиями быстренько насочинять компактный и красивый код. Задача-то, по сути, элементарная... ;)


M
Sardar
SelenIT, извини, это я тему переименовал с обычного "помогите")  Автор ищет способ повесит свой или аналог кода на кнопку.

Автор: alafin 9.3.2008, 08:35
Подскажите куда его и как вставить? 

Автор: alafin 9.3.2008, 09:12
Сделал так
Код

<div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table width="1630px"  border="0" cellspacing="1" cellpadding="5">
<tr>
                                    <td colspan="14" class="heading">Records Found: <?php echo $records; ?><?php echo "<div align=\"right\"><font size=\"1\" face=\"Verdana\" ><a href=\"http://www.esecon.ch/software\"><font color=\"#00FFF0\">Powered by Esecon</font></a></font></div>";?></td>
                                </tr>
                                    <tr>
                                    <td colspan="7" class="heading">
<form>
    <input type="button" value="lock" onClick="document.getElementById('object1').style.position=fixed;">
</form>

Но как то не помогло? Подскажите что нужно исправить?

Автор: Sardar 9.3.2008, 14:28
div надо бы закрыть, подсветка тебе показывает где. 'fixed' -  это строка (значение), а не переменная, возьми в кавычки.

Автор: alafin 9.3.2008, 15:13
Цитата(Sardar @  9.3.2008,  14:28 Найти цитируемый пост)
div надо бы закрыть

Div закрыт. Просто я показал только кусок кода.
Цитата(Sardar @  9.3.2008,  14:28 Найти цитируемый пост)
подсветка тебе показывает где. 'fixed' -  это строка (значение), а не переменная, возьми в кавычки. 

Можешь показать как надо, а то я не совсем понял что ты имеешь в виду?

Автор: Sardar 9.3.2008, 15:31
document.getElementById('object1').style.position=fixed; -> document.getElementById('object1').style.position='fixed';

Автор: alafin 9.3.2008, 16:49
Sardar, вот теперь работает, только вот фиксирует не так как бы я того хотел. Мне нужно сделать так чтобы это фиксирование проходили с небольшим смещением по х и по у. Можно ли такое сделать? Пробую вот так 
Код

    <input type="button" value="Lock" onClick="document.getElementById('object1').style.position='fixed';document.getElementById('object1').style.visibility='show';document.getElementById('object1').style.left='250px';document.getElementById('object1').style.top='-50px';">

Но почему-то не помогает.

Автор: Sardar 9.3.2008, 17:00
Значит не указал doctype. Поставь <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 или подобное (я всегда в strict верстаю, валидно). Вообще привыкни правильно оформлять документ.

http://tagsoup.com/cookbook/css/fixed/

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)