basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    ich möchte in eine Reihe auf die Startseite mehrere Begriffe schreiben: Alle, Kategorien 1, Kategorien 2, Kategorien 3 (Nicht im Menü) Standardmäßig soll "Alle" ausgewählt sein. Unter den Begriffen befinden sich mehrere Einträge. Wenn man einen der anderen Begriffe anklickt, sollen nur noch bestimmte Beiträge aufgelistet werden und nicht mehr alle. Lässt sich das umsetzen, ohne mehrere HTML-Seiten anzulegen? Kann mir jemand eine Anleitung empfehlen, vielleicht mit Code zum Kopieren? Und eventuell auch Empfehlungen für einen einfachen Effekt, der das etwas verschönert, wenn man die Kategorie wechselt? Vielleicht das verschwindende Beiträge verblasen, sich andere bewegen usw. Nur falls es nicht zu kompliziert ist, ansonsten ist erstmal nur wichtig, dass ich es technisch hinbekomme.

    Code

                                        
                                    <script src="/js_webseite/jquery.js"></script>
    <script src="/js_webseite/isotope.pkgd.js"></script>
    
    <style>
     * { box-sizing: border-box; }
    
    body {
      font-family: sans-serif;
    }
    
    /* ---- button ---- */
    
    .button {
      display: inline-block;
      padding: 10px 18px;
      margin-bottom: 10px;
      background: #EEE;
      border: none;
      border-radius: 7px;
      background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
      color: #222;
      font-family: sans-serif;
      font-size: 16px;
      text-shadow: 0 1px white;
      cursor: pointer;
    }
    
    .button:hover {
      background-color: #8CF;
      text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
      color: #222;
    }
    
    .button:active,
    .button.is-checked {
      background-color: #28F;
    }
    
    .button.is-checked {
      color: white;
      text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
    }
    
    .button:active {
      box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
    }
    
    /* ---- button-group ---- */
    
    .button-group:after {
      content: '';
      display: block;
      clear: both;
    }
    
    .button-group .button {
      float: left;
      border-radius: 0;
      margin-left: 0;
      margin-right: 1px;
    }
    
    .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
    .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
    
    /* ---- isotope ---- */
    
    .grid {
      border: 1px solid #333;
    }
    
    /* clear fix */
    .grid:after {
      content: '';
      display: block;
      clear: both;
    }
    
    /* ---- .element-item ---- */
    
    .element-item {
      position: relative;
      float: left;
      width: 100px;
      height: 100px;
      margin: 5px;
      padding: 10px;
      background: #888;
      color: #262524;
    }
    
    .element-item > * {
      margin: 0;
      padding: 0;
    }
    
    .element-item .name {
      position: absolute;
    
      left: 10px;
      top: 60px;
      text-transform: none;
      letter-spacing: 0;
      font-size: 12px;
      font-weight: normal;
    }
    
    .element-item .symbol {
      position: absolute;
      left: 10px;
      top: 0px;
      font-size: 42px;
      font-weight: bold;
      color: white;
    }
    
    .element-item .number {
      position: absolute;
      right: 8px;
      top: 5px;
    }
    
    .element-item .weight {
      position: absolute;
      left: 10px;
      top: 76px;
      font-size: 12px;
    }
    
    .element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
    .element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
    .element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
    .element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
    .element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
    .element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
    .element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
    .element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
    .element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
    .element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }
     
    </style>
    <h1>Isotope - filtering</h1>
    
    <div class="button-group filters-button-group">
      <button class="button is-checked" data-filter="*">show all</button>
      <button class="button" data-filter=".metal">metal</button>
      <button class="button" data-filter=".transition">transition</button>
      <button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
      <button class="button" data-filter=":not(.transition)">not transition</button>
      <button class="button" data-filter=".metal:not(.transition)">metal but not transition</button>
      <button class="button" data-filter="numberGreaterThan50">Schuffle</button>
      <button class="button" data-filter="ium">name ends with –ium</button>
    </div>
    
    <div class="grid">
      <div data-wert="1" class="element-item transition metal " data-category="transition">
        <h3 class="name">Mercury</h3>
        <p class="symbol">Hg</p>
        <p class="number">80</p>
        <p class="weight">200.59</p>
      </div>
      <div  data-wert="2" class="element-item metalloid " data-category="metalloid">
        <h3 class="name">Tellurium</h3>
        <p class="symbol">Te</p>
        <p class="number">52</p>
        <p class="weight">127.6</p>
      </div>
      <div  data-wert="3" class="element-item post-transition metal " data-category="post-transition">
        <h3 class="name">Bismuth</h3>
        <p class="symbol">Bi</p>
        <p class="number">83</p>
        <p class="weight">208.980</p>
      </div>
      <div  data-wert="4" class="element-item post-transition metal " data-category="post-transition">
        <h3 class="name">Lead</h3>
        <p class="symbol">Pb</p>
        <p class="number">82</p>
        <p class="weight">207.2</p>
      </div>
      <div  data-wert="5" class="element-item transition metal " data-category="transition">
        <h3 class="name">Gold</h3>
        <p class="symbol">Au</p>
        <p class="number">79</p>
        <p class="weight">196.967</p>
      </div>
      <div  data-wert="6" class="element-item alkali metal " data-category="alkali">
        <h3 class="name">Potassium</h3>
        <p class="symbol">K</p>
        <p class="number">19</p>
        <p class="weight">39.0983</p>
      </div>
      <div  data-wert="7" class="element-item alkali metal " data-category="alkali">
        <h3 class="name">Sodium</h3>
        <p class="symbol">Na</p>
        <p class="number">11</p>
        <p class="weight">22.99</p>
      </div>
      <div  data-wert="8" class="element-item transition metal " data-category="transition">
        <h3 class="name">Cadmium</h3>
        <p class="symbol">Cd</p>
        <p class="number">48</p>
        <p class="weight">112.411</p>
      </div>
      <div  data-wert="9" class="element-item alkaline-earth metal " data-category="alkaline-earth">
        <h3 class="name">Calcium</h3>
        <p class="symbol">Ca</p>
        <p class="number">20</p>
        <p class="weight">40.078</p>
      </div>
      <div  data-wert="10" class="element-item transition metal " data-category="transition">
        <h3 class="name">Rhenium</h3>
        <p class="symbol">Re</p>
        <p class="number">75</p>
        <p class="weight">186.207</p>
      </div>
      <div  data-wert="11" class="element-item post-transition metal " data-category="post-transition">
        <h3 class="name">Thallium</h3>
        <p class="symbol">Tl</p>
        <p class="number">81</p>
        <p class="weight">204.383</p>
      </div>
      <div  data-wert="12" class="element-item metalloid " data-category="metalloid">
        <h3 class="name">Antimony</h3>
        <p class="symbol">Sb</p>
        <p class="number">51</p>
        <p class="weight">121.76</p>
      </div>
      <div  data-wert="13" class="element-item transition metal " data-category="transition">
        <h3 class="name">Cobalt</h3>
        <p class="symbol">Co</p>
        <p class="number">27</p>
        <p class="weight">58.933</p>
      </div>
      <div  data-wert="14" class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
        <h3 class="name">Ytterbium</h3>
        <p class="symbol">Yb</p>
        <p class="number">70</p>
        <p class="weight">173.054</p>
      </div>
      <div  data-wert="15" class="element-item noble-gas nonmetal " data-category="noble-gas">
        <h3 class="name">Argon</h3>
        <p class="symbol">Ar</p>
        <p class="number">18</p>
        <p class="weight">39.948</p>
      </div>
      <div  data-wert="16" class="element-item diatomic nonmetal " data-category="diatomic">
        <h3 class="name">Nitrogen</h3>
        <p class="symbol">N</p>
        <p class="number">7</p>
        <p class="weight">14.007</p>
      </div>
      <div  data-wert="17" class="element-item actinoid metal inner-transition " data-category="actinoid">
        <h3 class="name">Uranium</h3>
        <p class="symbol">U</p>
        <p class="number">92</p>
        <p class="weight">238.029</p>
      </div>
      <div  data-wert="18" class="element-item actinoid metal inner-transition " data-category="actinoid">
        <h3 class="name">Plutonium</h3>
        <p class="symbol">Pu</p>
        <p class="number">94</p>
        <p class="weight">(244)</p>
      </div>
    </div>
    <script>
      // external js: isotope.pkgd.js
    
    // init Isotope
    var $grid = $('.grid').isotope({
      itemSelector: '.element-item',
      layoutMode: 'fitRows'
    });
     
     
    var filterFns = {
     
      numberGreaterThan50: function() {
     
         
     
    // h1=this; 
      
      // h=this.getAttribute('data-wert');
       was=Math.floor(Math.random() * Math.floor(18));
     
         return was;
     
      },
     
      ium: function() {
        var name = $(this).find('.name').text();
        return name.match( /ium$/ );
      }
    };
    // bind filter button click
    $('.filters-button-group').on( 'click', 'button', function() {
      var filterValue = $( this ).attr('data-filter');
      // use filterFn if matches value
      filterValue = filterFns[ filterValue ] || filterValue;
      $grid.isotope({ filter: filterValue });
    });
    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });
    
    </script>