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>

Bootstrap mobile first and media query grouping

I am using latest bootstrap for a project. I am confused about the bootstraps mobile first approch and the less file structure

my file structurte is

---css
---js
---less
---mixins
-----..
-----...
----Custom_files
---------main.less
--------- component1.less
--------- component2.less

All my custom less files live in Custom files folder. I am trying to generate a different stylesheet for custom css without touching the bootstrap.min.css at all

In main.less file i have imported all the component less files (component1.less, components.less)

To achieve mobile first approch, in each component file I have included mobile styles as default styles rules and the desktop styles at last of the file

/****Default Styles go here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

My question is When the css is generated it looks like a mess as a combination of default css and media queries instead of having default css first and then media queries

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/
......

Is this ok? Or if it is wrong what is the proper way of doing ths

how groups jqGrid columns dynamically using bootstrap (expand collapse, drag and drop)?

I found an example of how to group the columns in jqGrid, in the example used jquery.ui and works well. Demo: http://ift.tt/1HNjqOZ

$('tr.ui-jqgrid-labels th div') .draggable({
    appendTo: 'body',
    helper: 'clone'
});

$('#groups ol').droppable({
    activeClass: 'ui-state-default',
    hoverClass: 'ui-state-hover',
    accept: ':not(.ui-sortable-helper)',
    drop: function(event, ui) {
        var $this = $(this);
        $this.find('.placeholder').remove();
        var groupingColumn = $('<li></li>').attr('data-column', ui.draggable.attr('id').replace('jqgh_' + gridId + '_', ''));
        $('<span title="Quitar este grupo" class="ui-icon ui-icon-close cerrargrupo"></span>').click(function() {
            $(this).parent().remove();
            $('#' + gridId).jqGrid('groupingRemove');
            $('#' + gridId).jqGrid('groupingGroupBy', $('#groups ol li:not(.placeholder)').map(function(){ return $(this).attr('data-column'); }).get());
            if ($('#groups ol li:not(.placeholder)').length === 0) {
                $('<li class="placeholder">Arratre la columan hacia aquí</li>').appendTo($this);
            }
        }).appendTo(groupingColumn);
        groupingColumn.append(ui.draggable.text());
        groupingColumn.appendTo($this);
        $('#' + gridId).jqGrid('groupingRemove');
        $('#' + gridId).jqGrid('groupingGroupBy', $('#groups ol li:not(.placeholder)').map(function(){ return $(this).attr('data-column'); }).get());
    }
}).sortable({
        items: 'li:not(.placeholder)',
        sort: function() {
            $( this ).removeClass('ui-state-default');
        },
        stop: function() {
            $('#' + gridId).jqGrid('groupingRemove');
            $('#' + gridId).jqGrid('groupingGroupBy', $('#groups ol li:not(.placeholder)').map(function(){ return $(this).attr('data-column'); }).get());
        }
});

And therefore I have tried to adapt it to bootstrap. Demo: http://ift.tt/1aM2VWa

But I do not know how to make the tree type(expand collapse), since I know not how to do bootstrap.enter image description here

how I can make the effect of expanding and collapsing using bootstrap? Any ideas?

Issue with Bootstrap grid alignment in smaller viewports

On the following website: http://ift.tt/1D7fy4I - there is a feature on the home page - 9 red boxes inside a .row with some copy text. However the following issue is occuring as shown in the screenshot:

I don't understand why each of the <div class="col-md-4 col-sm-6"> are not appearing in neat rows of 2 and why some are jutting out visually such as the "Facial recogniton" and "Green Screen" boxes. Please may I have some help resolving the issue and an explanation? Thank you.

enter image description here

Here is the HTML:

<div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-camera"></i> Flawless Design</h4>
        Our photo booths feature Canon DSLR cameras that capture the images with great colour and picture quality.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-video-camera"></i> HD Video</h4>
        Our photo booths give users the opportunity to record 1080p high definition video during their event.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-picture-o"></i> Bespoke Prints</h4>
        Our booths feature a state-of-the-art Mitsubishi Dye Sub printing system to give you amazing, professional quality prints.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4>Prop Box</h4>
        Our Booths come with a customised prop box bursting with fun items to enhance the photo booth experience.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-smile-o"></i> Facial Recognition</h4>
        The latest facial recognition technology allows people in the booth to apply a wide variety of digital props on their faces.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-hand-o-up"></i> Touch Screen</h4>
        Our Booths are operated by a large, user-friendly touch screen. This allows you to discover all the exciting features easily.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-user"></i> Booth Attendant</h4>
        A professional booth attendant will be avail throughout the evening to assist with an queries.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-users"></i> Green Screen</h4>
        Green screen technology allows you to customise the backgrond of photos and videos. Including 3D.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-facebook-square"></i> Facebook Upload</h4>
        Share your booth photos with friends instantly on Facebook from our photo booth.
      </div>
    </div>
</div>

Bootstrap mega menu levels

I have a bootstrap mega menu, what should I do if I want it to show only the top menu and hide other menu level when it collapsed. Thank you

Javascript button - Upon click, other buttons slide up from behind it?

I'm very new to JS and JQuery, and I'm trying to finish up a request that involves buttons that slide up. Steps:

  1. User clicks on 'Expand' button.
  2. Activates JS, 4 social media buttons slide upwards. User than can click one of the buttons to open a pop up to share the page (this is already set up).
  3. User can close this menu by clicking the 'Expand' button again.

    .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
        a.share-button-facebook(data-share="facebook")
          span.sr-only Share on Facebook 
        a.share-button-expand(data-share="expand")
          span.sr-only Share

This is how the buttons are set up in LESS. How can I target the 'Expand' button so that when clicked, the four buttons behind it will appear? I know to wait until the document is ready and that it's a click(function()) but that's as far as I've been able to find. I'm working in a Jade like language, with Bootstrap as well. Thanks!

How are glyph icons loaded in /fonts?

Solution at bottom.

Bootstrap novice here - I've read that Bootstrap expects glyphicons to be in the /fonts directory (by default).

I've downloaded files from glyphicons.com - over 1200 PNG files (they include Mac). The file names don't match - they have names like glyphicons-225-chevron-right.png ("s" and "-225") instead of glyphicon-chevron-right that my code calls for. I copied the "chevron-right" and "left files, changed the names to match, moved the files in "glyphicon" folder under "fonts", loaded the 1225 files directly into the "fonts" folder, etc.

I've searched, but no answers that work for me (Stackoverflow had the most hits). I've searched w3, Bootstrap, examined the source HTML from Bootswatch and others.

I am using bootstrap css files from Bootswatch, jquery from googleapis, js from bootstrapcdn.


Solution = add:

I do not know how it ended up in my code, but I found it (missing the closing >) near the bottom of the one example I found that did work.


The following clipped from the first answer worked (I think) the first time I tried it. Now it does not, even after I added the "bootstrap-glyphicons.css"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="http://ift.tt/1xwklwE"></script>
      <script src="http://ift.tt/1qIredN"></script>
    <![endif]-->
  </head>
  
<body>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

</body>
</html>

Box margin is removed because of bootstrap

I have this script http://ift.tt/1HMXgwt and because of bootstrap css the margin around boxs is removed.

This is the bootstrap css http://ift.tt/1FHelXo2

How can I put an image gallery inside of a Bootstrap Modal?

I have tried using the example from this contributor: http://ift.tt/1zDsKy8

However, when I try to apply it to my scenario, the "image category" links just take me back to the top of my page when I click them. Here is my HTML:

<div class="container">

        <div class="col-md-6 col-md-offset-3 text-center wrap_title">
            <h2>Photographer Photography</h2>


        </div>

        <div class="row">

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="New Life" href="#"><h3>NEWLIFE</h3>
            <img class="thumbnail img-responsive newb"></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="Still Growing" href="#"><h3>STILL GROWING</h3>
            <div class="kid"></div></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="Family" href="#"><h3>FAMILY</h3>
            <div class="fam"></div></a>
            </div>
        </div>

        <div class="row tworow">

            <div class="col-12 col-md-4 col-sm-6  wow fadeInDown text-center">
            <a title="Seniors" href="#"><h3>SENIOR</h3>
            <div class="milestone"></div></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="YOU + ME" href="#"><h3>YOU + ME</h3>
            <div  class="unme"></div></a>
            </div>

            <div class="col-12 col-md-4 col-sm-6 wow fadeInDown text-center">
            <a title="I DO" href="#"><h3>I DO</h3>
            <div  class="marriage"></div></a>
            </div>

        </div>
    </div>
</div>



   <div class="hidden" id="img-repo">



                    <!--#image-1 -->
                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive" title="1" src="img/galleries/baby/1.png" alt="">
                        </div>

                        <div class="item" id="image-1" >
                            <img  class="thumbnail img-responsive"  title="2" src="img/galleries/baby/2.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="3" src="img/galleries/baby/3.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="4" src="img/galleries/baby/4.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="5" src="img/galleries/baby/5.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="6" src="img/galleries/baby/6.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="7" src="img/galleries/baby/7.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="8" src="img/galleries/baby/8.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="9" src="img/galleries/baby/9.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="10" src="img/galleries/baby/10.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="11" src="img/galleries/baby/11.png" alt="">
                        </div>

                        <div class="item" id="image-1">
                            <img  class="thumbnail img-responsive"  title="12" src="img/galleries/baby/12.png" alt="">
                        </div>

                </div>       
            </div>

            <!-- MODAL CODE -->
            <div class="modal" id="modal-gallery" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
                         <button class="close" type="button" data-dismiss="modal">×</button>
                            <h3 class="modal-title"></h3>
                    </div>
                    <div class="modal-body">
                        <div id="modal-carousel" class="carousel">

                            <div class="carousel-inner">           
                            </div>

                            <a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

                    </div>
                </div>
             <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
        </div>
    </div>
</div>

To me it looks like the href of the gallery categories should point to something else. In the example I gave though, they point to "#". I cannot figure out why this works on the example but not in my situation. At the moment I have only created the HTML for the first category's images. Once I can get this to work I will add the additional category images. Is there something simple I am overlooking?

Thanks.

Bootstrap not working inside Outlook 365 App

I am trying to implement Bootstrap 3 Tabs in an App for Office but I keep getting the following exception:

Unhandled exception at line 1453, column 2 in https://localhost:44303/Scripts/jquery-2.1.3.js

0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: #profile&_xdm_Info=null|null|null

Based on that it seems like Outlook 365 is appending &_xdm_Info=null|null|null but I don't understand why, how, or what to do about it if true.

Here is a whole simplified Home.html to illustrate the issue. Note it will work fine is a JSFiddle or Bootply.

<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title></title>
<script src="../../Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<link href="../../Content/bootstrap.css" rel="stylesheet" type="text/css"/>

<script src="http://ift.tt/1Hxs4B9" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.js" type="text/javascript"></script>

<link href="../App.css" rel="stylesheet" type="text/css"/>
<script src="../App.js" type="text/javascript"></script>

<link href="Home.css" rel="stylesheet" type="text/css"/>
<script src="Home.js" type="text/javascript"></script>
</head>
<body>

<div id="content-main">
    <!--<div class="padding">-->
    <ul class="nav nav-pills">
        <li class="active">
            <a href="#home" data-toggle="tab">Home</a>
        </li>
        <li>
            <a href="#profile" data-toggle="tab">Profile</a>
        </li>
        <li>
            <a href="#messages" data-toggle="tab">Messages</a>
        </li>
    </ul>

    <div id='content' class="tab-content">
        <div class="tab-pane active" id="home">
            <ul>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
            </ul>
        </div>
        <div class="tab-pane" id="profile">
            <ul>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
                <li>profile</li>
            </ul>
        </div>
        <div class="tab-pane" id="messages">
        </div>
    </div>
</div>
</body>
</html>


Here is my call stack -->

    Sizzle.error [jquery-2.1.3.js] Line 1453    Script
    Sizzle.tokenize [jquery-2.1.3.js] Line 2067 Script
    Sizzle.select [jquery-2.1.3.js] Line 2474   Script
    Sizzle [jquery-2.1.3.js] Line 850   Script
    find [jquery-2.1.3.js] Line 2690    Script
    jQuery.fn.init [jquery-2.1.3.js] Line 2798  Script
    jQuery [jquery-2.1.3.js] Line 76    Script
    Tab.prototype.show [bootstrap.js] Line 2050 Script
    Anonymous function [bootstrap.js] Line 2123 Script
    each [jquery-2.1.3.js] Line 374 Script
    jQuery.prototype.each [jquery-2.1.3.js] Line 139    Script
    Plugin [bootstrap.js] Line 2118 Script
    clickHandler [bootstrap.js] Line 2147   Script
    jQuery.event.dispatch [jquery-2.1.3.js] Line 4429   Script
    elemData.handle [jquery-2.1.3.js] Line 4115 Script

Why won't Bootstrap columns work in this small HTML/CSS snippet?

I expect to have a left column 2 units wide and a right area 10 units long. However, for some strange reason it is not coming out that way.

Anyone know why not?

#left {
  background-color: green;
}
#right {
  background-color: yellow;
}
<link href="http://ift.tt/1zOhBN9" rel="stylesheet"/>

<div id="main-row" class="row">
  <div id="left" class="col-xs-2">
    <p>Yo</p>
    <button class="btn btn-primary">A Button</button>
  </div>
  <div id="right" class="col-xs-10">
    Ho
  </div>
</div>

Scrollsby Bootstrap 3 error

I've tried the following, but it doesn't work:

<div class="container" id="corpo-moradores">
    <div class="navbar-header navbar-default" id="navbar-moradores" role="navigation"  data-spy="affix">                
        <ul class="nav navbar-nav">
            <li class="active"><a href="#moradores">Moradores</a></li>
            <li>Ex-Alunos</a></li>
            <li><a href="#homenageados">Homenageados</a></li>
            <li>Bixos</a></li>
        </ul>
    </div>
</div>            
<div data-spy="scroll" data-target="#navbar-moradores" data-offset="50" class="scrollspy-example">
</div>

AngularJS - Failing to instantiate Controller on modal call

I'm trying to make a CRUD operation in AngularJS by using ui-bootstrap modal.

I guess I'm not getting the idea of setting Controller's Inheritance and everytime I try to open a modal and call the Children Controller I'm getting an error:

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ChildCtrl

The parent view look like this:

<div ng-controller="ParentCtrl">
    <div>
        stuff to handle items.
    </div>

      <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          </div>
          <div class="modal-body">
          </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
</div>

The child view:

    <div class="modal-content" ng-controller="ChildCtrl">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  ng-click="close()" >
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
        <h4>Delete</h4>
      </div>
      <form name="deleteForm" ng-submit="delete()">
      <div class="modal-body">
some info about the model here
      </div>
        <div class="modal-footer">
              <input class="btn" value="Delete" type="submit"/>
        </div>
      </form>
    </div>

The parent controller looks like this:

myApp.controller('ParentCtrl', ['$scope', '$modal', function ($scope, $modal) {

    //some stuff here
    $scope.delete = function (item, size) {
        $scope.modalInstance = $modal.open({
            templateUrl: 'views/delete.html',
            controller: 'ChildCtrl',
            size: size,
            resolve: {
                item : function () {
                    return item
                }
            }
        });
    };
    //some stuff here
}]);

And the child one, like this:

myApp.controller('ChildCtrl', ['$scope','$modalInstance', 'item', 'ItemService', function ($scope, $modalInstance, item, ItemService) {

    $scope.delete = function () {
        ItemService.delete({ id: item.id }, function () {
            $modalInstance.close();
            $scope.$emit('itemUpdate');
        })
    };
}]);

Thanks in advance!

Bootstrap dropdown links not working

I am using the latest version of bootstrap, and I have a top menu page with a fixed top navbar.

It has several links, and a search form. The search submits the query via AJAX and then outputs the results of the php file with a drop down result.

I am able to get the results to post and get the dropdown menu working, but the links are not clickable. They are highlighted and I can see href below in the status bar, but I can't click through.

HTML CODE:

<div class="row">
<img class="img-responsive center-block" src="images/header.jpg">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-rc">
    <div class="container-fluid">
        <div class="highlight-light navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#"><span class="glyphicon glyphicon-home">&nbsp;</span>Main Menu</a>
        </div>
        <div id="top-navbar" class="collapse navbar-collapse">
            <ul class="highlight-light nav navbar-nav">
                <li><a href="newcontact.php"><span class="glyphicon glyphicon-user">&nbsp;</span>New Contact</a></li>
                <li><a href="newsearch.php"><span class="glyphicon glyphicon-search">&nbsp;</span>Search</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-list-alt">&nbsp;</span>Attendance</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-calendar">&nbsp;</span>Planner</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-stats">&nbsp;</span>Statistics</a></li>
                <li class="dropdown">
                    <form class="navbar-form navbar-left" id="QuickSearch" role="form" method="post" action="">
                        <div class="form-group form-group-xs">
                            <input type="text" class="input" placeholder="Search by Name or Email" name="SearchTerm" id="SearchTerm"/>
                            <div class="btn-group btn-group-xs">
                                <input class="btn btn-default" type="submit" value="Search" />
                            </div>
                        </div>
                    </form>
                    <div id="QuickSearchResults"></div>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="newlogout.php"><span class="glyphicon glyphicon-log-out">&nbsp;</span>Log-out</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
</div>

JS

$("#QuickSearch").submit(function(){

$.blockUI({ message: '<h1><img src="img/busy.gif" />&nbsp;Please Wait...</h1>' }); 
// Intercept the form submission
var formdata = $(this).serialize(); // Serialize all form data

// Post data to your PHP processing script
$.post( "quicksearch.php", formdata, function( data ) {
    // Act upon the data returned, setting it to #success <div>
    $("#QuickSearchResults").html ( data );
    $(function () {
        $('#QuickResultsMenu').dropdown('toggle');
    });
    $.unblockUI();
});

return false; // Prevent the form from actually submitting
});

PHP

/* Code that does DB connection and processing, then below */
<ul id="QuickResultsMenu" class="dropdown-menu padding10">
<?php   
//And we display the results 
foreach($ContactSearch as $Results) : ?>

<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=<?php echo $Results['Id'];?>"><?php echo $Results['FirstName'];?>
        <?php echo $Results['LastName'];?>,<?php echo $Results['Phone2'];?>,<?php echo $Results['Email'];?></a>
    </li>

<?php endforeach; ?>

<!-- Total Search Results -->
    <li class="">
        <form role="form" id="QuickResults" name="QuickResults">
        Show more results
        </form>
    </li>
</ul>

I noticed that if I remove the ul tag that is in the php code, the links work fine, but the styling gets messed up. I can't figure out how to make this look right and be functional. Any help is greatly appreciated. Thanks!

bootstrap pill not "tabbing" content

I am setting up bootstrap pills on a page and am using the http://ift.tt/1hxLUiR standard formula but I'm getting the function is not a valid function error message. I have:

<ul class="nav nav-pills" role="pilllist" id="myPill">
    <li role="presentation" class="active"><a href="#all" aria-controls="all" role="pill" data-toggle="pill">Show all</a></li>
    <li role="presentation"><a href="#car" aria-controls="car" role="pill" data-toggle="pill">Cars</a></li>
</ul>

<div class="pill-content">
    <div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
    <div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>

<script>
    $(function () {
        $('#myPill a:last').pill('show')
    })
</script>

Why am I getting this error message?

How do I make a grid responsive with variable height in Boostrap?

The inner div boxes can have different heights but I need to be always above, like a vertical-align:top.

I now show this enter image description here

But need always like this enter image description here Remeber, in tablet or mobile... responsive boostrap enter image description here The php code

                <?php
                $args = array( 'post_type' => 'clientes');
                $loop = new WP_Query( $args );
                $i=0;
                if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
                  if ($i%2==0){ $bgcolor='#f3f3f3'; } else {  $bgcolor='#fff'; }
            ?>
                    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 partner" style="background-color: <?php echo $bgcolor; ?>">

                        <img src="<?php echo get_field('logotipo');?>" alt="<?php echo get_the_title();?>"/>
                        <?php if(get_field('proyectos')): ?>
                            <ul>
                            <?php while(has_sub_field('proyectos')): ?>
                                <li>
                                    <p class="nameproject"><?php the_sub_field('nombre_proyecto'); ?></p>
                                    <p><?php the_sub_field('tipologia_proyecto'); ?></p>
                                </li>
                            <?php endwhile; ?>
                            </ul>
                        <?php endif; ?>

                    </div>
            <?php
                  $i++;
                endwhile; endif;
            ?>

How to display an alert if there is no user activity on the page

Basically I need to redirect user back to home page if there is no activity (keypress and mousemove) from user for 2 minutes (after 2 minutes, wait for 10 more seconds then redirect). With very little knowledge of JS and Jqery, I just got the code from here: How to automatically reload a page after a given period of inactivity and it works fine:

<!-- BEGIN Auto redirect if no activity detected -->
<script>
    var time = new Date().getTime();
    $(document.body).bind("mousemove keypress", function (e) {
        time = new Date().getTime();
    });

    function refresh() {
        if (new Date().getTime() - time >= 120000) //
            window.location.href = '/checkin-welcome.aspx';
        else
            setTimeout(refresh, 10000);
    }

    setTimeout(refresh, 10000);
</script>
<!-- END Auto redirect if no activity detected -->

It would be nicer if we give user an warning instead of just redirecting without any notice. How do I make it display a nice bootstrap modal/alert letting them know that the page will be redirected in 10 seconds (and counting down 9, 8, 7...) and there a button "Give me more time" that allow when user click it will close the alert and reset the timer (give them another 2 minute)? (I have Bootstrap & Jquery library in the page, I just don't like the default, plain alert)

Image tag with background image has a border

I have an HTML button that shows an icon on top of some text:

<button class="btn btn-link center">

    <img class="connect">
    <br/>
    CONNECT

</button>

My image states are defined in CSS:

.connect{
    background-image:url('../images/connect_rest.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
} 

.connect:hover{
    background-image:url('../images/connect_hover.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
}

.connect:active{
    background-image:url('../images/connect_active.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
}

So, why is there a white border around my box? I get it, I know it's funky that I'm setting a background-image on an image element. But, I need this compatible with IE8 so I can't set the "content" property in CSS.

Thanks for any helpful tips.

Close bootstrap modal after submit

How can I close the bootstrap modal after I click on the Delete button? Here's my code:

<div id="media_delete_confirmation" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Confirmation</h4>
      </div>

      <form id="modal-form">
        <div class="modal-body">
          <input id="media_action" value="deleteMediaAction" type="hidden"/>
          <p>Do you want to save changes you made to document before closing?</p>
          <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Keep</button>
          <button type="button" class="btn btn-default" id="modal_delete">Delete</button>
        </div>
      </form>
    </div>
  </div>
</div>

and here's the other part:

$("#modal_delete").click(function() {

  var id = $(".image-picker").val();
  var media_action = $("#media_action").val();

  $.ajax({
    type: 'POST',
    url: '?page=myMediaController&action=deleteMedia',
    data: {'media_id' : id},
    success: function(data) {
      $("#media_delete_confirmation").modal("hide");
    }
  });
});

react bootstrap - adding custom bsStyle property to button

I am using react-bootstrap for my project and I am trying to add custom bsStyle property to the button component. If I use the default bootstrap classes according to the following link http://ift.tt/1EaGjMK the class name is rendered properly. However if i change the property to bsStyle='facebook' it renders btn-undefined

So in short, I am clueless where am I going wrong when I pass bsStyle property to the group in react bootstrap.

This is my HTML looks like

<Button id="facebook-btn" bsStyle="facebook" bsSize="large" block>
</Button>

and if I change my code to

<Button id="facebook-btn" bsStyle="primary" bsSize="large" block>
</Button>

it works fine and the class is rendered properly.

This is the console html log

enter image description here

img-resposive doesn't work

I'm using bootstrap 3 in the latest release - 3.3.4 - and unfortunately the .img-responsive class isn't working properly. I tried everything, even .col-md-12 along with .img-responsive and nothing.

HTML:

<header class="container" id="container">
  <div class="row">
    <section class="col-md-3">
        <a href="#">
            <img class="img-responsive" src="http://ift.tt/TqWtKq" alt="..." />
        </a>
    </section>
    <section class="col-md-9">
      <p>something else...</p>
    </section>
  </div>
</header>

CSS:

#container {
    height: 60px;
    background-color: red;
}

You can see the live preview here.

@edit

The image is over the container - the red part - that is the reason for the question, .img-responsive was supposed to resize the image to make it fit, but it doesn't.

Using Angular Directives to Replace Bootstrap Class Assignment with HTML Tags

I can see that this was an AngularUI discussion at one point...

I'm wondering if anyone else has implemented Angular directives that would allow me to replace traditional Bootstrap laden markup

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4 offset2">
    </div>
  </div>
</div>

with easier-to-read, element focused, markup similar to

<container fluid>
  <row>
    <column width=4 skip=2>
    </column>
  </row>
</container fluid>

Seems like it would be easy enough to implement, which makes me think that someone else has done this already (or that it's not worth it for some reason (maybe there's a performance hit?))

Any thoughts?

How can I make the content area of my page expand to full height using the Bootstrap framework?

I have a site that sometimes doesn't have much content in the main section of the page. The footer then slides way up. I would like to have a consistent minimum height on all the pages that keeps the footer roughly close to the bottom of the average page. Many of the examples that I have seen radically modify the CSS and that concerns me in relation to keeping the site responsive.

In my example on Bootply I want to have the lime green area expand to "fill" the page from the bottom of the nav area to the top of the footer.

My Bootply example

Angular Bootstrap Tabs , href doesn't work

I'm trying to use angular bootstrap tabs like that :

    <div >
    <tabset>
        <tab ng-repeat="t in tabs">
            <tab-heading>{{t.title}} <a  ng-click="removeTab($index)" href='#Evaluation'><i class="glyphicon glyphicon-remove-sign"></i></a></tab-heading>
            <!-- <div ng-bind='t.content'></div> -->
        </tab>
    </tabset>
</div>
<div id="Informations">Infos</div>
<div id="Evaluation">Evaluation</div>

and the js is :

monAppli.controller("Controleur", function ($scope) {

$scope.tabs = [{        
    title: "Informations",
    content: '<h1>tab one</h1>'
}, {
    title: "Evaluation",
    content: '<h1>tab two</h1>'
}, {
    title: "Projets",
    content: '<h1>tab three</h1>'
}, {
    title: "Notes",
    content: '<h1>tab 4</h1>'
}
];
$scope.removeTab = function (index) {
    $scope.tabs.splice(index, 1);
}; 

});

but the href link doesn't work, it doesn't show each div separatly.. Somebody have any idea ? Thank you a lot It's supposed to show thez div "Evaluation" when clicking on a tab, but it show nothing.

Un symmetric bootstrap layout

I am new to bootstrap.I need help with Bootstrap row/column ordering. I have a 3 rows and 2 columns of images and text for each image:

Web Layout:

Image1 Text1

Text2 Image2

Image3 Text3

Web Layout is fine. However, on mobile device it looks (as expected):

Image1

Text1

Text2

Image2

Image3

Text3

I want the mobile layout will be something like:

Image1

Text1

Image2

Text2

Image3

Text3

Div tag alignment with Bootstrap

I'm sure this has been answered many times - but I've searched here with no luck...

I'm new to bootstrap (and div tags)... Here's what I've spent all day trying to figure out... I have 2 rows. The 1st row has 3 columns (1,2,3). The 2nd has 2 columns (4,5) . I'm trying to simply "allow" column "3" to extend into and beside column "5" - currently column 4 & 5 get pushed down below the end of 3...

Column "3" may contain an article or contact form - not sure yet- either way I need the flexibility...

I have successfully done this by nesting 4 into 1 & 5 into 2... but when I view in mobile view column 3 gets pushed to the end of section5... I want 3 to remain number 3 in the mobile vertical view list..

Does Bootstrap have something built into CSS to accomodate? Are multiple 'containers' required? I'd rather not add CSS, but if that's the only way so be it... Thanks!

My code:

<div class="row-fluid">
    <div class="col-md-4">
         <h2>section1 </h2>
    </div>
    <div class="col-md-4">
         <h2>section2 </h2>
    </div>
    <div class="col-md-4">
         <h2>section3 </h2>
    </div>
</div>
<div class="row-fluid">
    <div class="col-md-4">section4</div>
    <div class="col-md-4">section5</div>
</div>

Script not firing properly after preloader script

Very limited script experience.

I am attempting to get a preloader to cover my images loading in a bootstrap carousel before a second script cycles through them.

This script is as far as I can get.

<!-- Preloader -->
<script type="text/javascript">
    //<![CDATA[
        $(window).load(function() { // makes sure the whole site is loaded
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(50).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').delay(50).css({'overflow':'visible'});
        })
    //]]>
</script>

and

<!-- Script to Activate the Carousel -->
<script type="text/javascript">
$('#preloader').delay(50).fadeOut('slow', function(){
  $('.carousel').carousel({
      pause: "none",
      interval: 500
  });
});
</script>

The sequence I need is loading animation div covering images loading in "#myCarousel" > images have loaded > covering div fades out > fade out calls:

$('.carousel').carousel({
        interval: 500, //changes the speed
        pause: "none",
    })

Images flick through and stops on final slide.

In the example above, it seems to work – the preloader works, the carousel works too but not at the expected speed; "500" is meant to be half a second. It also seems to break the pause function to, the fact pause is set to "none" seems to be ignored.

After some help from @Shikkediel the script now reads:

<script type="text/javascript">
$(window).on('load', function() {

    $('#status').fadeOut()
    .queue(function() {

        $('#preloader').delay(50).fadeOut('slow', function() {
            $('#myCarousel').attr('data-ride', 'carousel');
            $('.item').first().addClass( 'active' );
            $('body').delay(50).css({'overflow':'visible'});
            $('.carousel').carousel({
            });
        });
        $(this).dequeue();
    });
});
</script>

– the speed and pause are now set in the data attributes, which is great to have them set in there out of the way.

However, the preloader still does not pre load the images!

This is the test I have running: http://ift.tt/1zyVtnO

How to confirm a form submission with Bootbox using jQuery AJAX and JSON

I'm working in a web application using Spring MVC. I'm trying to show a confirmation dialog before submitting a form using Bootbox, but I'm getting a 500 internal server error.

This is my form:

<form id="checkout-form" class="smart-form" novalidate="novalidate">
  ...some fields
  <button type="button" class="btn btn-primary" onclick="insertFunction()">
    Accept
  </button>
</form>

This is my insertFunction()

function insertFunction(){

  var name = $('#name').val();
  var lastname = $('#lastname').val();

  var confirmSend;

  var json = {"name": name,"lastname": lastname};

  $.ajax({
    type: "POST",
    url: "register/insertPerson",
    data: JSON.stringify(json),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    beforeSend: function (xhr){
      bootbox.dialog({
        message: "I am a custom dialog",
        title: "Custom title",
        buttons: {
          success: {
            label: "Success!",
            className: "btn-success",
            callback: function() {
              //I DONT KNOW WHAT TO DO HERE
            }
          },
          danger: {
            label: "Danger!",
            className: "btn-danger",
            callback: function() {
              return false;
            }
          }
        }
      });

      xhr.setRequestHeader("Accept", "application/json");
      xhr.setRequestHeader("Content-Type", "application/json");
    },
    success: function (data){
      if (data.message === true){
        bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS");
      } else {
        bootbox.alert("OPERATION FAILED");
      }
    },
    error: function (xhr, ajaxOptions, thrownError){
      alert(xhr.status);
      alert(xhr.responseText);
      alert(thrownError);
    }
  });
}

I send the name and last name value to my spring controller and I do a insert and if it was successfully my controller method returns true, and in the success block of my script I check the value if is true I show a message and if it's false i show a different message.

My problem is that i don't know what to do inside this section:

 success: {
  label: "Success!",
    className: "btn-success",
      callback: function() {
        //I DONT KNOW WHAT TO DO HERE
      }
}

*EDIT: * It was my fault submiting a value in the form fields, now I'm not getting a 500 internal server error, now it show me my FAILED dialog that i fire in the success block

else {
        bootbox.alert("OPERATION FAILED");

and then after this message is sho, down under it, it shows the confirmation diaglog that i want to show firts. Is like is showing me the messages in the wrong order. Also when i hit the Danger button it don't close the dialog window only if i press Success.

*EDIT 2: *

The confirmation windows is working, but I'm having problems when i press the cancel button, when i press the cancel button the window don't close.

 function preInsert()
{
    bootbox.dialog({
        message: "are you sure",
        title: "are you sure",
        buttons: {
            success: {
                label: "Acept",
                className: "btn-success",
                callback: function () {
                    realInsert();
                }
            },
            danger: {
                label: "Cancel",
                className: "btn-danger",
                callback: function () {
                    return false;
                }
            }
        }
    });
}

function realInsert() {

    var name= $('#name').val();
    var lastName= $('#lastName').val();


    var json = {"name": name,
        "lastName": lastName
    };


    $.ajax(
            {
                type: "POST",
                url: "register/insertForm",
                data: JSON.stringify(json),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                beforeSend: function (xhr)
                {
                    xhr.setRequestHeader("Accept", "application/json");
                    xhr.setRequestHeader("Content-Type", "application/json");
                },
                success: function (data)
                {



                    if (data === true)
                    {
                        bootbox.alert("Insert Successfully ");
                    }
                    else
                    {
                        bootbox.alert("Problem during the insert");
                    }
                },
                error: function (xhr, ajaxOptions, thrownError)
                {
                    alert(xhr.status);
                    alert(xhr.responseText);
                    alert(thrownError);
                }
            });
}

Bootstrap 3 btn does not wrap the second line

I'm trying to implemented a button just like the one demontrated in the example page of fontawesome, whose code is:

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>
  Version 4.3.0
</a>

It works but only when the second line is no more longer than the first one.

So what causes the weird phenomenon and how to fix it?

Thanks.

How to give background to Bootstrap columns without left and right padding?

I have this Bootstrap column structure:

.container>.row>.col-md-6*2

Problem is, that i want those two columns to have white backgrounds, but the background goes 15 pixels left and right OVER container and row. Here is the image what I want to achieve:

Where the red rectnagles are, i want to have white background. Where the red rectnagles are, i want to have white background.

Here is also JsFiddle: http://ift.tt/1blf31y

Why are fluid BootStrap3 attributes not shown under a browser inspector

I have been working with Bootstrap3 for a few months now and I have noticed that whenever I use an attribute like container-fluid and row-fluid they are not highlighted under a browser inspector compared to their counterparts container and row. The fluid attributes under the Chrome Inspector points to a div with a width of the parent div in pixels but a height of 0px. Using the Firefox Firebug Inspector plugin whenever I inspect a row-fluid or container-fluid nothing would be highlighted.

I have attached some screenshots of my a simple Bootstrap project I am working on below under the Chrome Inspector. My question is why is this so? Why doesn't the browser recognize the fluid element as any other element with an appropriate height?

Screenshot Using row: Screenshot Using <code>row</code>

Screenshot Using row-fluid:enter image description here

Simple_Form --Bootstrap rails - Could not find generator

I am running rails 4.2.0 and ruby 2.2.1p85 i keep getting the below error when trying to generate simple_form. any ideas?

justin@justin-ThinkPad-T60:~/workspaces/gigitt$ rails g simple_form:install --bootstrap
Could not find generator 'simple_form:install'. Maybe you meant 'responders:install' or 'devise:install' or 'integration_test'
Run `rails generate --help` for more options.
justin@justin-ThinkPad-T60:~/workspaces/gigitt$

Here is a copy of my:

Gemfile: http://ift.tt/1P5HdMr Gemfile.lock: http://ift.tt/1P5HeQr

Bootstrap menu navigation breaks for tablet version

I am using bootstrap nav to show menu, In my case my menu will be large with few sub-menus's each having about 10 submenus.

I have set up example on jsbin. For some reason tab & mobile version menu is not showing.

http://ift.tt/1H7KVUt

Actual issue I am facing is that this menu doesn't shows all the menu items and even doesn't allow to scroll through all menu items.

How can I make this menu for tab & mobile version scrollable in case it is larger than screen, so that user can scroll through all menu items.

Also I want to show mobile version of menu when screen size is 1199px by default it works at 768px;

Update: This css property from bootstrap class is limiting the menu height, How can I make menu grow with items and add scrollable when menu is larger than screen size (Height)

.navbar-collapse{
    max-height: 340px;
}

cirular image inside a bootstrap column on a non square image file

I have an image I want to have a circular effect (the original image is rectangular, and I want it to be round - a typical profile image) Found many sources for this.

The catch is I want to have it inside a bootstrap column and have the img-responsive effect

I got really messed up trying to achieve it

Prevent bootstrap parent also collapsing the a child collapse?

At the moment, I have two buttons. The parent button when clicked displays stuff and a part of that stuff is another button which too can be clicked to uncollapse.

I want the child to be closed when the parent is opened, however I assume there is a conflict and the child is opening due to the parent. Is there any way I can address both the parent & child collapsible individually?

Parent:

<button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter">

<button id='seemore-button' type='button' class='btn btn-block' data-toggle='collapse' data-target='#seemore'>
</button>

</button>

EDIT: Here is an example of the issue I have. I require the secondary collapsible to be CLOSED when the parent is opened so that "yoyo" does not show. http://ift.tt/1P5HaA9

How do I force floating boxes to have the same height?

Please take a look here.

Does anyone know how I can make sure that the white divs (class col-sm-6) that are floating next to each other always have the same height?

I can class them something like A and B if I could find a way using JavaScript or something.

Any ideas?

How to get glyphicons working in twitter-bootstrap?

I've got bootstrap files stored locally:

<link rel="stylesheet" href="/bootstrap/3.2.0/css/bootstrap.min.css">

and

<script src="/bootstrap/3.2.0/js/bootstrap.min.js"></script>

but when I do this:

<span class="glyphicon glyphicon-print" aria-hidden="true"></span>

I get a little square character such as is displayed when the client doesn't have the proper font. I read here that there's separate CSS, but the link is broken. Any ideas how to resolve this?

Bootstrap scrollspy in association with collapsable div

I have created a list of arguments which, when clicked, should show a div with text inside (see example here) using the collapse.js of bootstrap.

However I also would like to use the scrollspy function in order to move directly to the target div if all are opens, so that my page could move down to the div I have opened (without scrolling it manually)

I tried to add the scroll-spy to the single li but it did not work.

Could someone help? Thanks

Bootstrap - two/three inputs in one line

I would like to write two or three inputs with bootstrap: It should looks like:

label
input input input

label
input(30%) input(40%) input (30%)

Here's my code:

<form>
  <div class="form-group">
    <label><strong>test:</strong></label>
    <input class="form-control" style="width: 30%"/>
    <input class="form-control" style="width: 40%"/>
    <input class="form-control" style="width: 30%"/>
  </div>
</form>

7 Column grid in bootstrap collapse at xs

I really like this code pen and I'd like to use it to create a calendar, however I need it to collapse at screen-xs using bootstrap and I am not sure how to do it.

I have tried adding .seven-cols .col-xs-1 and .seven-cols .col-xs-12 but it still just breaks into two points.

I'm also having trouble understanding the CSS.

Bootstrap CSS - Image container height to match width

I have a bootstrap website that loads content dynamically from a database and lazyload's the images using this jQuery plugin - LazyLoad

It uses a placeholder, which is a white square png. Before the image loads (while the placeholder is visible) the image container looks how I want it to, and when the image has fully loaded it looks good too. However while the image is loading the layout collapses like so:

enter image description here

Is there a way to set the height of the image container to match the width? With it being a responsive site the width will change depending on the resolution. If that makes sense?

<div class='col-xs-6 col-sm-3 col-md-3'>
  <div class='thumbnail'>
    <a href='my_url.html'><img class = 'lazy' data-original='http://external.png' alt='product_name'></a>
    <div class='caption' style = 'text-align: center;'>
      <div style = 'height: 60px;'>product_name<br />
            &pound;product_price</div>
      <p style = 'padding-top: 10px;'><a href='my_url.html' class='btn btn-primary btn-thumbp' role='button'>View</a> <a href='#' class='btn btn-default btn-thumbd' role='button'>Wishlist</a></p>
    </div>
  </div>
</div>

input type not aligning in resposive

My twitter bootstrap input type text is different in firefox and chrome

firefox

chrome

adding bootstrap design to webforms

I have quite old project written with asp webforms (.net 4.0). It uses different webforms server controls like TextBox etc.

There is a design written in Bootstrap.

And the client wants to combine "old projects on webforms" with "bootstrap design".

Is it possible? I see here a problem: webforms server controls generate their own html code, so bootstrap-like design cannot be used directly. The question is - how to deal with this problem, how to overcome this problem?

I do not see a good sollution for this, only rewriting server controls if they doesn't fit bootstrap needs. Are there any widely used Bootstrap-like Web Forms Controls?

Showing errors validation on bootrap modal

I´ve got a modal boostrap. I want to show the error of validation on boostrap modal. But I`ve several difficults for make it

My modal

<!-- Modal -->
        <div class="modal fade" id="box-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><!-- Aqui va el titulo de la pagina modal -->@yield('modal_title')</h4>
                    </div>
                    <div class="modal-body">
                         @yield('modal_body')
                        <div class="alert hidden" id="modal-alert"></div>
                        <!--Aqui va el cuerpo de la página modal -->


                    </div>
                    <div class="modal-footer">
                    <!-- Aquí va el pie de la pagina modal -->
                    @yield('modal_footer')
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin de Modal -->

I show a form on the body of the modal

 {{ Form::open(array('id' =>'formuser-create', 'role' => 'form', 'class' => 'form-horizontal')) }}
            <div class="form-group">
                {{ Form::label('inputuser', 'Nombre de usuario', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::text('inputuser','', array('placeholder' => 'Introduce la contraseña...', 'class' => 'form-control input-md')) }}   
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('inputpassword', 'Contraseña', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::password('inputpassword','', array('placeholder' => 'Introduce la contraseña...', 'class' => 'form-control input-md')) }}
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('inputpassword1', 'Confirmar constraseña', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::password('inputpassword1','', array('placeholder' => 'Vuelve a introducir la contraseña...', 'class' => 'form-control input-md')) }}
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('inputemail', 'Email', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::text('inputemail','', array('placeholder' => 'Introduce el email...', 'class' => 'form-control input-md')) }} 
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('es_admin', '¿Es administrador?', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::checkbox('es_admin','1') }}
                </div>
            </div>

@stop
@section('modal_footer')
<div class='form-group text-center' id='editor-actions'>
    {{ Form::submit('Guardar', ['class' => 'btn btn-success']) }} 
    {{ Form::reset('Limpiar', ['class' => 'btn btn-primary']) }}
    {{ Form::close() }}  
</div>

My controller

//Rutas del sistema
Route::Controller('users','UsersController');

method Create for add users

//metodo para agregar al usuario
    public function postCreate()
    {
        //validamos reglas inputs
        $rules = array(
          'inputuser' => 'required|max:10',
          'inputpassword' => 'required|min:8',
          'inputpassword1' => 'required|min:8',
          'inputemail' => 'required|email|unique:users,email'
        );

        $validation = Validator::make(Input::all(), $rules);
        //Si no pasa la validacion
        if($validation->fails())
        {
            //Obtenemos los mensajes de error de la validation
            $messages = $validation->messages();
            //Redireccionamos a nuestro formulario de atras con los errores de la validación 
            if(Request::ajax())
            {
                return Response::json(array('errors' => $messages));
            }
            else
            {
                return Redirect::back()->withInput()->withErrors($validation);
            }
        }
        //Si todo ha ido bien guardamos
        $password = Input::get('inputpassword');
        $user = new User;
        $user->username = Input::get('inputuser');
        $user->password = Hash::make($password);
        $user->email = Input::get('inputemail'); 
        $user->admin = (Input::get('es_admin') == '1') ? 1 : 0;

        //guardamos
        $user->save();

        //redirigimos a usuarios

        return Redirect::to('admin/users.index')->with('status','ok_create');

    }

My main.js javascript file where I call with ajax to my method of the controller. And returned me a json response.

$("document").ready(function()
{
   $("#formuser-create").submit(function()
   {
      event.preventDefault();
      var form = $(this);
      $.ajax({
         url: 'users/create',
         dataType:'json',
         data: form.serialize(),
         type: "POST", 
         success: function(response)
         {
             if(response.success)
             {
                 alert("ok!");
             }
             else(response.error)
             {
                 alert(response['errors']);
             }
         },
         error: function(xhr, textStatus, thrownError)
         {
             console.log(xhr.status);
             console.log(thrownError);
             console.log(textStatus);
         }
      });
   }); 
});

My json that get when the fails validation

{"errors":{"inputuser":["The inputuser field is required."],"inputpassword":["The inputpassword field is required."],"inputpassword1":["The inputpassword1 field is required."],"inputemail":["The inputemail field is required."]}}

How Could I show the errors in my form modal. I´m one little confunsed to show it.

dynamic bootstrap tabs with rails

I am trying to get rails to generate dynamic navigation tabs that refer to groups user is enrolled at. Basically, what I want to achieve is to dynamically have tabs named after groups that user is enrolled at (which is working fine) and then showing the content of each group by clicking on its tab (which is not working properly for some reason). The page loads data correctly but toggling between tabs doesn't work

Here is the code in the view

<div class="tabbable tabs-left">
  <div class="row">
    <div class="col-md-4">
      <ul class="nav nav-pills nav-stacked">
        <% current_user.group.each do |group| %>
            <li><a href="#<%= group.name %>" data-toggle="tab">
            <%=group.name %></a></li>
        <% end %>
      </ul>
    </div>
    <div class="col-md-8">
      <div class="tab-content">
        <% current_user.group.each do |group| %>
            <div class="tab-pane fade <%= 'in active' if current_user.group.first == group %>" id="<%=group.name%>">
              <% if current_user.group_feed(group.id).any? %>
                  <ol class="microposts">
                    <%= render current_user.group_feed(group.id) %>
                    <%= group.name %>
                  </ol>
              <% end %>
            </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

Is there something that I am missing?

Understanding Bootstrap and jquery in Asp.net

So i have just figured out how to download the NuGet packages and i installed the bootstrap and jquery packages, but now im a little lost, when i used bootstrap before, i only had bootstrap.min.js, and the same with the css and my costume ones that i referenced.

so now what is this used for : jquery-2.1.3.intellisense.js ? also what is the npm.js ? it cam with the jquery package.

if anyone could help me understand the .theme and .map correctly for css and the .map for js, that would be great. From what i can gather from what iv read, .Map is used for bootstrap 2* and .theme is just their themes, am i on the right track ?

The Fonts folder, are those automatically used or do they have to be references ? and how are they used ?

heres an image of my folders:

enter image description here

Call Modal functions in Controller - AngularJS

I have a project where I'm using the ui.bootstrap, and according to the tutorial I followed I have to set it up similar to this:

'use strict';

angular.module('academiaUnitateApp')
  .controller('EntryCtrl', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: 'ModalCtrl'
        })
    };
  });

'use strict';

angular.module('academiaUnitateApp')
  .controller('ModalCtrl', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.delete = function () {
        $modalInstance.dismiss('cancel');
    };
  });


<script type="text/ng-template" id="modal.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <p class="alert alert-danger">
                WARNING: By deleting the article all it's nested articles will be moved to the article holding this one.
                <br/>
                Do you still want to delete this article?
            </p>
            <button class="btn btn-primary" ng-click="delete()">Yes</button>
            <button class="btn btn-primary" ng-click="cancel()">No</button>
            <span ng-show="error.state" class="alert alert-danger">{{ error.message }}</span>
            <span ng-show="done.state" class="alert alert-success">{{done.message}}</span>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
</script>

This works find and all, but what if I want to move the $scope.delete function inside the EntryCtrl controller instead of having it in a separate controller?

Bootstrap File Structure

I am using latest bootstrap for a project. I am confused about the bootstraps mobile first approch and the less file structure

my file structurte is

---css
---js
---less
---mixins
-----..
-----...
----Custom_files
---------main.less
--------- component1.less
--------- component2.less

All my custom less files live in Custom files folder. I am trying to generate a different stylesheet for custom css without touching the bootstrap.min.css at all

In main.less file i have imported all the component less files (component1.less, components.less)

To achieve mobile first approch, in each component file I have included mobile styles as default styles rules and the desktop styles at last of the file

/****Default Styles go here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

My question is When the css is generated it looks like a mess as a combination of default css and media queries instead of having default css first and then media queries

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/
......

Is this ok? Or if it is wrong what is the proper way of doing ths

Boostrap popover gets placed outside of window

Somehow my bootstrap popover outranges the width I gave the containing element. In fact, it looks like this: popover-bug

I initialise the popover like this:

$('.filter').popover({
    title: "Anzeigeeinstellungen",
    html: "true",
    placement: "bottom",
    trigger: "click focus",
    content: function(){
      return $('#popoverContent').html();
    },
    container: '#search'
});

#search has a max-width of 100%

Looking forward for all types of answers: Force0234

Align two bootstrap rows vertically using offset

I want the 2 elements in the center to be aligned.

I thought that if the first row has: item(1 col)-item-(2 col)-item(offset 1) and second row has: item(offset 4) they will be aligned but they are not.

Could this be because of margins?

How can I make div of header.png and div of data.title vertically aligned?

The code

<div class="row">
    <div class="col-xs-1 col-xl-1 profile-image-container">
        <img class="img-responsive" src="{{data.owner_image}}"/>
    </div>
    <div class="col-xs-2 col-xl-2">
        <p>@{{data.owner_nick}}</p>
    </div>
    <div class="col-xs-2 col-xl-2 col-xs-offset-2 col-xl-offset-2 ">
        <img class="img-responsive" src="/img/moment/header.png"/>
        <!--<div class="moment-header-image"</div>-->
    </div>
</div>
<div class="row">
    <div class="col-xs-4 col-xl-4 col-xs-offset-4 col-xl-offset-4 moment-title">
        <p>{{data.title}}</p>
    </div>
</div>

Edit: Although accepting the answer accepted, all suggestions work. profile-image-container plays with the margins and that's what is causing the problems

Button label jQuery DataTable

I want to change button label in jQuery DataTable.

That's my code (not working)

        $('#data-table').dataTable({
            "language":
                {
                    "paginate":
                        { "next": "Next page" }
                }
        });

I'm still have Next label.

how to display table value from database using bootstrap DataTable

Hi all I am a fresher in java and jsp and honestly I dont have knowledge of json. but I have some requirement that I have to pull the data from database and display on jsp page. but the criteria is that I have to use Bootstrap Data Table why I am using this because it provide lot of flexibility like Pagination Filtering Sorting Multi-column sorting Individual column filter

I have seen bootstrap example but I am getting error in my jsp can any body help me with this Please.

This my jsp page

<%@page import="org.codehaus.jettison.json.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
   <%@ page import ="java.util.*" %>
   <%@ page import="com.varun.DataBase"%>
   <%@ page import="java.sql.*" %>
   <%@ page import="org.json.*"%>
   <%@ page import ="net.sf.json.JSONArray" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ift.tt/kTyqzh">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DataTable</title>
</head>
<body>
<h1>Lets display the data from database using dataTabel</h1>

<%

String[] cols = { "id","engine", "browser", "platform", "version", "grade" };
String table = "ajax";

JSONObject result = new JSONObject();
JSONArray array = new JSONArray();


int amount = 10;
int start = 0;
int echo = 0;
int col = 0;

int  id;
String engine = "";
String browser = "";
String platform = "";
String version = "";
String grade = "";



String dir = "asc";
String sStart = request.getParameter("iDisplayStart");
String sAmount = request.getParameter("iDisplayLength");
String sEcho = request.getParameter("sEcho");
String sCol = request.getParameter("iSortCol_0");
String sdir = request.getParameter("sSortDir_0");

engine = request.getParameter("sSearch_0");
browser = request.getParameter("sSearch_1");
platform = request.getParameter("sSearch_2");
version = request.getParameter("sSearch_3");
grade = request.getParameter("sSearch_4");


List<String> sArray = new ArrayList<String>();
if (!engine.equals("")) {
    String sEngine = " engine like '%" + engine + "%'";
    sArray.add(sEngine);
    //or combine the above two steps as:
    //sArray.add(" engine like '%" + engine + "%'");
    //the same as followings
}

if (!browser.equals("")) {
    String sBrowser = " browser like '%" + browser + "%'";
    sArray.add(sBrowser);
}
if (!platform.equals("")) {
    String sPlatform = " platform like '%" + platform + "%'";
    sArray.add(sPlatform);
}
if (!version.equals("")) {
    String sVersion = " version like '%" + version + "%'";
    sArray.add(sVersion);
}
if (!grade.equals("")) {
    String sGrade = " grade like '%" + grade + "%'";
    sArray.add(sGrade);
}

String individualSearch = "";
if(sArray.size()==1){
    individualSearch = sArray.get(0);
}else if(sArray.size()>1){
    for(int i=0;i<sArray.size()-1;i++){
        individualSearch += sArray.get(i)+ " and ";
    }
    individualSearch += sArray.get(sArray.size()-1);
}


if (sStart != null) {
    start = Integer.parseInt(sStart);
    if (start < 0)
        start = 0;
}
if (sAmount != null) {
    amount = Integer.parseInt(sAmount);
    if (amount < 10 || amount > 100)
        amount = 10;
}
if (sEcho != null) {
    echo = Integer.parseInt(sEcho);
}
if (sCol != null) {
    col = Integer.parseInt(sCol);
    if (col < 0 || col > 5)
        col = 0;
}
if (sdir != null) {
    if (!sdir.equals("asc"))
        dir = "desc";
}


String colName = cols[col];
int total = 0;
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","system","admin");
try {
    String sql = "SELECT count(*) FROM "+table;
    PreparedStatement ps = conn.prepareStatement(sql);
    ResultSet rs = ps.executeQuery();
    if(rs.next()){
        total = rs.getInt("count(*)");
    }
}catch(Exception e){

}
int totalAfterFilter = total;
//result.put("sEcho",echo);

try {
    String searchSQL = "";
    String sql = "SELECT * FROM "+table;
    String searchTerm = request.getParameter("sSearch");
    String globeSearch =  " where (engine like '%"+searchTerm+"%'"
                            + " or browser like '%"+searchTerm+"%'"
                            + " or platform like '%"+searchTerm+"%'"
                            + " or version like '%"+searchTerm+"%'"
                            + " or grade like '%"+searchTerm+"%')";
    if(searchTerm!=""&&individualSearch!=""){
        searchSQL = globeSearch + " and " + individualSearch;
    }
    else if(individualSearch!=""){
        searchSQL = " where " + individualSearch;
    }else if(searchTerm!=""){
        searchSQL=globeSearch;
    }
    sql += searchSQL;
    sql += " order by " + colName + " " + dir;
    sql += " limit " + start + ", " + amount;

    PreparedStatement ps = conn.prepareStatement(sql);
    ResultSet rs = ps.executeQuery();
    while (rs.next()) {
        JSONArray ja = new JSONArray();
        //net.sf.json.JSONArray ja = new net.sf.json.JSONArray(); 

        ja.add(rs.getInt("id"));
        ja.add(rs.getString("engine"));
        ja.add(rs.getString("browser"));
        ja.add(rs.getString("platform"));
        ja.add(rs.getString("version"));
        ja.add(rs.getString("grade"));
        array.add(ja); 
    } 
    String sql2 = "SELECT count(*) FROM "+table;
    if (searchTerm != "") {
        sql2 += searchSQL;
        PreparedStatement ps2 = conn.prepareStatement(sql2);
        ResultSet rs2 = ps2.executeQuery();
        if (rs2.next()) {
            totalAfterFilter = rs2.getInt("count(*)");
        }
    }
    result.put("iTotalRecords", total);
    result.put("iTotalDisplayRecords", totalAfterFilter);
    result.put("aaData", array);
    response.setContentType("application/json");
    response.setHeader("Cache-Control", "no-store");
    out.print(result);
    conn.close();
} catch (Exception e) {

}
    %>

</body>
</html>

The Exception I get:

HTTP Status 500 - 

type Exception report

message 

description The server encountered an internal error () that prevented it from fulfilling this request.

exception 

org.apache.jasper.JasperException: Unable to compile class for JSP: 

An error occurred at line: 11 in the generated java file
Only a type can be imported. net.sf.json.JSONArray resolves to a package

An error occurred at line: 25 in the jsp file: /dataTable.jsp
JSONArray cannot be resolved to a type
22: String table = "ajax";
23: 
24: JSONObject result = new JSONObject();
25: JSONArray array = new JSONArray();
26: 
27: 
28: int amount = 10;


An error occurred at line: 25 in the jsp file: /dataTable.jsp
JSONArray cannot be resolved to a type
22: String table = "ajax";
23: 
24: JSONObject result = new JSONObject();
25: JSONArray array = new JSONArray();
26: 
27: 
28: int amount = 10;


An error occurred at line: 157 in the jsp file: /dataTable.jsp
JSONArray cannot be resolved to a type
154:     PreparedStatement ps = conn.prepareStatement(sql);
155:     ResultSet rs = ps.executeQuery();
156:     while (rs.next()) {
157:         JSONArray ja = new JSONArray();
158:         //net.sf.json.JSONArray ja = new net.sf.json.JSONArray(); 
159:         
160:         ja.add(rs.getInt("id"));


An error occurred at line: 157 in the jsp file: /dataTable.jsp
JSONArray cannot be resolved to a type
154:     PreparedStatement ps = conn.prepareStatement(sql);
155:     ResultSet rs = ps.executeQuery();
156:     while (rs.next()) {
157:         JSONArray ja = new JSONArray();
158:         //net.sf.json.JSONArray ja = new net.sf.json.JSONArray(); 
159:         
160:         ja.add(rs.getInt("id"));


Stacktrace:


org.apache.jasper.compiler.DefaultErrorHandler.javacError(DefaultErrorHandler.java:92)
        org.apache.jasper.compiler.ErrorDispatcher.javacError(ErrorDispatcher.java:330)
        org.apache.jasper.compiler.JDTCompiler.generateClass(JDTCompiler.java:439)
        org.apache.jasper.compiler.Compiler.compile(Compiler.java:335)
        org.apache.jasper.compiler.Compiler.compile(Compiler.java:313)
        org.apache.jasper.compiler.Compiler.compile(Compiler.java:300)
        org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:585)
        org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:312)
        org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:322)
        org.apache.jasper.servlet.JspServlet.service(JspServlet.java:249)
        javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
        org.jboss.web.tomcat.filters.ReplyHeaderFilter.doFilter(ReplyHeaderFilter.java:96)


note The full stack trace of the root cause is available in the JBoss Web/2.1.3.GA logs.




JBoss Web/2.1.3.GA