action on dropdown itemselect in bootstrap css - javascript

I created one dropdown list using bootstrap css
I want to change the color of label when item in dropdown menu selected. But here i dont know why the dropdown items are not visible
CODEPEN DEMO
<label> Test color </label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>yellow</li>
<li>green</li>
<li>black</li>
<li class="divider"></li>
<li>red</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
How can I change the color of label when color is selected from the menu?
UPDATED CODE:
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</body>
</html>

It looks like something is wrong with the way you've included Bootstrap 3 on your codepen.
The dropdown shows fine on Bootply using Bootstrap 3.0.3: http://bootply.com/103458
You can change the label text color with something like this:
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$('label').css('color',selText);
});

Related

Dynamically adding menu item won't toggle in sidebar-nav to Sb Admin 2

I'm new to bootstrap and JQuery. I am having a problem with SB Admin 2 bootstrap. I've stripped down an example (Dashboard) page and added a menu item to the sidebar-nav dynamically.
The problem is that the new menu item won't toggle / collapse.
Below is a snippet of the html of side menu which works.
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="navbar_brand">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
To dynamically add a new menu item I've added a click event handler as below.
$("#navbar_brand").click(function(){
$("#side-menu").append('<li><i class="fa fa-files-o fa-fw"></i> TEST Pages<span class="fa arrow"></span><ul class="nav nav-second-level"><li>Blank Page</li><li>Login Page</li></ul></li>');
});
The new menu item appears but doesn't toggle as the original Samples Pages menu. Could somebody help?
TIA
* UPDATE *
Please find below html file in question.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="navbar_brand">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Hover Rows
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="vendor/core/js/common.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="dist/js/sb-admin-2.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Page Custom JavaScript code -->
<script>
$( window ).on('load', function() {
console_log("page loadedd");
$(window).ready(function(){
console_log("page ready");
// setup page
$.pageInit();
});
});
$.pageInit = function() {
}
$("#navbar_brand").click(function(){
console_log("test");
$("#side-menu").append('<li><i class="fa fa-files-o fa-fw"></i> TEST Pages<span class="fa arrow"></span><ul class="nav nav-second-level"><li>Blank Page</li><li>Login Page</li></ul></li>');
});
</script>
</body>
</html>
Hard to tell exactly what the #side-menu functionality is without being able to look inside the JS scripts you're using, but you need to pay attention to the order in which JavaScript works. This is what your browser is doing:
Reading the HTML document.
Loading and executing all .js files. In here, your plugin is looking for #side-menu and applying functionality to its 2 existing <li> child elements.
Upon clicking on #navbar_brand, it's adding a 3rd <li> child to #side-menu, but this one never has any functionality added to it, since that took place in step 2.
You have 2 options:
Look into the plugin's features, and see if you can initiate it again after you've added the 3rd <li> child.
Have all 3 <li>s built into the HTML document, but have display: none in the CSS for the 3rd one. Once you click on #navbar_brand you can show it by changing its style to display: block or whatever you wish.

About <div ui-view></div> where to put in the code exactly

I am developping an application using bootstarap,Html and Angular js 1 for front .. it's an application spring boot indeed . i have a navar : the menu which i put in an index.html in static .. the other html file i put in static/views (divs) . Now when i started by adding "FicheFournisseur" which worked in the database and fine but now when i was structering my project i click on the "fiche fournisseur" in nav bar it don't take me the the div of FicheFournisseur.html .. After searshing i felt that something releated to angular js is not working : i guess cuz whenever i change its position things change and am not understading am not familiar with angular js
i put in the index
i started with last li : Fournisseurs ui-sref="newFournisseur" do not take me to to page newFournisseur.html which came in other menus
<!DOCTYPE html>
<html>
<head>
<body ng-app="MyApp" >
<div id="container">
<!--BEGIN TOPBAR-->
<div id="header-topbar-option-demo" class="page-header-topbar">
<nav id="topbar" role="navigation" style="margin-bottom: 0;" data-step="3" class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<img src="../node_modules/bootstrap/dist/images/logo/logo.png">
</div>
<div class="topbar-main"><a id="menu-toggle" href="#" class="hidden-xs"><!--<i class="fa fa-bars"></i>--></a>
<a id="logo" href="index.html" class="navbar-brand"><span class="logo-text" style="color: #fff; margin-left: 50px;">
SYSTÈME INFORMATISÉ DE SUIVI ET ÉVALUATION DES PROGRAMMES ET DES PROJETS PUBLICS </span></a>
</div>
</nav>
<!--BEGIN MODAL CONFIG PORTLET-->
<div id="modal-config" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<h4 class="modal-title">modal</h4>
</div>
<div class="modal-body">
<p>
contenu du modal
</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default"> valider</button>
<button type="button" class="btn btn-primary">annuler</button>
</div>
</div>
</div>
</div>
<!--END MODAL CONFIG PORTLET-->
</div>
<!--END TOPBAR-->
<div id="wrapper">
<!--BEGIN SIDEBAR MENU-->
<nav id="sidebar" class="nav navbar-default navbar-static-side" role="navigation" data-step="2"
data-position="right">
<!-- <ul class="nav__list">
<li>
</span> Accueil </label>
</li>
</ul> -->
<ul class="nav__list">
<li>
<input id="group-1" type="checkbox" hidden />
<label for="group-1"><span class="fa fa-angle-right"></span> Suivi des marchés </label>
<ul class="group-list">
<div class="clearfix"></div>
<li>
<input id="sub-group-6" type="checkbox" hidden />
<label for="sub-group-6"><span class="fa fa-angle-right"></span> Consignation des marchés </label>
<ul class="sub-group-list">
<li>
<input id="sub-group-2" type="checkbox" hidden />
<label for="sub-group-2"><span class="fa fa-angle-right"></span> Fiche marché</label>
<ul class="sub-group-list">
<li class="active"><a href="test1.html">Fiche marché</li>
<li><a class="" href="modification.html">Consignation avenant</a></li>
</ul>
</li>
<li class="active">yyy</li>
<!-- insérer plus -->
</ul>
</li>
<li>
<input id="sub-group-20" type="checkbox" hidden />
<label for="sub-group-20"><span class="fa fa-angle-right"></span> Consignation des appels à la concurrence </label>
<ul class="sub-group-list">
<!-- <li class="active">ici</li> -->
<li>
<input id="sub-group-3" type="checkbox" hidden />
<label for="sub-group-3"><span class="fa fa-angle-right"></span> Fiche appel à la concurrence </label>
<ul class="sub-group-list">
<li>
<input id="sub-group-4" type="checkbox" hidden />
<label for="sub-group-4"><span class="fa fa-angle-right"></span> Fiche lot</label>
<ul class="sub-group-list">
<li class="active">Fiche Activité</li>
<li><a class="" href="">xxx</a></li>
<li><a class="" href="">xxxx</a></li>
</ul>
</li>
<!--<li class="active"><a href="#">Fiche lot</li>
<li><a class="" href="">xxx</a></li>
<li><a class="" href="">xxxx</a></li> -->
</ul>
</li>
<!-- insérer plus -->
</ul>
</li>
<li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Fournisseurs</label>
<ul class="sub-group-list">
<li class="active"><a ui-sref="newFournisseur">Fiche Fournisseur</a></li>
</ul>
</li>
<!--<li>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Financement</label>
<ul class="sub-group-list">
<li class="active">2nd level nav item</li>
<li>2nd level nav item</li>
<li>2nd level nav item</li>
<li>
<input id="sub-sub-group-1" type="checkbox" hidden />
<label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li>3rd level nav item</li>
<li>3rd level nav item</li>
<li>3rd level nav item</li>
</ul>
</li>
</ul>
</li>-->
</ul>
</li>
</ul>
</nav>
<!--END SIDEBAR MENU-->
<!--BEGIN PAGE WRAPPER-->
<div id="page-wrapper">
<!--BEGIN CONTENT-->
<div class="page-content">
<div id="tab-general">
<div class="row mbl">
<div ng-view></div>
</div>
</div>
</div>
<!--END CONTENT-->
</div>
<!--END PAGE WRAPPER-->
</div>
</div>
<!--END PAGE CONTAINER-->
<script src="../node_modules/bootstrap/dist/js/jquery-3.1.1.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../node_modules/bootstrap/dist/js/jquery-3.1.1.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div ui-view></div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Bootstrap slider not working: slider is not a function

my Bootstrap slider is not working. I'm not sure why. Here' my HTML where all css and js loading correctly. I get an error in console: slider is not a function. I downloaded the latest version of bootstrap slider (using Chrome). The slider, if triggered from console also doesn't work.
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="/static/css/header.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider();
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">How it works</li>
<li>Find Vet</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Company</li>
<li>Team</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="content">
<input type="text" class="" value="" data-slider-min="2" data-slider-max="25" data-slider-step="1" data-slider-value="25" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="show">
</div>
<link rel="stylesheet" href="/static/css/bootstrap-min.css"/>
<link rel="stylesheet" href="/static/css/header.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/static/css/bootstrap-side-notes.css" />
<link rel="stylesheet" href="/static/css/animate.css"/>
<link rel="stylesheet" href="/static/css/bootstrap-formhelpers-min.css" media="screen"/>
<link rel="stylesheet" href="/static/css/slider.css"/>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-formhelpers-min.js"></script>
<script type="text/javascript" src="/static/js/validator.min.js"></script>
<script type="text/javasript" src="/static/js/bootstrap-slider.js"></script>
</body>
</html>
<script type="text/javasript" src="/static/js/bootstrap-slider.js"></script>
Typo on the type, missing a 'c' in javascript should be:
<script type="text/javascript" src="/static/js/bootstrap-slider.js"></script>
I'd suggest looking into a good IDE/Editor.

Javascript with XSL

I'm trying to make dropdown using Bootstrap framework. This is how I did:
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
Just like in example. And this is how I include .js in xsl:
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"> </script>
So the menu doesn't work. I see few buttons, but no dropdown effect.
You must also include jQuery and bootstrap css:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Don't forget to include jQuery BEFORE bootstrap js.

Twitter Bootstrap drop down menu is not working

I have included twitter bootstrap css and js files, and then using the following Javascript code, I want to applyn drop down effect to the the HTML markup. But it does not work, neither does show any error in console. Please helpe me.
I have included:
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap-responsive.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap.min.css">
<script src="http://localhost/game/public/js/bootstrap.min.js"></script>
<script src="http://localhost/game/public/js/bootstrap-datepicker.js"></script>
And this is the Javascript:
<script type="text/javascript">
$(document).ready(function(){
$('.nav').dropdown();
});
</script>
And this is the Markup:
<ul class='nav nav-pills pullright'>
<li class="btn btn-navbar">خانه کاربری</li>
<li class="btn btn-navbar"><a class="dropdown-toggle" href="#">سفارش جدید</a>
<ul class="dropdown-menu nav-collapse">
<li class="btn btn-navbar">سفارش بازی
<ul>
<li class="btn btn-navbar">Counter Strike
</ul>
<li>
</ul>
</li>
<li class="btn btn-navbar">سفارش بازی</li>
<li class="btn btn-navbar">فهرست سفارش ها</li>
<li class="btn btn-navbar" >فهرست پرداخت ها</li>
<li class="btn btn-navbar">ثبت فیش پرداختی</li>
<li class="btn btn-navbar">حساب کاربری</li>
<li class="btn btn-navbar">تغییر رمز عبور</li>
<li class="btn btn-navbar">خروج</li>
</ul>
You don't need any javascript, just include the bootstrap css and js files in your pages.
You can see an example of the dropdown component here :
http://getbootstrap.com/components/#btn-dropdowns

Categories