login  Naam:   Wachtwoord: 
Registreer je!
 Forum

document.body.onscroll

Offline Dlol - 18/02/2008 22:05 (laatste wijziging 19/02/2008 17:32)
Avatar van DlolLid Hallo,

Ik ben bezig met in JavaScript een rechtermuisknop menutje te maken dat versleepbaar is. Maar nu moet er als er gescrolld word, een functie geactiveerd worden die het menuutje weer op de goede plaats zet. Ik dacht logischerwijze dat dit met document.body.onscroll zou gaan, maar dit blijkt niet zo te zijn... Ik heb al wat gezocht op internet, maar ik vind er niets over. Heeft er iemand een idee hoe dit kan?


Dank bij voorbaat!
Oja, en dit is de code voor als je 'em zou willen zien:
  1. <style>
  2. .tdbgclrmuismenuxjs
  3. {
  4. background-color:#000000;
  5. }
  6. </style>
  7. <script language="JavaScript">
  8. var menuitems = new Array('<a href="index.php">Home</a>','<a href="plaats.php">Een bericht plaatsen</a>','<a href="http://www.google.be">Google</a>','<a href="javascript:history.back();">Vorige</a>'); // De items in het menu, gescheiden door een komma en tussen enkele haakjes!
  9. var ownname = "Uw eigen titel graag"; // Vul hier de naam van het menu in
  10. var breedte = 150; // De breedte van het menu
  11. var menutitlestyle = "1"; // 1 geeft de titel weer, 2 vraagt om een eigen titel
  12.  
  13.  
  14. // Verander hieronder niets meer!
  15.  
  16. var dragging = 1;
  17. var url = new String(window.location);
  18. var parts = url.split('/');
  19. var file = parts[ parts.length - 1].split('?')[0];
  20. if (file == "index.php" || file == "" || file == "showallmssgs.php") {
  21.  
  22.  
  23. if (menutitlestyle == "2") {
  24. var menunaam = ownname;
  25. }
  26. else {
  27. var menunaam = "Een leuk menuutje";
  28. }
  29.  
  30. document.oncontextmenu=function() {
  31. return false;
  32. }
  33. document.onmousedown=click;
  34. function click() {
  35. if (event.button=="2") {
  36. document.all('menu').style.left=event.x + document.body.scrollLeft - breedte/2;
  37. document.all('menu').style.top=event.y + document.body.scrollTop;
  38. document.all('menu').style.visibility="visible";
  39. }
  40. }
  41. function nodisp() {
  42. document.all('menu').style.visibility="hidden";
  43. }
  44. function sleep() {
  45. if (event.button=="1") {
  46. var xchoppx = document.all('menu').style.left.split('');
  47. var xpositionfromdiv = '';
  48. for (i=0; i<xchoppx.length - 2;i++) {
  49. xpositionfromdiv += xchoppx[i];
  50. }
  51. var ychoppx = document.all('menu').style.top.split('');
  52. var ypositionfromdiv = '';
  53. for (i=0; i<ychoppx.length - 2;i++) {
  54. ypositionfromdiv += ychoppx[i];
  55. }
  56. var xdif = event.x - xpositionfromdiv;
  57. var ydif = event.y - ypositionfromdiv;
  58. document.onmousemove=function() {
  59. if (dragging==1) {
  60. document.all('menu').style.left=event.x - xdif;
  61. document.all('menu').style.top=event.y - ydif;
  62. }
  63. }
  64. }
  65. }
  66. var lengte = menuitems.length;
  67. document.write('<div id="menu" style="position:absolute; visibility:hidden; z-index:1;"><table cellspacing="1" cellpadding="3" width="'+breedte+'">');
  68. document.write('<tr><td class="tdbgclrmuismenuxjs" onSelectstart="return false;" onMousedown="dragging=1;sleep();" onMouseup="dragging=0;sleep();" width="'+(breedte-20)+'" align="center" title="Slepen om te verplaatsen"><a><b><font color="#ffffff">'+menunaam+'</font></b></a></td><td align="center" width="20px" class="tdbgclrmuismenuxjs"><a href="javascript:nodisp();"><font color="#ffffff">X</font></a></td></tr>');
  69. for (i=0;i<lengte;i++) {
  70. document.write('<tr><td id="menunr'+i+'" colspan="2">'+menuitems[i]+'</td></tr>');
  71. }
  72. document.write('</table></div>');
  73. }
  74. </script>


Iemand?

1 antwoord

Gesponsorde links
Offline BramBo - 20/02/2008 14:38
Avatar van BramBo JS gevorderde Scrollen is 'n vervelend probleem en er dient wat normalisatie plaats te vinden voordat het werk op alle browsers.

Het beste werkt het om met 2 eventBinders te werken (Crossbrowser). Namelijk AttachEvent en Addeventlistener.
Een mogelijke implementatie:
  1. var d = document;
  2. if (d.attachEvent) d.attachEvent("onmousewheel", function(event) { onWheel(event, callBack); });
  3. else if (d.addEventListener) d.addEventListener('DOMMouseScroll', function(event) { onWheel(event, callBack); }, false);


Wanneer er nu gescrolled wordt, word onWheel aangeroepen.
  1. var onWheel = function(event, callBack) {
  2. event = globalizeEvent(event);
  3.  
  4. callBack(event);
  5. return false;
  6. }
  7.  
  8. var globalizeEvent = function(event) {
  9. event.details = (window.opera) ? (event.wheelDelta/440)
  10. : ((event.detail) ? -(event.detail/12) : (event.wheelDelta/120));
  11. return event;
  12. }


globalizeEvent is om de zelfde output te krijgen in "alle" browsers, aangezien de wheelDelta/event.details wild varieert.

Nu dien je alleen maar een callback functie te maken en deze als parameter mee te geven in je eventbinding. dus bijvoorbeeld:

  1. function callBack(event) { alert(event.details); }
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s