Using Tether Javascript Library causing exception

css, html, javascript, tether

Solution

Tether's options define `element` and `target` as being a DOM or jQuery element (in quite a loose sense of the word), not a string.

You need to pass a jQuery object to Tether, like this:

$(document).ready(function() {
    new Tether({
        element: $('.footer'),
        target: $('.container'),
        attachment: 'top left',
        targetAttachment: 'bottom left'
    });
});

Also make sure the elements are on the page when you initialise your Tether instance.

Problem

I am working on a new website and I want to include a footer at the bottom of a container div. I found a javascript library called Tether (http://github.hubspot.com/tether/) but I am having a problem with the implementation. Below is my HTML code ``` <html> <head> <title>Bug Reporting</title> <link href="StyleSheet.css" type="text/css" rel="stylesheet" /> <script src="includes/jquery.js"></script> <script src="includes/tether/tether.js"></script> <script> $(document).ready(function() { new Tether({ element: '.footer', target: '.container', attachment: 'top left', targetAttachment: 'bottom left' }); }); </script> </head> <body> <div class="container"> <header> This is the body </header> <div id="content"> This is the content<br /> </div> <div class="footer1"> This is the footer </div> </div> </body> </html> ``` Below is my StyleSheet ``` html, body { font-family: arial; margin: 0; padding: 0; } header { background-color: red; width: 100%; height: 80px; } .container { background-color: yellow; height: calc(100% - 80px); width: 100%; } #content { background-color: blue; width: 1024px; margin-left: auto; margin-right: auto; height: auto; } .footer1 { position: absolute; background-color: green; width: 100%; height: 80px; } ``` The problem is when I load the page I get an exception within the tether library Uncaught TypeError: Cannot read property 'classList' of null Thanks for any help you can provide.

Original source