Bootstrap smooth animation change column width

In bootstrap there is a great grid layout system.
My request today was to resize a column dynamically

I found this sample:
http://jsfiddle.net/tolginho/EBqZv/5/

My target was collapse a right column like a sidebar:
this is the result:
http://jsfiddle.net/0gg8ych3/1/

Here my HTML code:

<div class="container-fluid">
    <div class="row-fluid">
      <div id="colA" class="col-xs-9" style="background:blue">Col 1</div>
      <div id="colB" class="col-xs-3 " style="background:red">Col 2</div>
    </div>
    <div>
      <button type="button" id="btnTest" class="btn">button</button>
    </div>
</div>

My Javascript

$(document).ready(function () {
    $("#btnTest").on("click", function () {
    	    var $self = $(this);
        var $colRight = $("#colB");
        var $colLeft = $("#colA");
                
        $self.toggleClass("disabled");
        var hasHidden = $colRight.hasClass("hidden");
      
      	$colRight.toggleClass("hidden"); 
        if (!hasHidden) {
            $colRight.toggleClass("col-xs-3 col-xs-0");
            $colLeft.toggleClass("col-xs-9 col-xs-12");
        }
        else {
            setTimeout(function(){
	        $colRight.toggleClass("col-xs-3 col-xs-0");
            	$colLeft.toggleClass("col-xs-9 col-xs-12");
            }, 0);
        }
     
	setTimeout(function(){
        	$self.toggleClass("disabled");
        }, 300);

    });
});

My CSS

.col-xs-0, .col-sm-0, .col-md-0, .col-lg-0 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-0 {
 float: left; width: 0;
 }

@media (min-width: 768px) {
  .col-sm-0 {
 float: left; width: 0;
 }
}

@media (min-width: 992px) {
  .col-md-0 {
 float: left; width: 0;
 }
}

@media (min-width: 1200px) {
  .col-lg-0 {
 float: left; width: 0;
 }
}
.row-fluid {
    overflow:hidden;
    margin-right: -15px;
    margin-left: -15px;
}
.row-fluid div {
    -webkit-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    -moz-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    -o-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}
Annunci

Informazioni su Andrea Regoli

Project Manager .Net Developer WPF WP7 Asp.Net c# javascript ajax SQL sharepoint
Questa voce è stata pubblicata in Bootstrap, HTML5 e contrassegnata con , , , , , . Contrassegna il permalink.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...