I'm trying to get each button to change color on click. However, I want to separate buttons 1-3 from buttons 4-6 so they are independent from each other. I want to be able to click buttons 1-3 and they change color without affecting 4-6 and vice versa. My code is attached. I'm sure this is very simple but my feeble mind can't figure it out :-) Any suggestions?
$(document).ready(function(){
$("button").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
});
$(document).ready(function(){
$("button").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
Instead of applying both handlers to all instances of $('button'), specifically target the instances you want. Your current markup separates them by class, so you can use $(".featuredBtn") and $(".featuredBtn2") to identify those elements:
$(document).ready(function(){
$(".featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
});
$(document).ready(function(){
$(".featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
Simple, just use the classes that you have already supplied in the selector.
Also, note that you only need one ready handler, not two.
$(document).ready(function(){
$("button.featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
$("button.featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
Your error is that you add both click handlers to every button instead of only adding the appropriate handler to the appropriate buttons. So every time you push a button, you call both handlers consecutively, rather than just the handlers for that button set.
Replacing the first $("button") with $(".featuredBtn") and the second $("button") with $(".featuredBtn2") achieves what you're tying to achieve.
Note that there's no need to call $(document).ready() twice. You can just call it once combine the code for both handlers in that single call. Technically, this is not an error, but your code is cleaner if you just call $(document).ready() here.
Demo
$(document).ready(function(){
$(".featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
$(".featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!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.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
Related
When click on save button function myfunc2 will be exceuted which use a for in loop to iterate the minus array. This array conatain all the minus icon. i set style.display = 'none' and expect when i click the save button the icon will disappear, but it didn't work. i dont know what went wrong
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('save');
save_btn.addEventListener('click',myfunc2);
//delete all minus
function myfunc2() {
for(let x in minus) {
minus[x].style.display = 'none';
}
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<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.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
There are 2 things you are doing wrong. First of all,
const save_btn = document.getElementByClassName('save');
should be
const save_btn = document.getElementsByClassName('save');
Secondly, save_btn would now be an array since you have gotten multiple elements by class name (hence the getElementsByClassName) plural form.
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). (doc)
So calling save_btn.addEventListener('click',myfunc2); wouldn't work since you are trying to assign this to an array. You either use
save_btn[0].addEventListener('click',myfunc2);
or, a more recommended approach, give the button an id and use getElementById() (doc)
Changed snippet below:
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('saveBtn');
save_btn.addEventListener('click', myfunc2);
//delete all minus
function myfunc2() {
[].forEach.call(minus, function(m) {
m.style.display = 'none';
});
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<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.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="button" id="saveBtn" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
I choose element div with classname item using property querySelector('.item), and expect this element to disapear when I click element a.
however it didn't work when style.display is set to none. I dont know what went wrong
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.display = 'none';
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<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.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
.d-flex uses !important which overrides the display: none, It works when you remove it:
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.display = 'none';
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<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.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
Or, instead of completely removing it you can set property display: none as !important as well so d-flex won't be able to override it item.style.setProperty("display", "none", "important"):
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.setProperty("display", "none", "important");
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<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.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
the following code generates a bootstrap navbar with a notification icon and I want to execute a function when I click the notification button to expand the dropdown and when I close the dropdown how do I do this in javascript?
I have try'd selecting the dropdown and modifying the click function but that executes when you click a element in the dropdown not when you click the button.
#ex4 {
color: white;
width: auto;
}
#ex4 .p1.has-badge:after {
position: absolute;
right: 10%;
top: 8%;
content: attr(data-count);
font-size: 40%;
padding: .2em;
border-radius: 50%;
line-height: 1em;
color: white;
background: rgba(255, 0, 0, .85);
text-align: center;
min-width: 1.5em;
}
form.logout {
padding-left: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Feed</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Feed</a>
<div class="d-flex align-items-center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<form a name="logout" class="logout" action="PHP/Logout.php" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
</div>
</div>
</nav>
</body>
</script>
</html>
Hook into the Dropdown events
var myDropdown = document.getElementById('myDropdown')
//expand/open
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something when opened...
})
//hide/close
myDropdown.addEventListener('hide.bs.dropdown', function () {
// do something when closed...
})
Codeply
I've been learning bootstrap and I have a very basic page I'm working on to learn hands on with. I tried adding in a dropdown and it doesn't dropdown at all when it is clicked, I checked to forum and the main thing was people not having the bootstrap js link, so I made sure I included that, and I'm pretty sure that I have all the proper links for it to work. (code is being weird in snippet, works normally on everything else) Thanks for the help, my code is:
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
First you'r calling two bootstrap version one in the head and one on the footer , second you need to call popper.js before bootstrap.js
see snippet
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
I think you sould try using another CDN files, this worked for me
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have form with input field and check box and two buttons , buttons are for add and delete. But i here want to remove add button and want to show next field with just checking the check box.How can i do this?
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
<input type="button" ng-click="addRow($index)" value="Add" ng-show="$last">
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>
Remove the Add Button and add ng-click="addRow($index)" to checkbox.. check below working snippet
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal" ng-click="addRow($index)"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>