Jquery and Bootstrap not working in Firefox
javascript, jquery, twitter-bootstrap
Solution
This is a known issue with the web developer toolbar add-on in Firefox.
The author of the add-on (chrispederick.com) is aware of the problem according to a forum post on his site (edit: forum is no more), but so far no fix has been released.
Problem
I have a bootstrap button that is used to navigate in between slides. The button works perfectly in Chrome but not in Firefox. In the first slide it works fine but as soon as I move to the second slide and click the button to go to the third slide the button dissapears from the page. I've already checked and jquery-ui is loading before boostrap js. Generated HTML: ``` <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery-ui.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/jquery.fullPage.min.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script> <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script> ``` In Firebug I'm getting the following error: ``` Error: TypeError: document.getElementById(...) is null Source File: chrome://web-developer/content/overlay/javascript/overlay.js Line: 7333 ``` Here is my code: ``` <script type="text/javascript"> $(document).ready(function() { $.fn.fullpage({ fixedElements: '.btn-success', 'verticalCentered': false }); $('.btn-success').click(function(){ $.fn.fullpage.moveSectionDown(); }); }); </script> <div class='btn btn-lg btn-success'>Down</div> <div class="section " id="section0"><h1>1 Slide</h1></div> <div class="section" id="section2"><h1>2 slide</h1></div> <div class="section" id="section3"><h1>3 slide</h1></div> ``` Is this a Firefox bug or is my code wrong?