testing uses

In this example below you will see how to do a testing uses with some HTML / CSS and Javascript

$(document).foundation();// Equal height columns var dataMatchHeight = function(){ var isMobile = ($(window).width() <= 767);

Thumbnail
This awesome code was written by Clairerospike, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Clairerospike ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>testing uses</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://fd.aerospike.com/wp-content/themes/new-aerospike/style.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <div class="row">
    <fieldset class="controls" id="resource-sub-nav">
      <div class="small-10 medium-10 columns" id="controlsfilter">
        <div data-magellan-expedition="fixed">
          <ul class="sub-nav five-tabs">
            <li style="list-style: none"><label>Filter:</label></li>

            <li>
              <a class="filter active" data-filter="all">All</a>
            </li>

            <li>
              <a class="filter" data-filter=".bigdata">Big Data</a>
            </li>

            <li>
              <a class="filter" data-filter=".deploy">Ops and Deploy</a>
            </li>

            <li>
              <a class="filter" data-filter=".develop">Developer Tools</a>
            </li>

            <li>
              <a class="filter" data-filter=".ecommerce">eCommerce</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="small-2 columns" id="controlslayout">
        <label>Layout:</label>

        <div class="controlslayout">
          <input checked="checked" class="grid" id="grid" name="layout" type=
          "radio"> <label class="fa fa-th" for="grid" id="labelgrid" style=
          "font-style: italic"></label> <input class="list" id="list" name=
          "layout" type="radio"> <label class="fa fa-bars" for="list" id=
          "labellist" style="font-style: italic"></label>
        </div>
      </div>
    </fieldset>
  </div>

  <div class="small-12 columns small-centered">
    <div class="container" id="Container">
      <div class="row" data-equalizer="foo">
        <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"
        style="border:1px solid #0000ff;">
          <li class="mix bigdata">
            <div class="medium-12 column" data-equalizer-watch="foo" style=
            "border:1px solid #bbb;">
              <div class="panel" style="border:1px solid #32cd32;">
                <div class="successLogo"><img alt="Hadoop and Aerospike" class=
                "aligncenter size-full wp-image-19147" src=
                "https://s3-us-west-1.amazonaws.com/aerospike-fd/wp-content/uploads/2015/06/Hadoop_logo.png"></div>
              </div>

              <div class="row" data-equalizer="bar" style=
              "border:1px solid #F80000;">
                <div class="medium-12 columns" data-equalizer-watch="bar"
                style="border:1px solid #9900cc;">
                  <div class="panel" style="border:1px solid #f80000;">
                    <h6 class="success-story-name" style=
                    "border: 1px solid #F80000; text-align: center"><a class=
                    "linked-text" href=
                    "https://github.com/aerospike/aerospike-hadoop" target=
                    "_blank">Aerospike &amp; Hadoop</a></h6>

                    <p class="lead">Hadoop InputFormat and OutputFormat
                    implementations using Aerospike, allowing direct Hadoop use
                    of Aerospike data, including secondary index
                    support.</p><span class="label">Big Data</span>
                    <span class="label">Java</span> <span class=
                    "label">Hadoop</span>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li class="mix bigdata">
            <div class="medium-12 columns" data-equalizer-watch="foo" style=
            "border:1px solid #bbb;">
              <div class="panel" style="border:1px solid #32cd32;">
                <div class="successLogo"><img alt="DataTorrent and Aerospike"
                class="aligncenter size-full wp-image-19197" src=
                "https://s3-us-west-1.amazonaws.com/aerospike-fd/wp-content/uploads/2015/06/DataTorrent192x40.png"></div>
              </div>

              <div class="row" data-equalizer="bar" style=
              "border:1px solid #F80000;">
                <div class="medium-12 columns" data-equalizer-watch="bar"
                style="border:1px solid #9900cc;">
                  <div class="panel" style="border:1px solid #f80000;">
                    <h6 class="success-story-name" style=
                    "border: 1px solid #F80000; text-align: center"><a class=
                    "linked-text" href=
                    "https://github.com/DataTorrent/Malhar/tree/master/contrib/src/main/java/com/datatorrent/contrib/aerospike">
                    DataTorrent and Aerospike</a></h6>

                    <p class="lead" style="text-align: left"><a class=
                    "linked-text" href="https://github.com/DataTorrent/Malhar"
                    target="_blank">Malhar</a> from DataTorrent has created
                    adapters that read data from Aerospike through its
                    APIs.</p><span class="label">Big Data</span> <span class=
                    "label">Hadoop</span> <span class="label">Real-time</span>
                    <span class="label">Analytics</span>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li class="mix deploy">
            <div class="medium-12 columns" data-equalizer-watch="foo" style=
            "border:1px solid #bbb;">
              <div class="panel" style="border:1px solid #32cd32;">
                <div class="successLogo"><img alt="Spark and Aerospike" class=
                "aligncenter size-full wp-image-19183" src=
                "https://s3-us-west-1.amazonaws.com/aerospike-fd/wp-content/uploads/2015/06/spark-logo.png"></div>
              </div>

              <div class="row" data-equalizer="bar" style=
              "border:1px solid #F80000;">
                <div class="medium-12 columns">
                  <div class="panel" style="border:1px solid #f80000;">
                    <h6 class="success-story-name" style=
                    "border: 1px solid #F80000; text-align: center"><a class=
                    "linked-text" href=
                    "https://github.com/sasha-polev/aerospark" target=
                    "_blank">Aerospark</a></h6>

                    <p class="lead">Sasha Polev contributes a connector using
                    the <a class="linked=text" href="https://spark.apache.org/"
                    target="_blank">Apache Spark</a> query and computation
                    system. The Aerospark connector allows easily running a
                    variety of queries directly on Aerospike, and a path for
                    running Spark SQL directly on Aerospike.</p><span class=
                    "label">Big Data</span> <span class="label">Spark</span>
                    <span class="label">Hadoop</span> <span class=
                    "label">Java</span>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li class="mix bigdata">
            <div class="medium-12 columns" data-equalizer-watch="foo" style=
            "border:1px solid #bbb;">
              <div class="panel" style=
              "border:none; border:1px solid #32cd32;">
                <div class="successLogo"><img alt="Spark and Aerospike" class=
                "aligncenter size-full wp-image-19183" src=
                "https://s3-us-west-1.amazonaws.com/aerospike-fd/wp-content/uploads/2015/06/spark-logo.png"></div>
              </div>

              <div class="row" data-equalizer="bar" style=
              "border:1px solid #F80000;">
                <div class="medium-12 columns" data-equalizer-watch="bar"
                style="border:1px solid #9900cc;">
                  <div class="panel" style="border:1px solid #f80000;">
                    <h6 class="success-story-name" style="text-align: center">
                    <a class="linked-text" href=
                    "https://github.com/Stratio/deep-spark/tree/master/deep-aerospike"
                    target="_blank">Stratio's DeepData</a></h6>

                    <p class="lead"><a class="linked-text" href=
                    "https://github.com/Stratio/deep-spark" target=
                    "_blank">Stratio's DeepData</a> is a thin integration layer
                    between Apache Spark and Aerospike, along with other NoSQL
                    data stores.</p><span class="label">Big Data</span>
                    <span class="label">Spark</span> <span class=
                    "label">Hadoop</span> <span class="label">Java</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="row" data-equalizer="foo">
      <div class="container" id="Container">
        <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
          <li class="mix bigdata">
            <div class="medium-12 columns" data-equalizer-watch="foo" style=
            "border:1px solid #bbb;">
              <div class="panel clearfix" style="border:none;">
                <div class="successLogo"><img alt="Storm and Aerospike" class=
                "aligncenter size-full wp-image-19182" src=
                "https://s3-us-west-1.amazonaws.com/aerospike-fd/wp-content/uploads/2015/06/storm.png"></div>
              </div>

              <div class="medium-12 columns" data-equalizer="bar">
                <div class="panel" data-equalizer-watch="bar" style=
                "border:none;">
                  <p class="title" style="text-align: center"><a class=
                  "linked-text" href="/community/labs/storm_aerospike.html"
                  target="_blank">Apache Storm and Aerospike</a> - Aerospike
                  provides several sample connectors and a test application for
                  using Aerospike as a persistent store with Apache
                  Storm.</p><span class="label">Big Data</span> <span class=
                  "label">Storm</span> <span class="label">Hadoop</span>
                </div>
              </div>
            </div>
          </li>

          <li class="mix bigdata">
            <div class="medium-12 columns" data-equalizer-watch="foo" style=
            "border:1px solid #bbb;">
              <div class="panel clearfix" style="border:none;">
                <div class="successLogo"><img alt="Hadoop and Aerospike" class=
                "aligncenter size-full wp-image-19147" src=
                "https://s3-us-west-1.amazonaws.com/aerospike-fd/wp-content/uploads/2015/06/Hadoop_logo.png"></div>
              </div>

              <div class="medium-12 columns" data-equalizer="bar">
                <div class="panel clearfix" data-equalizer-watch="bar" style=
                "border:none;">
                  <p class="title" style="text-align: center"><a class=
                  "linked-text" href=
                  "https://github.com/aerospike/aerospike-hadoop" target=
                  "_blank">Aerospike & Hadoop</a></p>

                  <p class="lead">Hadoop InputFormat and OutputFormat
                  implementations using Aerospike, allowing direct Hadoop use
                  of Aerospike data, including secondary index
                  support.</p><span class="label">Big Data</span> <span class=
                  "label">Java</span> <span class="label">Hadoop</span>
                </div>
              </div>
            </div>
          </li>

          <li class="mix bigdata">
            <div class="medium-12 columns" data-equalizer-watch="foo" style=
            "border:1px solid #bbb;">
              <div class="panel clearfix" style="border:none;">
                <div class="successLogo"><img alt="Storm and Aerospike" class=
                "aligncenter size-full wp-image-19182" src=
                "https://s3-us-west-1.amazonaws.com/aerospike-fd/wp-content/uploads/2015/06/storm.png"></div>
              </div>

              <div class="medium-12 columns" data-equalizer="bar">
                <div class="panel" data-equalizer-watch="bar" style=
                "border:none;">
                  <p class="title" style="text-align: center"><a class=
                  "linked-text" href="/community/labs/storm_aerospike.html"
                  target="_blank">Apache Storm and Aerospike</a> - Aerospike
                  provides several sample connectors and a test application for
                  using Aerospike as a persistent store with Apache
                  Storm.</p><span class="label">Big Data</span> <span class=
                  "label">Storm</span> <span class="label">Hadoop</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://fd.aerospike.com/wp-content/themes/new-aerospike/js/foundation.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Clairerospike/testing-uses-OVjmQm */

$(document).foundation({
  equalizer : {
    // Specify if Equalizer should make elements equal height once they become stacked.
    equalize_on_stack: true
  }
});

$(function(){
  $('#Container').mixItUp();
});
$('input').on('click',function() {
    if ($(this).hasClass('grid')) {
        $('#Container ul').removeClass('small-block-grid-1').addClass('small-block-grid-1 medium-block-grid-3 large-block-grid-3');
    }
    else if($(this).hasClass('list')) {
        $('#Container ul').removeClass('small-block-grid-1 medium-block-grid-3 large-block-grid-3').addClass('small-block-grid-1');
    }
    $('#resource-sub-nav ul > li').removeClass();
});

Comments