Archiv-Modus von Basti1012 Lösungspage

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

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>

basti1012.bplaced.net

Auslesen von pagex, clientx, screenx, scrolltop positionen

Code