Bootstrap Snippet Nth level Poll drill down control using HTML 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="panel panel-primary" style="width:30%; margin:20px" >
    <div class="panel-heading">
    <h3 class="panel-title">
        Poll: Browser Statistics
    </h3>    
  </div>     
    <div class="panel-body"  style="margin:0px; width:115%;">
      
      <div id="Main">
         <a name="poll_bar">Chrome </a> <span name="poll_val">60.1% </span><br/>
       <a name="poll_bar">Firefox</a> <span name="poll_val">23.4% </span><br/>
       <a name="poll_bar">IE     </a> <span name="poll_val">9.8%  </span><br/>
       <a name="poll_bar">Safari </a> <span name="poll_val">3.7%  </span><br/>
       <a name="poll_bar">Opera  </a> <span name="poll_val">1.6%  </span><br/>
    </div>
    
    <!-- Chrome yearly usages detail -->
    <div id="Chrome">
         <a name="poll_bar">chrome-2014</a> <span name="poll_val">60% </span><br/>
       <a name="poll_bar">chrome-2013</a> <span name="poll_val">55% </span><br/>
       <a name="poll_bar">chrome-2012</a> <span name="poll_val">46%  </span><br/>
       <a name="poll_bar">chrome-2011</a> <span name="poll_val">34%  </span><br/>
    </div>
    
    <!-- Chrome monthly usages detail -->
    <div id="chrome-2014">
         <a name="poll_bar">November </a> <span name="poll_val">60.1% </span><br/>
       <a name="poll_bar">October  </a> <span name="poll_val">40.4% </span><br/>       
       <a name="poll_bar">September</a> <span name="poll_val">59.6% </span><br/>              
    </div>
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
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
$(document).ready(function(){
        // add button style 
        $("[name='poll_bar'").addClass("btn btn-default");
        // Add button style with alignment to left with margin.
        $("[name='poll_bar'").css({"text-align":"left","margin":"5px"});        
        
        //loop 
        $("[name='poll_bar'").each(
                function(i){            
                  //get poll value  
                    var bar_width = (parseFloat($("[name='poll_val'").eq(i).text())/2).toString();                  
                    bar_width = bar_width + "%"; //add percentage sign.                                     
                    //set bar button width as per poll value mention in span.
                    $("[name='poll_bar'").eq(i).width(bar_width);                   
                    
                    //Define rules.
                    var bar_width_rule = parseFloat($("[name='poll_val'").eq(i).text());                     
                    if(bar_width_rule >= 50){$("[name='poll_bar'").eq(i).addClass("btn btn-sm btn-success")}
                    if(bar_width_rule <  50){$("[name='poll_bar'").eq(i).addClass("btn btn-sm btn-warning")}
                    if(bar_width_rule <= 10){$("[name='poll_bar'").eq(i).addClass("btn btn-sm btn-danger")}                 
                    
                    //Hide dril down divs
                    $("#" + $("[name='poll_bar'").eq(i).text()).hide();
      });
      
      //On click main menu bar show its particular detail div.
      $("[name='poll_bar'").click(function()
      {  
         //Hide all 
         $(".panel-body").children().hide();
         //Display only selected bar texted div sub chart.
         $("#" + $(this).text()).show();
         //If not inner drill down sub detail found then move to main menu.
         if($("#" + $(this).text()).length == 0) {
                   $("#Main").show();            
                }               
      }); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Nth level Poll drill down control"
Bootstrap 3.3.0 Snippet by parasaniasandip

Related: See More

Questions / Comments:

"Nth level Poll drill down control" Bootstrap 3.3.0 Snippet by parasaniasandip

Related: See More

Questions / Comments:

"Nth level Poll drill down control"
Bootstrap 3.3.0 Snippet by parasaniasandip