Bootstrap Snippet Round-tab-control using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <section>
        <div class="fg-round-tab">
            <div class="fg-round-tab-inner">
                <div class="connecting-line"></div>
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Løp 1">
                            <span class="round-tab dirt">
                                <div>1</div>
                                <!--<i class="glyphicon glyphicon-folder-open"></i>-->
                            </span>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Løp 2">
                            <span class="round-tab grass">
                                <div>2</div>
                                <!--<i class="glyphicon glyphicon-pencil"></i>-->
                            </span>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Løp 3">
                            <span class="round-tab dirt">
                                <div>3</div>
                                <!--<i class="glyphicon glyphicon-picture"></i>-->
                            </span>
                        </a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.fg-round-tab {
    margin: 20px auto;
    background: #fff;
}
    .fg-round-tab .nav-tabs {
        position: relative;
        margin: 40px auto;
        margin-bottom: 0;
        border-bottom-color: #e0e0e0;
    }
    .fg-round-tab > div.fg-round-tab-inner {
        position: relative;
    }
.connecting-line {
    height: 1px;
    background: #e0e0e0;
    position: absolute;
    width: 85%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}
span.round-tab {
    width: 50px;
    height: 50px;
    line-height: 48px;
    display: inline-block;
    border-radius: 100px;
    color: #555555;
    background: #fff;
    border: 3px solid #e0e0e0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready(function () {
    //Initialize tooltips
    $('.nav-tabs > li a[title]').tooltip();
    var numberOfRoundTabs = $('.round-tab').length
    if (numberOfRoundTabs > 0)
    {
        var x = 100 / numberOfRoundTabs;
        $(".fg-round-tab .nav-tabs > li").css({"width": x+'%'});
        if (numberOfRoundTabs < 9)
            $(".connecting-line").css({"width": '85%'});
        else
            $(".connecting-line").css({"width": '90%'});
        if (numberOfRoundTabs === 5){
           $(".fg-round-tab li:after").css({"left": '46%'});
           $(".fg-round-tab li.active:after").css({"left": '46%'});
        }
        else if (numberOfRoundTabs === 6){
           $(".fg-round-tab li:after").css({"left": '45%'});
           $(".fg-round-tab li.active:after").css({"left": '45%'});
        }
        else if (numberOfRoundTabs === 15){
           $(".fg-round-tab li:after").css({"left": '39%'});
           $(".fg-round-tab li.active:after").css({"left": '39%'});
        }
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Round-tab-control"
Bootstrap 3.3.0 Snippet by MrOC

Related: See More

Questions / Comments:

"Round-tab-control" Bootstrap 3.3.0 Snippet by MrOC

Related: See More

Questions / Comments:

"Round-tab-control"
Bootstrap 3.3.0 Snippet by MrOC