lundi 20 avril 2015

bootstrap autoHideNavbar causes TypeError: undefined is not a function

Got a strange issue, got a straight (enough) navbar that I am trying to hide, but when I call the autoHidingNavbar I get the bellow error as soon as I call there two commands (or either of them).

<script>
    $('.navbar-fixed-top').autoHidingNavbar('setAnimationDuration',300);
    //$('.navbar-fixed-top').autoHidingNavbar('hide');
</script>

The ERROR:

TypeError: undefined is not a function

    at eval (eval at <anonymous> (http://ift.tt/1G7CzMp), <anonymous>:2:28)
    at eval (native)
    at Function.n.extend.globalEval (http://ift.tt/1G7CzMp)
    at n.fn.extend.domManip (http://ift.tt/1JhOAMH)
    at n.fn.extend.append (http://ift.tt/1G7CzMr)
    at null.<anonymous> (http://ift.tt/1JhODbo)
    at n.access (http://ift.tt/1JhOAMN)
    at n.fn.extend.html (http://ift.tt/1JhODbq)
    at link (http://ift.tt/1G7CzMt)
    at invokeLinkFn (http://ift.tt/1JhOAMR) <div ng-view="" class="ng-scope">

I found some indicators that earlier versions of bootstrap or jquery could cause this, or the order they are loaded in. So as for the order, all OK:

<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/bower_components/angular/angular.js'></script>
<script type="text/javascript" src='/bower_components/angular-route/angular-route.js'></script>
<script type="text/javascript" src='/bower_components/angular-route/angular-route.js'></script>
<script type="text/javascript" src='/bower_components/angular-resource/angular-resource.js'></script>
<script type="text/javascript" src='/bower_components/jquery/dist/jquery.js'></script>
<script type="text/javascript" src='/bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
<script type="text/javascript" src='/javascripts/BabyPadz.js'></script>

And the menu section it self

<footer>
    <div class="navbar navbar-topbaby navbar-fixed-bottom">
        <div class="container text-center">
            <div class="center-block">
                <div class="navbar-header">
                    <a href="/music"><button type="button" class="btn btn-xlarge" ng-style="{'background-color' : bgMusic}">MUSIC</button></a>
                    <a href="config"><button type="button" class="btn btn-xlarge" ngStyle={'background-color' :bgConfig}>CONFIG</button></a>
                    <button type="button" class="btn btn-xlarge" ngStyle={'background-color' :bgLogin}>LOGIN</button>
                    <a href="/about"><button type="button" class="btn btn-xlarge" ngStyle={'background-color' :bgAbout}>ABOUT</button></a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bottom-collapse"> <!-- NOTE! data-target was changed to .bottom-collapse -->
                </div>
            </div>
            <div class="navbar-collapse collapse bottom-collapse"> <!-- NOTE! The extra bottom-collapse class put on here -->
            </div><!--/.nav-collapse -->
        </div>
    </div>
</footer>

Update

After feedback, I cleaned up the script loads

    <script type="text/javascript" src='/bower_components/jquery/dist/jquery.js'></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/bower_components/angular/angular.js'></script>
<script type="text/javascript" src='/bower_components/angular-route/angular-route.js'></script>
<script type="text/javascript" src='/bower_components/angular-resource/angular-resource.js'></script>
<script type="text/javascript" src='/javascripts/BabyPadz.js'></script>

And changed the call to

    $('.navbar-fixed-bottom').autoHidingNavbar('setAnimationDuration',300);
    $('.navbar-fixed-bottom').autoHidingNavbar('hide');

Alas no avail

UPDATE:

One step forward, no more error message, autoHidingNavbar is a module to bootstrap. Had missed that add

Strangely enough, I now get no error message but the bar still don't hide..

Aucun commentaire:

Enregistrer un commentaire