I want to change the background color of this nav when active/clicked, how can I achieve this? using css
<div class="row container-fluid mainTabCon" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
help is appreciated
Add this script to the end of the body or your script file:
(taken from w3 schools and adjusted to you)
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Then just style the .active class:
.active {
background-color: blue;
}
Full page with code described:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
.active {
background-color: blue;
}
</style>
<body>
<div class="row container-fluid mainTabCon" id="myDiv" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
<script>
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
After some discussion with other users, are you referring to Bootstrap's js libraries? If not, add them to the end of the body and ignore the code above to see if it works.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
I have an array of color id and code, I am using ng-repeat in <li> tag to display all colors, but I want to display only colors which have colorCode < 10 and hide the colors which have colorCode >10, and I have '+' button, onClick of this button I want to display colors which are hidden and button show '-'icon, and then again onClick of button hide the colors which have ColorCode >10. Here is my code:
<div class="row py-3 border_bootom_1">
<div class="col-lg-2 align-self-center">
<h4 class="card-title"> Color </h4>
</div>
<div class="col-lg-10 align-self-center">
<ul class="ss_size_general ss_size_general_1">
<li class="pointer" ng-repeat="color in $ctrl.parameters.colors">
<a href="#"
ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}"
ng-click="$ctrl.setParameter('colors', color.code.toString())" title="{{color.name}}">
<div class="verticle_center"><span>{{color.label}}</span></div>
</a>
</li>
<li>
<a><div class="verticle_center pointer colorbtn"><i class="fa fa-plus"></i></div></a>
</li>
</ul>
</div>
</div>
$('.colorbtn').click(function () {
$('.colorOpen-content').toggle(200);
var child = $(this).children();
if (child.hasClass('fa fa-plus'))
child.removeClass('fa fa-plus').addClass('fa fa-minus');
else
child.removeClass('fa fa-minus').addClass('fa fa-plus');
return false;
});`
Try this
`
<div ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0}"
ng-style="{{color.code}} >= 10 ? {'display': 'hide !important'} : {'display': 'block !important'}"></div>
`
You can also use filter for this question. Something like this:
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.lt10 = true;
$scope.colors = [{
code: 1,
name: 'red',
label: 'Red'
},
{
code: 2,
name: 'blue',
label: 'Blue'
},
{
code: 30,
name: 'green',
label: 'Green'
},
{
code: 40,
name: 'yellow',
label: 'Yellow'
}
];
$scope.toggleShow = function() {
$scope.lt10 = !$scope.lt10;
};
$scope.setParameter = function() {
};
$scope.myFilter = function(itm) {
if ($scope.lt10 && itm.code < 10) return true;
if (!$scope.lt10 && itm.code >= 10) return true;
return false;
};
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row py-3 border_bootom_1">
<div class="col-lg-2 align-self-center">
<h4 class="card-title"> Color </h4>
</div>
<div class="col-lg-10 align-self-center">
<ul class="ss_size_general ss_size_general_1">
<li class="pointer" ng-repeat="color in colors|filter: myFilter">
<a href="#" ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}" ng-click="setParameter('colors', color.code.toString())" title="{{color.name}}">
<div class="verticle_center"><span>{{color.label}}</span></div>
</a>
</li>
<li>
<a>
<div ng-click="toggleShow()" ng-show="lt10" class="verticle_center pointer colorbtn">+ PLUS +</div>
<div ng-click="toggleShow()" ng-show="!lt10" class="verticle_center pointer colorbtn">- MINUS -</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>
This question already has answers here:
Issue with displaying Google Chart in a bootstrap tab
(2 answers)
Closed 5 years ago.
I created Bootstrap3 tabs RES and BUS. In each of these two tabs I want to position two Google charts (Area and Pie carts). So inside bootstrab tab-pane I put bootstrap row and split it into columns col-sm-9 (for larger AreaChart) and col-sm-3 (for smaller PieChart).
Identical content is inside both BUS and RES tabs! but position on second (RES) tab is ruined. WHY? And how to fix it?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<div class="thumbnail">
<h3>Title</h3>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li>
<li><a data-toggle="tab" href="#RES">Res</a></li>
</ul>
<div class="tab-content">
<div id="BUS" class="tab-pane active">
<div class="row">
<h3>BUS title</h3>
<div class="col-sm-9">
<div id="AreaB1"></div>
</div>
<div class="col-sm-3">
<div id="PieB1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsB()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
google.charts.load("current",{callback:drawChartsR,packages:["corechart"]});
</script>
External JSFiddle: enter link description here
need to wait until container is visible before drawing the chart,
or need to set specific size settings in the chart options...
also, recommend calling the load statement only once...
try setup similar to following...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<div class="thumbnail">
<h3>Title</h3>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li>
<li><a data-toggle="tab" href="#RES">Res</a></li>
</ul>
<div class="tab-content">
<div id="BUS" class="tab-pane active">
<div class="row">
<h3>BUS title</h3>
<div class="col-sm-9">
<div id="AreaB1"></div>
</div>
<div class="col-sm-3">
<div id="PieB1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsB()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'Bus':
drawChartsB();
break;
case 'Res':
drawChartsR();
break;
}
});
</script>
Trying to use bootstrap, angular and carousel, to display images in their respective folders that are on my local drive but stuck on how to go about tailoring my angular file. Here is an example, but this example picks images from the Internet. How do i go about it.
here is the site with the source code http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract
here is the angular file.
app.controller('portfoliocontroller', ['$scope', '$http',
function($scope, $http) {
$scope.title = 'Our portfolio';
$scope.w = window.innerWidth;
$scope.h = window.innerHeight - 20;
$scope.uri = "http://lorempixel.com";
$scope.folders = [
'abstract',
'animals',
'business',
'cats',
'city',
'food',
'night',
'life',
'fashion',
'people',
'nature',
'sports',
'technics',
'transport'
];
$scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.currentFolder = $scope.folders[0];
$scope.selectFolder = function(folder) {
$scope.currentFolder = folder;
};
$scope.activeFolder = function(folder) {
return (folder === $scope.currentFolder) ? 'active' : '';
};
}
]);
here is the html file
<div class="container">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li>
</ol>
<div class="carousel-inner">
<div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images">
<img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
</div>
<a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-botom" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-data-target="#{{folder}}">{{folder}}</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
If all you're trying to do is adapt that library to use your local folders you would just replace the uri with the base images folder or the like. Something like this.
$scope.uri = "path/to/my/images";
And your markup will reference the folders just the same:
<img ng-src="{{uri}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
The width and height of the images will have to be formatted in the image itself or in css.
You can use this one. This is completely based on AngularJS and Bootstrap.
https://angular-ui.github.io/bootstrap/#/carousel