Friday 30 May 2014

Bootstrap Touch Carousel cycle option

Here is the way you can enable infinite cycling on Bootstrap touch carousel. ( https://github.com/ixisio/bootstrap-touch-carousel )

Step 1: Find the below function in bootstrap-touch-carousel.js file.

g.prototype._showPane = function(a) { 
        this.$items.eq(this.current_pane).toggleClass("active"), a >= this.pane_count && this.pause(), a = Math.max(0, Math.min(a, this.pane_count - 1));
        this.$items.eq(a).toggleClass("active");
        this.current_pane = a;
        var b = -(100 / this.pane_count * this.current_pane);
        return this._setContainerOffset(b, !0, a), this
    }

 

Step 2: Add the below if condition as first line inside the function.

if(a === this.pane_count){ a = 0; }

 Final Code:

g.prototype._showPane = function(a) {      

        if(a === this.pane_count){a = 0;}
        this.$items.eq(this.current_pane).toggleClass("active"), a >= this.pane_count && this.pause(), a = Math.max(0, Math.min(a, this.pane_count - 1));
        this.$items.eq(a).toggleClass("active");
        this.current_pane = a;
        var b = -(100 / this.pane_count * this.current_pane);
        return this._setContainerOffset(b, !0, a), this
    }

 

Thats it. I've tested it on all touch devices and its working fine.

Friday 10 May 2013

Capture Esc event while video in Fullscreen ( Javascript ):


Solution : 

    IMP: Firefox/Chrome/Safari (Not tested in IE)
            
           var timer, myVideo = _V_("<video tag id>");
           $(window).resize(function (e) {  
               clearTimeout(timer);      
               timer = setTimeout( function(){

                                                     if (myVideo.isFullScreen) {          
                                                                       //Fullscreen Mode 
                                                      } else {
                                                                       //Back from Fullscreen Mode                                                                     }   

                             }, 100);
           });



Note :  _V_ is VideoJs attribute.