basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Das wäre doch einfach nee Display None und block Funktion oder nicht. Aber das kannst du ja nicht meinen, das wäre ja zu einfach. Weil dann brauchst du ja alle Klassen auf Display None und die ersten beiden blendest du dann wieder ein. Mit dem Klick auf Button lässt du dann wieder alles anzeigen mit Display block. Oder verstehe ich dich irgendwie falsch?

    Code

                                        
                                      <script src="/js_webseite/jquery.js"></script>
    <style> 
    *{ 
    margin:0;
     padding:0;
     }
      .kommentare{
        height:20px;
      }
    #kommentarspalte{
      width:100%;
      display:inline-block;
      background:lightgrey;
      min-height:40px;
      height:40px;
      overflow:hidden;
      border:2px solid red;
    }
    #mehr{
      position:fixed;
      left:600px;
      top:20px;
      font-size:30px;
      text-align:center;
    }
    textarea{
      text-align:center;
      height:100px;
      width:60%;
      margin-left:20%;
    }
    #komsend{
      text-align:center;
                   width:300px;
                   margin-left:calc(50% - 150px);
                   height:30px;
                   font-size:25px;
                   border-radius:5px;
                   border:2px solid black;
                   box-shadow:2px 2px 2px;
                  }
                  </style>
    <div id="kommentarspalte">
        <div id="helfer">
            <div id="kommentare1" class="kommentare">Hallo</div>
            <div id="kommentare2" class="kommentare">tschüss</div>
        </div>
    </div>
    <span>Zeige die letzten Einträge</span>
        <button class="but" data-wert="2" id="a2">2</button>
        <button class="but" data-wert="3" id="a3">3</button>
        <button class="but" data-wert="4" id="a4">4</button>
        <button class="but" data-wert="5" id="a5">5</button>
        <button class="but" data-wert="6" id="a6">6</button>
        <button class="but" data-wert="7" id="a7">7</button>
        <button class="but" data-wert="8" id="a8">8</button>
        <button class="but" data-wert="9" id="a9">9</button>
    <br>
    <textarea id="kom"></textarea><br>
    <button id="send">senden</button>
          
    <script>
      
      var d=2;
      var  kommentarspalte=document.getElementById('helfer');
    document.getElementById('send').addEventListener('click',function(){ 
    
      var kommi = document.createElement("div");  
      d++; 
      kommi.id="kommentare"+d; 
      kommi.innerHTML=document.getElementById("kom").value+' test '+d;  
      document.getElementById("kom").value='';
      kommentarspalte.appendChild(kommi); 
      
      
      
      buttons();   
      
      if(d>9){   
        f=d-9; 
        $('#kommentare'+f).remove();  
      } 
      
    })  
    
    
    $('.but').click(function(){  
      da=$(this).data('wert'); 
      pix=da*20;  
      $('#kommentarspalte').css('height',pix+'px');
      $('#helfer').css('marginTop','-'+pix1+'px');
    }); 
    function buttons(){   
      for(a1=2;a1<=d;a1++){  
        $('#a'+a1).prop("disabled",false);
      }   
      for(a=d;a<=9;a++){ 
        $('#a'+a).prop("disabled",true);
      } 
    } buttons()    
    </script>