CODEWITHSUNDEEP
javascriptjqueryhtmljquery-plugins
Chris
Chris

Reputation: 5804

How to create a floating header using jquery.floathead?

I've came across the plugin called jquery.floatThead which is perfect for floating the table header as the user scrolls down, but I can't get this plugin to work for some reason.

See below for my html and javascript and here for my codepen.

Javascript: 

var $table = $('Table1');
$table.floatThead();

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.10/jquery.floatThead.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.10/jquery.floatThead-slim.min.js"></script>



<table id="Table1">
  <thead>
    <tr>
      <th>Time</th>
      <th>Ideas</th>
      <th>Likes</th>
      <th>Sent to</th>
      <th>Project related</th>
      <!--
                                        <th>like or dislike</th>
                                        -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2014-10-31</td>
      <td>Content1</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content3</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-09-31</td>
      <td>Content4</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content1</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content3</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-09-31</td>
      <td>Content4</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content1</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content3</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-09-31</td>
      <td>Content4</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 187

Answers (1)

lesssugar
lesssugar

Reputation: 16181

You missed the hash sign in your selector. Should be:

$('#Table1');

At least in the pen.

Upvotes: 1

Related Questions