Working dashboard.

by Kiran Duggal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
</div>
<div class="dash-board-text-container" >
    <ul class="nav nav-tabs db-nav-tabs" id="tabs">
        <li class="active" >
            <a class="" data-toggle="tab" href="#dashboard-content">Dashboard</a>
                <span class="db-nav-tab-icons" >
                    <i class="glyphicon glyphicon-edit db-edit-tab" ></i>
                    <i class="glyphicon glyphicon-trash db-del-tab"></i>
                </span>
        </li>
        <li>
            <a data-toggle="tab" href="#overview-content">Overview</a>
                <span class="db-nav-tab-icons" >
                    <i class="glyphicon glyphicon-edit db-edit-tab" ></i>
                    <i class="glyphicon glyphicon-trash db-del-tab"></i>
                </span>
        </li>
        <span class="glyphicon glyphicon-plus db-add-new-tab"></span>
          </ul>
</div>

<div class="tab-content">
        <div class="tab-pane fade in active"  id="dashboard-content" >
            <div class="row">
                <form class="search-dashboard" role="search">
                    <div class="input-group col-lg-6 col-md-6 col-sm-6  col-xs-6" style="margin:0 auto;">
                        <input type="text" class="form-control " placeholder="Search" name="srch-term" id="srch-term" >
                        <div class="input-group-btn">
                            <button class="btn btn-white " type="reset" >
                                <span class="glyphicon glyphicon-search glyphiconColor"></span>
                            </button>
                        </div>
                    </div>
                </form>
           ...

CSS

/**************** Tabs ****************************/

::-webkit-scrollbar {


}


.db-nav-tabs{
    border-bottom: none !important;
    padding-left: 14px !important;

}

.db-nav-tabs>li>a,
.db-nav-tabs>li>a:focus,
.db-nav-tabs>li>a:hover
{
    float: left;

    padding-right: 5px !important;
    padding-left: 5px !important;
    border: none !important;
    cursor: pointer !important;
}

.db-nav-tabs>li.active>a,
.db-nav-tabs>li.active>a:focus,
.db-nav-tabs>li.active>a:hover
{

    background: #efefef;
    border: none !important;
}

.active-tab-name{
    display: none;
    white-space: nowrap;
    overflow: hidden;
    color: #db5953 !important;


}

.db-navbar-form-custom,
.nav-tabs-custom{
    padding-left: 0px;
    border:none !important;
}


.db-nav-bar-search ul.nav-tabs>li>a,
.db-nav-bar-search ul.nav-tabs>li>a:focus,
.db-nav-bar-search ul.nav-tabs>li>a:hover
{

    color: #db5953 !important;
    border: none !important;
    background: none !important;
}

.db-nav-bar-search ul.nav-tabs>li.active>a,
.db-nav-bar-search ul.nav-tabs>li.active>a:focus,
.db-nav-bar-search ul.nav-tabs>li.active>a:hover
{
    background: #efefef;
    border: none !important;
    color: #db5953 !important;
}

.db-nav-tab-icons{
    visibility:hidden;
    opacity:0;
}
.db-nav-tabs li:hover .db-nav-tab-icons{
    display: inline;
    transition: opacity 400ms ease-out;
    visibility:visible;
    opacity:1;
}

.db-nav-tab-icons i{
    padding: 10px 2px;
}

.db-add-new-tab{
    padding: 10px 15px;

}

/**************** End of Tabs ****************************/

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}


.search-dashboard{
    margin-top: 50px;
    margin-bottom: 50px;
}

.component-header-container{
    float: left;
    width: 70%;
}

.dashboard-portlet-header ul {
    margin-bottom: 0px !important;

}
.dashboard-portlet-header ul  li:last-child{
    padding-right:...

JavaScript

/* ************  Add a new tab to tabmenu  ************ */
    var tabCount = 2;
    $('.db-add-new-tab').click(function (e) {
        tabCount++;
        var nextTab = tabCount;

        // create the tab
        $('<li><a href="#tab' + nextTab + '" data-toggle="tab">Tab ' + nextTab + '</a> <span class="db-nav-tab-icons" > <i class="glyphicon glyphicon-edit" ></i>  <i class="glyphicon glyphicon-trash db-del-tab"></span></li>').appendTo('#tabs');

        // create the tab content
        $('<div class="tab-pane fade in" id="tab' + nextTab + '">tab' + nextTab + ' content</div>').appendTo('.tab-content');

        // make the new tab active
        //console.log(removeTab);
        $('#tabs').find('.glyphicon-trash').click(removeTab);
        $('#tabs a:last').tab('show');

    });

    /* ************  End of Add a new tab to tabmenu  ************ */
    /* ************  delete a tab to tabmenu  ************ */

    /* function removeTab(){
            $(this).closest('li').remove();
        }*/
    var removeTab = function () {

        var contentId = $(this).closest('li').find('a').attr('href');
        contentId = contentId.replace('#', '');
        $('#' + contentId).remove();
        $(this).closest('li').remove();
          $('#tabs a:first').tab('show');

    };

    $('.db-del-tab').click(removeTab);

    /* ************  End of delete a tab to tabmenu ************ */

    $('#p4tMainContent').scroll(function () {
        if ($(this).scrollTop() > 10) {
            //console.log($('#myTabs li.active a').text());
            var activetab = $('.db-nav-tabs li.active a').text();
            $('.active-tab-name').html(activetab);
            $(".active-tab-name").animate({
                width: 'show'
            }, 500);
        } else {
            $(".active-tab-name").animate({
                width: 'hide'
            }, 500);
        }
    });
    /* ******************** calculation the height of flipable div  ************************** */


   ...