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..

How to reset grid paging content on resolution change?

I have used a grid template from BootStrap and the paging for that grid is showing as per the attached image 1. Now when i change the screen resolution of the browser the paging content gets break into two lines as per attached image 2 instead of in a single line.

But once i refresh the page it loads the paging correctly as the image 3. But i want that content right after changing of resolution.

Below is the code of JS by using React for that paging class var ul = React.DOM.ul({className: 'pagination pagination-sm', role: 'menubar', 'aria-label': globalizationFactory.translate('STORMS_PAGER'), key: 'pager_container'}, [firstLi, prevLi, this.getPages(currentPageIndex + 1, totalPages), nextLi, lastLi]);

        var mainClass = this.props.className ? 'container-fluid ' + this.props.className : 'container-fluid';
        return React.DOM.div({className: mainClass,key: 'pager_wrapper'},
          React.DOM.div({className: 'row',key: 'pager_wrapper_inner'},
            React.DOM.div({className: 'col-sm-12', style: {textAlign: 'center'},key: 'pager_innerWrapper'}, ul)));

Any suggestion will be helpful.

Image 1: enter image description here Image 2:

enter image description here

Image 3:

enter image description here

How can i reset a selectpicker after hide a modal?

(sorry my english)

Hey , well i have a select picker:

                    +                       
                    '<select class="selectpicker" id="select_seleccionar_proyecto_id">'
                    +
                    '<option value="0">Seleccione..</option>'
                    +                           
                    '<option value="1">Tarea número 1</option>'
                    +                           
                    '<option value="2">Tarea número 2</option>'
                    +                       
                    '<option value="3">Tarea número 3</option>'
                    +
                    '<option value="4">Tarea número 4</option>'
                    +                           
                    '<option value="5">Tarea número 5</option>'
                    +                       
                    '<option value="6">Tarea número 6</option>' 
                    +                   
                    '</select>'         

this select box is in a modal, and when i close this modal, the select box is like the last time , example: i select "tarea numero 4", i close the modal and open the modal and "tarea numero 4" is selected. Well, i have a method that i call after hide the modal and when i open i need "seleccionar..", but nothing work..

¿what is the best option in jquery? thanks

HideModal: function(){
    var self = this;
    $('#modal_seleccionar_tarea_id').modal('hide');
    self.LimpiarModalTarea();
    },

LimpiarModalTarea: function(){
var self = this;

 $('#select_seleccionar_proyecto_id').val("0");},

PD : this work in other modal, but with textarea.

hide() not working as I was hoping

Am I doing something fundamentally wrong here? The original idea is if you click on any object on the carousel, info will fadeIn() at the bottom. I'm trying to understand why isn't allmsgs.hide() not functioning at all while swapping that line to m1.hide() to hide singular info works. I was really hoping that allmsgs.hide() would work to make it a bit more user-error-proof.

$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
    autoPlay: 20000, 

        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
        StopOnHover : true,
        lazyEffect : 5000,
        mouseDrag : true
    });

    $('#panel1').on('click',function(event){
    var pan1 = $('#panel1');
    var m1 = $('#message1');
    var allpans = $('.panels');
    var allmsgs = $('.messages');
    allmsgs.hide();
    if(pan1.hasClass('clicked')){
    allpans.css('background','#bebec5').removeClass('clicked');
        }   else{
            m1.fadeIn('slow');
            pan1.css('background','#aec6d7').addClass('clicked');
            }
    });

    $('#panel2').on('click',function(event){
    var pan2 = $('#panel2');
    var m2 = $('#message2');
    var allpans = $('.panels');
    var allmsgs = $('.messages');
    allmsgs.hide();
    if(pan2.hasClass('clicked')){
    allpans.css('background','#bebec5').removeClass('clicked');
        }   else{
            m2.fadeIn('slow');
            pan2.css('background','#aec6d7').addClass('clicked');
            }
    });

    $('#panel3').on('click',function(event){
    var pan3 = $('#panel3');
    var m3 = $('#message3');
    var allpans = $('.panels');
    var allmsgs = $('.messages');
    allmsgs.hide();
    if(pan3.hasClass('clicked')){
    allpans.css('background','#bebec5').removeClass('clicked');
        }   else{
            m3.fadeIn('slow');
            pan3.css('background','#aec6d7').addClass('clicked');
            }
    });

});

image full width on column with Bootstrap

I want the image on the left to be with no padding or margin as the photo below in the jsfiddle

http://ift.tt/1DvHjob

<div class="box-blanco">
<div class="row">

<div class="col-xs-2 col-sm-2 col-md-3 col-lg-2 hidden-xs">
<a href="salas-estudios/caravaca-ds55">
<img src="http://ift.tt/1Frnu5J" alt="Caravaca" width="85" height="68"></a>
</div>

<div class="col-xs-10 col-sm-10 col-md-9 col-lg-10">
<span class="text-muted visible-xs pull" style="color: #A6A6A6; font-size: 12px;"><i class="fa fa-fw fa-map-marker"></i>Chacarita</span>
<h5><a href="salas-estudios/caravaca-ds55" class="text-inverse" style="color: #6C6C6C; font-weight:400;">Test Title</a></h5>
<div class="col-separador-s"></div>
<p class="text-muted" style="font-size: 12px;">
<span class="text-muted hidden-xs" style="color: #A6A6A6;"><i class="fa fa-fw fa-map-marker"></i>Chacarita</span>&nbsp;
<span class="text-muted" style="color: #A6A6A6;"><i class="fa fa-fw fa-phone"></i>4000-8531</span>&nbsp;
<span class="text-muted" style="color: #A6A6A6;"><i class="fa fa-fw fa-mobile fa-lg"></i>15-4000-7713</span></p>
</div>

</div>
</div>

Thanks in advance

.slideToggle round button cleanup?

I just found out how to do this a couple of hours ago (thank you brett!), and now I just need help cleaning it up. When the button is clicked it expands, but the button either gets stuck not all the way up, or you can see edges when it expands. I also have a button stuck behind the main 'Share' button.

http://ift.tt/1JocVk1

    .share-button-group {
        position: fixed;
        bottom: 60px;
        right: 30px;
        z-index: 999;

        a + a {
            margin-top: @padding-small-horizontal;
        }
    }

    .share-button-expand {
        .share-button-variant(@gray-light, '\f1e0');
    }

    .share-button-facebook {
        .share-button-variant(#3b5998, '\f09a');
    }

And here it is in our Jade-esque markup (extremely similar, just small tweaks)

if share
  .share-button-group.shareItems(style='display:none;')
    a.share-button-facebook(data-share="facebook")
      span.sr-only Share on Facebook 
  .share-button-group.expandBtn  
    a.share-button-expand(href="javascript:;")
      span.sr-only Share

and the JS:

define(['jquery'], function($) {
  $(document).ready(function() {

    $('.expandBtn').on( "click", function() {
      $('.shareItems').slideToggle( "slow", function() {

      });
    });

  });
});

This is how the buttons are set up in LESS. I'm working in a Jade like language, with Bootstrap as well. I need this done by tomorrow and have limited time, so any help is amazing! Thanks!

Bootstrap fixed navbar with scrolllspy

I am trying to implement a top navbar that is fixed to the top with links that work with a scrollspy. My implementation does not seem to work as expected.

The links seem to work and go to the proper section but the highlight of the links never change as you scroll. "mdo" is always selected.

<html>
    <head>
       <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<style>
    .section {
        height: 100%;
        padding-top: 51px;
    }
</style>
</head>

<body data-spy="scroll" data-target="#navbar-example2" style="position: relative;">

<nav id="navbar-example2" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#fat">@fat</a></li>
            <li class=""><a href="#mdo">@mdo</a></li>
        </ul>
    </div>
</nav>

<div id="fat" class="section">
    <h4 >@fat</h4>
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</div>
<div id="mdo" class="section">
    <h4 id="mdo">@mdo</h4>
    <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
</div>

</body>

 </html>