basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>