Toon posts:

[JS] Scroll script werkt niet in FF

Pagina: 1
Acties:
  • 52 views sinds 30-01-2008

zaterdag 1 januari 2005 20:42

Acties:
  • jsiegmund
  • Registratie: Januari 2002
  • Laatst online: 11:05

jsiegmund

Topicstarter
Ik heb het volgende scriptje van internet geplukt:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

// begin absolutely positioned scrollable area object scripts 
function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(obj){ 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 

/*  this.el = document.getElementById(obj);
    this.css = document.getElementById(obj).style;
    this.scrollHeight=this.el.offsetHeight;
    this.clipHeight=this.el.offsetHeight;*/

    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x+"px";
    this.css.top=this.y+"px";
} 
 
function MoveAreaDown(move){ 
    if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
    } 
} 
function MoveAreaUp(move){ 
    if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
    } 
} 
 
function PerformScroll(speed){ 
    if(initialised){ 
        loop=true; 
        if(speed>0) objScroller.down(speed) 
        else objScroller.up(speed) 
    } 
} 
 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('leftpanecontainer');
    objScroller=new ConstructObject('leftpanecontent');
    objScroller.MoveArea(0,0);
    objContainer.css.visibility='visible';
    initialised=true; 
}


Hiermee zou je een DIVje moeten kunnen laten scrollen m.b.v. mouseovers. Dit werkt allemaal prima, in IE... In FF wil het ding niet bewegen, en ik snap niet waarom. Ik zal wel iets stoms over het hoofd zien ofzo, maar zit er nu al een middag mee te klooien en ik snap niet waarom het nu in FF niet werkt en in IE wel; de afzonderlijke functies werken namelijk allemaal wel.

zaterdag 1 januari 2005 22:56

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Als je gewoon het originele script gebruikt werkt het wel, dus beter kopieren:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

<html>
  <head>
    <title>Test</title>
    <style type="text/css">  
      #divUpControl {position:absolute; left:150px;top:318px; width:320px;height:30px; z-index:1; text-align: right}
      #divDownControl {position:absolute; left:150px; top:495px; width:320px;height:30px; z-index:1;text-align: right}
      #divContainer {LEFT: 150px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH:320px; CLIP: rect(0px 320px 150px 0px); POSITION: absolute; TOP: 340px; HEIGHT: 150px}
      #divContent {LEFT: 0px; POSITION: absolute; TOP: 0px}
      body { font: normal 12px Arial, Helvetica, sans-serif}
    </style>
    <script type="text/javascript"> 
      function verifyCompatibleBrowser(){ 
          this.ver=navigator.appVersion 
          this.dom=document.getElementById?1:0 
          this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
          this.ie4=(document.all && !this.dom)?1:0; 
          this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
          this.ns4=(document.layers && !this.dom)?1:0; 
          this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
          return this 
      } 
      bw=new verifyCompatibleBrowser() 
        
      var speed=50 
      var loop, timer 
       
      function ConstructObject(obj,nest){ 
          nest=(!nest) ? '':'document.'+nest+'.' 
          this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
          this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
          this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
          this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
          this.up=MoveAreaUp;this.down=MoveAreaDown; 
          this.MoveArea=MoveArea; this.x; this.y; 
          this.obj = obj + "Object" 
          eval(this.obj + "=this") 
          return this 
      } 
      function MoveArea(x,y){ 
          this.x=x;this.y=y 
          this.css.left=this.x 
          this.css.top=this.y 
      } 
      function MoveAreaDown(move){ 
        if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
          this.MoveArea(0,this.y-move) 
          if(loop) setTimeout(this.obj+".down("+move+")",speed) 
        } 
      } 
      function MoveAreaUp(move){ 
        if(this.y<0){ 
          this.MoveArea(0,this.y-move) 
          if(loop) setTimeout(this.obj+".up("+move+")",speed) 
        } 
      } 
      function PerformScroll(speed){ 
        if(initialised){ 
          loop=true; 
          if(speed>0) objScroller.down(speed) 
          else objScroller.up(speed) 
        } 
      } 
      function CeaseScroll(){ 
          loop=false 
          if(timer) clearTimeout(timer) 
      } 
      var initialised; 
      function InitialiseScrollableArea(){ 
          objContainer=new ConstructObject('divContainer') 
          objScroller=new ConstructObject('divContent','divContainer') 
          objScroller.MoveArea(0,0) 
          objContainer.css.visibility='visible' 
          initialised=true; 

      } 

      function displayStatusMsg(msgStr) { 
        status=msgStr;
        document.returnValue = true;
      }

      function preloadImages() { 
        var d=document; if(d.images){ if(!d.p) d.p=new Array();
          var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
          if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
      }

      function swapImgRestore() { 
        var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
      }

      function findObj(n, d) { 
        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document); return x;
      }

      function swapImage() { 
        var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
         if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
      }

      function reloadPage(init) {  //reloads the window if Nav4 resized
        if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
          document.pgW=innerWidth; document.pgH=innerHeight; onresize=reloadPage; }}
        else if (innerWidth!=document.pgW || innerHeight!=document.pgH) location.reload();
      }
      reloadPage(true);
  </script>
  </head>
  <body onLoad="InitialiseScrollableArea();preloadImages('scroller_up_on.gif','scroller_down_on.gif')">

    <div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7);displayStatusMsg('Scroll Up');swapImage('scroller_up_button','','scroller_up_on.gif',1);return document.returnValue" onMouseOut="CeaseScroll();swapImgRestore()">[img]"scroller_up.gif"[/img]</a></div>
    <div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7);displayStatusMsg('Scroll Down');swapImage('scroller_down_button','','scroller_down_on.gif',1);return document.returnValue" onMouseOut="CeaseScroll();swapImgRestore()">[img]"scroller_down.gif"[/img]</a></div>
    <div id="divContainer"> 
      <div id="divContent">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis vulputate, ante et tincidunt dapibus, nunc lorem dapibus mi, a scelerisque arcu mi et diam. Nunc eget risus vitae metus rhoncus egestas. Suspendisse diam est, blandit suscipit, vehicula dictum, iaculis nec, velit. Maecenas tortor odio, interdum ut, adipiscing quis, semper eget, elit. Vivamus nec urna. Maecenas eget augue. Sed ultricies, est vel pharetra volutpat, libero arcu sollicitudin sem, et egestas neque neque id pede. Aliquam vulputate. Donec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque condimentum nonummy nisl. Morbi diam ligula, venenatis ut, lacinia vel, blandit a, dui. Nulla suscipit purus vel dui. Phasellus dignissim malesuada urna. Donec quis augue at ante rutrum volutpat. Morbi eu lorem.</p>
        <p>Pellentesque mollis, urna ac lacinia tristique, nisl arcu viverra erat, non adipiscing dui metus nec lacus. Donec purus massa, varius et, rhoncus a, fringilla vel, felis. Nunc consectetuer augue at nibh. Nam quis ante quis eros pellentesque cursus. Mauris aliquam. Praesent vel dolor. Duis volutpat quam hendrerit eros. Sed in sem et tortor fermentum ultrices. Sed vel arcu. Nullam eu mauris. Suspendisse augue.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque molestie nunc vel purus. Maecenas auctor, augue et tincidunt semper, neque augue tempus lorem, non mattis felis odio a orci. Nunc velit leo, mattis at, rutrum at, porta ac, ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat. Nulla aliquet nonummy odio. Mauris lacinia posuere lacus. Ut vel tortor. Cras eget tellus. Duis sapien. Nulla gravida nunc non ligula. Nunc metus pede, commodo eget, vestibulum non, blandit sit amet, justo.</p>
        <p>Nulla aliquet tempor urna. Phasellus cursus egestas ligula. Nullam a nulla nec lorem tristique tristique. Fusce lobortis dictum libero. Suspendisse nec dolor vel eros semper vestibulum. Aliquam fermentum, arcu nec pulvinar placerat, eros erat cursus nisl, quis semper erat lorem vel libero. Maecenas vitae wisi. Donec luctus. Nulla hendrerit fringilla urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit, ante nec consequat semper, nulla eros elementum lorem, porttitor facilisis enim mauris at elit. Quisque et sem eget nunc sodales lacinia. Duis arcu neque, sodales eget, commodo sit amet, gravida viverra, nulla. Donec facilisis interdum dolor. Aenean at velit et odio cursus porttitor. Nam mauris lorem, sollicitudin eget, egestas et, porttitor ac, dui. Donec elementum. Praesent eu augue. Nunc quis sapien.</p>
        <p>Pellentesque vitae lacus. Nullam laoreet. Quisque id augue et eros consectetuer vulputate. Nam sodales dolor vitae ligula egestas condimentum. In mi lectus, molestie ut, accumsan commodo, congue euismod, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eget risus. Donec sit amet enim nec mauris tristique ullamcorper. Cras mattis feugiat metus. Etiam non enim.</p>

      </div>
    </div>

  </body>
</html>

zaterdag 1 januari 2005 23:16

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:15

crisp

Devver

Pixelated

Wij zijn geen debug service voor gevonden scripts; write your own...

Intentionally left blank

Dit topic is gesloten.