"Nav Bar 4.5"
Bootstrap 3.1.0 Snippet by escapedlion

<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 lang="en"> <head> <title>Support</title> <!-- Force IE to turn off past version compatibility mode and use current version mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <!-- Get the width of the users display--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Text encoded as UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- icons --> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <!-- bootstrap --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default"> <!-- theme --> <link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <style> body {background-color: rgb(224, 224, 224);} table#TixManagementContent { background-color: rgb(252, 252, 253); } table { background-color: rgb(224, 224, 224); } a:active, a:focus, .btn:active, .btn:focus {outline: 0;} #wrapper {margin:0px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 0px;} #wrapper * { -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; } nav.navbar {margin-top:0px; margin-bottom: 0px;} nav.navbar form.navbar-form .input-group-btn ul.dropdown-menu{ min-width: 25px;} nav.navbar {border-radius: 0px;} nav.navbar div#col1.pull-left div.navbar-btn button.btn {margin-left: 10px;} nav#navbar div#col2.pull-left form.navbar-form div.input-group input#search.form-control {width: 100%;} nav.navbar div#col3.pull-right div.navbar-btn div.dropdown button.btn {margin-right: 10px;} nav#navbar.navbar div#col1.navbar-wide, nav#navbar.navbar div#col3.navbar-wide {width: 15%;} nav#navbar.navbar div#col2.navbar-wide {width: 70%;} nav#navbar.navbar div#col1.navbar-narrow, nav#navbar.navbar div#col3.navbar-narrow {width: 25%;} nav#navbar.navbar div#col2.navbar-narrow {width: 50%;} form#preferences.form-horizontal div#preferences.panel div.panel-body div.form-group div.col-lg-6 div.btn-group label.toggle-button { width: 50%;} .cyborg #wrapper { background-color: rgba(34, 34, 34, .1);} .cyborg table { background-color: rgb(224, 224, 224); } .cyborg table#TixManagementContent { background-color: rgb(6, 6, 6); } .cyborg div#wrapper div.panel div.panel-body { background-color: rgb(204, 204, 204);} </style> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries in IE8, IE9 --> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script> <![endif]--> </head> <body class="default"> <!---- top nav ---> <center> <table width="990px" id="TixManagementContent" class="TixManagementContent"> <tbody> <tr> <td align="left"> <div class="boxed-page"> <!---- top nav ---> <nav id="navbar" class="navbar navbar-default" role="navigation"> <div id="col1" class="navbar-narrow pull-left" data-squery="min-width:50px=wide"> <div class="navbar-btn navbar-left"> <button class="btn btn-dash btn-default"> <span class="glyphicon glyphicon-align-justify"></span> <span class="icon-label">Menu</span> </button> </div> <div class="navbar-btn navbar-left"> <button class="btn btn-default btn-dash"> <span class="glyphicon glyphicon-dashboard"></span> <span class="icon-label">Dashboard</span> </button> </div> </div> <div id="col2" class="navbar-narrow pull-left" > <form ACTION="./support/tixdashboard/clientsearch/index.asp" METHOD="post" NAME="SearchForm" class="navbar-form navbar-search" role="search"> <div class="input-group double-input" > <span class="input-group-btn btn-block" > <button class="btn btn-default btn-dash dropdown-toggle" type="button" data-toggle="dropdown"> <span class="glyphicon glyphicon-search"></span> <span class="icon-label">Search By</span> <span class="caret"></span> </button> <ul class="dropdown-menu pull-left" role="menu"> <li> <a href="#"> <span class="glyphicon glyphicon-user"></span> <span class="icon-label">Search By User</span> </a> </li> <li> <a href="#" class="disabled"> <span class="glyphicon glyphicon-book"></span> <span class="icon-label">Search By Organization</span> </a> </li> <li> <a href="#" class="disabled"> <span class="glyphicon glyphicon-search"></span> <span class="icon-label">Search</span> </a> </li> </ul> </span> <input type="search" NAME="SearchString" class="form-control search-input" id="search" placeholder="Search" autocomplete="off"> <div class="input-group-btn navbar-btn btn-dash"> <button class="btn btn-default btn-go"> GO </button> </div> </div> </form> </div> <div id="col3" class="navbar-narrow pull-right" > <div class="navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default btn-dash dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="icon-label">Preferences</span> </button> <ul class="dropdown-menu" style="width:300px; padding:0px;"> <li> <form class="form-horizontal" id="preferences" action="" method="post" accept-charset="utf-8"> <div class="panel panel-default" id="preferences" style="margin:0px;"> <div class="panel-heading"> <span class="panel-label">User Preferences</span> </div> <div class="panel-body"> <div class="form-group"> <label for="theme_name" class="col-lg-6 control-label"> Theme </label> <div class="col-lg-6"> <select class="form-control" id="theme_name" name="theme_name"> <option value="amelia"> Amelia </option> <option value="bootstrap"> Default </option> <option value="cerulean"> Cerulean </option> <option value="cosmo"> Cosmo </option> <option value="cyborg"> Cyborg </option> <option selected value="flatly"> Flatly </option> <option value="journal"> Journal </option> <option value="lumen"> Lumen </option> <option value="readable"> Readable </option> <option value="simplex"> Simplex </option> <option value="slate"> Slate </option> <option value="spacelab"> Spacelab </option> <option value="superhero"> Superhero </option> <option value="united"> United </option> <option value="yeti"> Yeti </option> </select> </div> </div> <div class="form-group"> <label for="navbar_style" class="col-lg-6 control-label" > Navbar Style </label> <div class="col-lg-6"> <select class="form-control" id="navbar_style" name="navbar_style"> <option value="navbar-default">Basic</option> <option value="navbar-default">Default</option> <option value="navbar-inverse">Inverse</option> <option value="navbar-inverse">Outline</option> </select> </div> </div> <div class="form-group"> <label for="btn_style" class="col-lg-6 control-label" > Navbar Buttons </label> <div class="col-lg-6"> <select class="form-control" id="btn_style" name="btn_style"> <option value="btn-primary">Primary</option> <option value="btn-default">Default</option> <option value="btn-success">Success</option> <option value="btn-info">Info</option> <option value="btn-warning">Warning</option> <option value="btn-danger">Danger</option> <option value="btn-inverse">Inverse</option> </select> </div> </div> <div class="form-group"> <label for="text_size" class="col-lg-6 control-label"> Display Label </label> <div class="col-lg-6"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default toggle-button"> <input id="display_label_show" name="display_label" type="radio" value=""> Show </label> <label class="btn btn-default toggle-button"> <input id="display_label_hide" name="display_label" type="radio" value="hide" > Hide </label> </div> </div> </div> </div> <div class="panel-footer"> <div class="form-group"> <div class="col-lg-12"> <button type="submit" class="btn btn-primary btn-block">Update</button> </div> </div> </div> </div> </form> </li> </ul> </div> </div> <div class="navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default btn-dash dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-bell"></span> <span class="icon-label">Alerts</span> </button> </div> </div> </div> </nav> <div id="wrapper"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title" style="text-align:left;"> Organization Information </div> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding:5px; border-radius:6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding:2px;"> <div class="fa fa-clock-o fa-3x"></div> <div class="icon-label">Time Zone</div> </button> <button class="btn btn-inverse btn-block" style="height:40px;"> TimeZone </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding:5px; border-radius:6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding:2px;"> <div class="fa fa-desktop fa-3x"></div> <div class="icon-label">Platform</div> </button> <button class="btn btn-inverse btn-block" style="height:40px;"> Platform </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding:5px; border-radius:6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding:2px;"> <div class="fa fa-shopping-cart fa-3x"></div> <div class="icon-label">Gateway</div> </button> <button class="btn btn-inverse btn-block" style="height:40px;"> OrgCCP </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding:5px; border-radius:6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding:2px;"> <div class="fa fa-print fa-3x"></div> <div class="icon-label">Fullfilment</div> </button> <button class="btn btn-inverse btn-block" style="height:40px;"> TicketPrinting </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding:5px; border-radius:6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding:2px;"> <div class="fa fa-briefcase fa-3x"></div> <div class="icon-label">Rep</div> </button> <button class="btn btn-inverse btn-block" style="height:40px;"> SalesRep </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding:5px; border-radius:6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding:2px;"> <div class="fa fa-user fa-3x"></div> <div class="icon-label">Contact</div> </button> <button class="btn btn-inverse btn-block" style="height:40px;"> PrimaryContact </button> </div> </div> </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title"> Private Label <div class="pull-right"> <button class="btn btn-primary fa fa-chevron-left left" href="#carousel-example" data-slide="prev"></button> <button class="btn btn-primary fa fa-chevron-right right" href="#carousel-example" data-slide="next"></button> </div> </div> </div> <div class="panel-body"> <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> downtowntheater </h5> <h5 class="price-text-color"> TIX2 </h5> </div> <div class="price col-md-6"> <h5> </h5> <h5 class="price-text-color"> 1 of 2 </h5> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i> <a href=" " class="hidden-sm">Launch</a> </p> <p class="btn-details"> <i class="fa fa-list"></i> <a href=" " class="hidden-sm">Email</a> </p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> downtowntheater </h5> <h5 class="price-text-color"> TIX2 </h5> </div> <div class="price col-md-6"> <h5> </h5> <h5 class="price-text-color"> 2 of 4 </h5> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i> <a href=" " class="hidden-sm">Launch</a> </p> <p class="btn-details"> <i class="fa fa-list"></i> <a href=" " class="hidden-sm">Email</a> </p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> website </h5> <h5 class="price-text-color"> TIX </h5> </div> <div class="price col-md-6"> <h5> </h5> <h5 class="price-text-color"> 3 of 4 </h5> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i> <a href="http://www.jquery2dotnet.com" class="hidden-sm">Launch</a> </p> <p class="btn-details"> <i class="fa fa-list"></i> <a href="http://www.jquery2dotnet.com" class="hidden-sm">Email</a> </p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> downtowntheater </h5> <h5 class="price-text-color"> TIX2 </h5> </div> <div class="price col-md-6"> <h5> </h5> <h5 class="price-text-color"> 4 of 4 </h5> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i> <a href=" " class="hidden-sm">Launch</a> </p> <p class="btn-details"> <i class="fa fa-list"></i> <a href=" " class="hidden-sm">Email</a> </p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> <!-- footer inclue --> </div> </td> </tr> </tbody> </table> </center> <!-- footer inclue <script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript" ></script> <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript" ></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="js/responsive-containers.min.js"></script> --> <script type="text/javascript"> $( "div:eq( 5 )" ).removeClass( "TixManagementContent" ).attr("class", "boxed-page" ); $( "table:eq( 1 )" ).attr("id", "TixManagementContent").attr("class", "TixManagementContent"); $( "#TixManagementContent" ).removeAttr("style"); </script> <script type="text/javascript"> function save_settings() { //Get form values and save to local storage localStorage.setItem("theme_name", $( "#theme_name" ).val()); localStorage.setItem("navbar_style" , $( "#navbar_style" ).val()); localStorage.setItem("btn_style", $( "#btn_style" ).val()); localStorage.setItem("display_label",$('input[name="display_label"]:checked').val()); apply_preferences_to_page(); } function load_settings() { //Get settings stored in local storage var theme_name = localStorage.getItem( "theme_name" ); var navbar_style = localStorage.getItem( "navbar_style" ); var btn_style = localStorage.getItem( "btn_style" ); var display_label = localStorage.getItem( "display_label" ); //Update form with preferences $("#navbar_style").val(navbar_style); $("#btn_style").val(btn_style); $("#theme_name").val(theme_name); $("input[type=radio][name=display_label]").prop("checked",true); apply_preferences_to_page(); } function apply_preferences_to_page() { var theme_name = localStorage.getItem("theme_name"); var navbar_style = localStorage.getItem("navbar_style"); var btn_style = localStorage.getItem("btn_style"); var display_label = localStorage.getItem("display_label"); //apply setting to the page $("body").attr("class",theme_name); //$("#wrapper").attr("class",theme_name); $("nav#navbar").attr("class", "navbar "+navbar_style); $("nav#navbar.navbar div.navbar-btn button.btn-dash").attr("class","btn btn-dash "+btn_style); $(".icon-label").attr("class",'icon-label '+display_label); $('link[title="theme"]').attr('href','http://netdna.bootstrapcdn.com/bootswatch/3.1.0/'+theme_name+'/bootstrap.min.css'); $(".current-theme").html(theme_name); display_preferences(); } function display_preferences() { //the variable that will hold the results var dataLog = ""; var i = 0; //how many items are in the database starting with zero var logLength = localStorage.length-1; dataLog = "<thead><tr class='active'><th>Item Name</th><th>Item Data</th></tr></thead><tbody>" //now we are going to loop through each item in the database for (i = 0; i <= logLength; i++) { //lets setup some variables for the key and values var itemKey = localStorage.key(i); var itemData = localStorage.getItem(itemKey); //now that we have the item, lets add it to the table dataLog += '<tr><td>'+itemKey+'</td><td>'+itemData+'</td></tr>'; } //if there were no items in the database if (dataLog == "") dataLog = '<li class="empty">Log Currently Empty</li>'; //update the ul with the list items $("#theLog").html(dataLog); } $(function() { load_settings(); $('form#preferences').submit(function(event){ event.preventDefault(); save_settings(); }); }); </script> </html>

Related: See More


Questions / Comments: