Webmaster

DHTML : Pages with customised scrollbars
Contents ]
Dr Benton

Moving the Cursor

The dragIt() function (lines 90-99) distinguishes the different browsers and calls up the shiftTo() function:

35: function shiftTo(obj, x, y) {
36: // Control of over-scrolling
37: if (x<=scalaleft) {x=scalaleft}
38: if (x>=scalaright) {x=scalaright}
39:         
40: if (isNav)
41:   {
42:     // Scrolling code for Navigator
43:     obj.moveTo(x,poscurseur_y)
44:     document.layers["contenu"].left = 2*(posbarre_x)-x+20;
45:     document.layers["contenu"].clip.right = 293+x-posbarre_x-20;
46:     document.layers["contenu"].clip.left = -posbarre_x+x-20;
47:     document.close()
48:   }
49:     else
50:   {
51:     // Scrolling code for Internet Explorer
52:     obj.pixelLeft = x;
53:     obj.pixelTop = poscurseur_y
54:     document.all["contenu"].style.left = 2*(posbarre_x)-x+20;
55:
56:     // Order of rect coordinates: top right bottom left
57:     ev = 'rect(0px '+eval(293+x-posbarre_x-20)+'px 100px' +eval(posbarre_x-x+19.9)+'px'+')';
58:     document.all["contenu"].style.clip = ev;
59:   }        

60: }This function takes into account the browser used. The x variable contains the horizontal coordinate of the mouse pointer. From this value, we can deduce:

  • the coordinates of the curseur layer (lines 43 or 52/53);

  • the position that the contenu layer should take (line 44 or 54);

  • the new clipping coordinates of the layer (lines 45/46 or 57/58).

The right values. In our example, the values 293 and 20 correspond respectively to the clipping area's right coordinate and the cursor's starting position relative to the scrollbar.



  1   2   3   4   5   6   7 
Drop it!