Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Auslesen von pagex, clientx, screenx, scrolltop positionen

Auslesen von pagex, clientx, screenx, scrolltop positionen

Dieser Code liest deine pagex, clientx, screenx, scrolltop Positionen aus und zeigst es deutlich auf den Bildschirm an , kein console.logt

Der hier verwendete Code

<!DOCTYPE html> <html> <head> <script src="/js_webseite/jquery.js"></script> <meta charset=utf-8 /> <title>client - page - screen</title> <style> body{ height:4000px; width:120%; } table{ position:fixed; width:80%; left:10%; top:160px; background:#eee; margin:0 auto; border-spacing:5px 10px; } table td{ border:1px solid black; padding:3px 10px; } table th{ background:grey; color:white; } span{ position:absolute; width:200px; left:40px; } h3,h4,span{ background:white; margin:0; padding:0; } </style> </head> <body> <h3>Positions Daten auslesen</h3> <h4>Zeigt die Werte von </h4> <br><span id="span1">clientx, clienty, <br><span id="span2">pagex, pagey, <br><span id="span3">screnx,screeny, <br><span id="span4">scrollTop und ScrollLeft an </span></span></span></span> <table> <tr> <th>Mouse position innen:</th> <th>X </th> <th>Y</th> <th>    </th> </tr> <tr> <td>- client:</td> <td id="clientx"></td> <td id="clienty"></td> <td>Client Viewport</td> </tr> <tr> <td>- page:</td> <td id="pagex"></td> <td id="pagey"></td> <td>Document Seite(scrollen sie nach unten um den Unteschied zu sehen)</td> </tr> <tr> <td>(scrollTop:</td> <td id="scrollTopx"></td> <td id="scrollTopy"></td> <td>Scroll oben,Scroll Links [pageY-clientY] )</td> </tr> <tr> <td>- screen:</td> <td id="screenx"></td> <td id="screeny"></td> <td>Screen</td> </tr> </table> <script> $(document).ready(function(e){ var m = ['client','page','screen']; $(document).mousemove(function(e){ weiter(e); }) $(document).scroll(function(e){ $('#span4').css('border','2px solid red'); setTimeout(function(){ $('#span4').css('border','2px solid transparent'); },100) weiter(e); }) scx=0; scy=0; function weiter(e){ for(var i=0; i<3; i++){ $('#'+m[i]).html($('#'+m[i]+'x').text(e[m[i]+'X'])+' '+ $('#'+m[i]+'y').html(e[m[i]+'Y'])); } $('#scrollTopx').html( d=$('html, body').scrollTop()); if(scx!=d){ scx=d; $('#scrollTopx').css('border','2px solid red'); setTimeout(function(){ $('#scrollTopx').css('border','2px solid black'); },100) } $('#scrollTopy').text( d1=$('html, body').scrollLeft()); if(scy!=d1){ scy=d1; $('#scrollTopy').css('border','2px solid red'); setTimeout(function(){ $('#scrollTopy').css('border','2px solid black'); },100) } } }) </script> </body> </html>