Bootstrap Snippet Dashboard Guages using HTML CSS Bootstrap 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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootswatch/3.0.3/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme">
<style>
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
</style>
</head>
<body>
    
<div class="container" style="width:990px;">
         <nav class="navbar navbar-basic navbar-outline" role="navigation">
         
                
        
                <div class="navbar-btn navbar-right">
                <div class="dropdown">
                    <button class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-cog"></span>
                        <span class="label-icon">Preferences</span>
                    </button>
                    <ul class="dropdown-menu" style="width:300px; padding:0px;">
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
* 
{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.navbar-basic.navbar-outline
{
background-color: transparent;
border-color: rgba(94, 94, 94,.5);
border-width:1px;
border-radius: 6px;
}
 .btn-outline
{
background-color: transparent;
border-color: rgba(94, 94, 94,.5);
color: rgba(94, 94, 94,.8);
border-width:1px;
}
.navbar-btn .btn-outline:hover
{
background-color: transparent;
border-color: rgb(94, 94, 94);
color: rgb(94, 94, 94);
border-width:1px;
transition: all .5s;
}
.navbar-btn .form-control, 
 input[type="text"]
{
background-color: #ffffff;
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
$(function(){
    
    $(".input-group-btn .dropdown-menu li a").click(function(){
        var selText = $(this).html();
    
        //working version - for single button //
       //$('.btn:first-child').html(selText+'<span class="caret"></span>');  
       
       //working version - for multiple buttons //
       $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
   });
});
        
function save_settings()
{
localStorage.setItem("background_color" , $( "#background_color" ).val());
localStorage.setItem("text_color", $( "#text_color" ).val());
localStorage.setItem("text_size", $( "#text_size" ).val());
localStorage.setItem("theme_name", $( "#theme_name" ).val());
localStorage.setItem("icon_label",$('input[name="icon_label"]:checked').val());
apply_preferences_to_page();
}
        
function load_settings()
{
var background_color = localStorage.getItem( "background_color" );
var text_color = localStorage.getItem( "text_color" );
var text_size = localStorage.getItem( "text_size" );
var theme_name = localStorage.getItem( "theme_name" );
var icon_label = localStorage.getItem( "icon_label" );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dashboard Guages"
Bootstrap 3.1.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Dashboard Guages" Bootstrap 3.1.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Dashboard Guages"
Bootstrap 3.1.0 Snippet by escapedlion