I am using Bootstraps button checkboxes:
https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="checkbox" name="a" value="0"> SomeText1 </label>
<label class="btn btn-outline-secondary active">
<input type="checkbox" name="a" value="1"> SomeText2 </label>
</div>
But I am struggeling with disabling the hover and focus effect. I want to do this becuase with the hover and focus effect you can't tell the current status of the button/checkbox: https://jsfiddle.net/r2m1vzxo/1/
Thanks for any help in advance!
If my understanding is correct is this what you need?
label.btn.btn-outline-secondary {
color: #6c757d;
background-color: transparent;
outline: none !important;
box-shadow: none !important;
}
label.btn.btn-outline-secondary.active {
color: #fff;
background-color: #6c757d;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="checkbox" name="a" value="0"> SomeText1 </label>
<label class="btn btn-outline-secondary active">
<input type="checkbox" name="a" value="1"> SomeText2 </label>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
How to highlight specific dates in Tempus Dominus 4? For example I want to highlight 15, 18 ..etc. And it would be possible to disabled dates that isn't highlighted? I can't find any solution for this specific version of datetimepicker.
$('#apptDay').datetimepicker({
format: 'L'
});
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css'>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="input-group date" id="apptDay" data-target-input="nearest">
<input name="day" type="text" class="form-control datetimepicker-input" data-target="#apptDay" placeholder="mm/dd/yyyy" value="" />
<div class="input-group-append" data-target="#apptDay" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js'></script>
</body>
</html>
I am using bootstrap 4 and jquery for an HTML page. I want to toggle the way my elements looked before and after the button is clicked. I have the code jquery code below and the full code for the module I want in the codepen
HTML code
<html>
<head>
<title>LOGIN</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div class="login-part col-lg-6">
<div class="row row-loginpart">
<div class="dropdown col-lg-12 reg-user">
<button
class="btn btn-outline-success dropdown-toggle reg-user-btn"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
>
Regular User Login
</button>
<div class="dropdown-menu reg-user">
<form class="px-4 py-3">
<div class="form-group">
<input
type="email"
class="form-control"
id="exampleDropdownFormEmail1"
placeholder="email#example.com"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
id="exampleDropdownFormPassword1"
placeholder="Password"
/>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="dropdownCheck"
/>
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="alink" href="#">Sign up</a>
<a class="alink" href="#">Forgot password?</a>
</div>
</div>
<!-- Default dropup button -->
<div class="btn-group dropup col-lg-12 vendor-user">
<button
type="button"
class="btn btn-outline-success dropdown-toggle vendor-user"
data-toggle="dropdown"
>
Vendor Login
</button>
<!-- Dropdown menu links -->
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<input
type="email"
class="form-control"
id="exampleDropdownFormEmail1"
placeholder="email#example.com"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
id="exampleDropdownFormPassword1"
placeholder="Password"
/>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="dropdownCheck"
/>
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="alink" href="#">Sign up</a>
<a class="alink" href="#">Forgot password?</a>
</div>
</div>
</div>
</div>
<!-- jquer script cdn -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"
></script>
<script src="index.js"></script>
<!-- bootstrap scripts start -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<!-- bootstrap scripts end -->
</body>
</html>
CSS
.row-loginpart {
margin-top: 8rem;
}
.btn {
width: 100%;
}
.dropdown-menu {
width: 95%;
}
.show {
padding-left: 1rem;
}
.dropup-button.col-lg-12 {
top: 17rem;
}
.alink {
margin-left: 2rem;
text-align: center;
}
jquery code
var timesClicked = 0;
$(".reg-user-btn").on("click", function () {
timesClicked++;
console.log("clicked" + timesClicked);
if (timesClicked % 2 === 0)
if (
$(".row").hasClass("row-loginpart") &&
$(".vendor-user").hasClass("dropup-button")
) {
$(".row").addClass("row-loginpart");
$(".vendor-user").removeClass("dropup-button");
}
if (timesClicked % 2 === 1)
if (
$(".row").not("row-loginpart") &&
$(".vendor-user").not("dropup-button")
) {
$(".row").removeClass("row-loginpart");
$(".vendor-user").addClass("dropup-button");
}
});
https://codepen.io/tk1017/pen/xxZwmgY
I don't know why my elements don't come back to the positions as they were before after they button is clicked again. I also tried logging whether my eventhandler gets called for every click and it does. Why it doesn't work?
P.S:
The HTML code contains a lot of scripts and cdns, please consider the code inside the body.
I am the one who posted the question. I should have checked my logic. The problem was with the outer if condition when remainder equals 0.
$(".row").hasClass("row-loginpart") &&
$(".vendor-user").hasClass("dropup-button")
)
For the first click, the class .row-loginpart is removed and the class .dropup-button is added. When the second click happens there is no class named .row-loginpart so the above statement evaluates to false. So the code below that doesn't execute.
Thanks for the effort if any body is still going through this issue or have looked at this issue.
So the below replacement solves the issue, for the inner if where we check for an even click
$(".row").not("row-loginpart") &&
$(".vendor-user").hasClass("dropup-button")
)
Can anyone tell me what is wrong with the drop-down button. It is not working in my chrome.
Here is my html code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>IconMaker</title>
<meta charset=utf-8">
<meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
</head>
<body>
<div class="jumbotron text-center">
<h1>My Bootstrap Page</h1>
<p>Resize the page to understand Responsiveness</p>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
</ul>
</div>
<div class="row">
<div class="col-sm-2">
<p>If you want to use Paypal</p>
<i class="fa fa-cc-paypal" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Mastercard</p>
<i class="fa fa-cc-mastercard" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Visa</p>
<i class="fa fa-cc-visa" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Google Wallet</p>
<i class="fa fa-google-wallet" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use American Express</p>
<i class="fa fa-cc-amex" style="font-size:36px"></i>
</div>
</div>
</div>
</body>
</html>
when I click on drop-down, nothing drops down. I see no errors on my console.I have added bootstrap.js in html. Does i have to use JavaScript file for that?
Use this link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
instead of
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Cuz you use version 4.0.0-beta in css and another version in javascript
You forgot to add the below css
.show > .dropdown-menu {
display: block;
}
Objective: I am trying to build an INNER HTML with a Bootstrap component upon click of a Button.
Problem: Bootstrap component is not getting rendered properly.
Observation: When I change the bootstrap component as innerHtml of a div the value is added as it is and not unfolded into bootstrap component itself.
Expected
<div id="issue">
<div class="toggle btn btn-primary" data-toggle="toggle" style="width: 60.3438px; height: 38px;"><input id="view-toggle" checked="" data-toggle="toggle" data-on="On" data-off="Off" type="checkbox">
<div class="toggle-group"><label class="btn btn-primary toggle-on">On</label><label class="btn btn-default active toggle-off">Off</label><span class="toggle-handle btn btn-default"></span></div>
</div>
</div>
Actual
<div id="issue">
<input id="view-toggle" checked="" data-toggle="toggle" data-on="On" data-off="Off" type="checkbox">
</div>
Code:
HTML
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<input id="submit" type="button" value="submit" />
<div id="issue">
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
JS
$('#submit').click(function () {
$('#issue').html('<input id="view-toggle" checked data-toggle="toggle" data-on="On" data-off="Off" type="checkbox" />');
});
I am sure there has to be a way to get around this problem. Or may be I am doing something wrong.
Please guide. TIA.
Jquery binds all functions to elements on page load, you'll need to bind event to [data-toggle='toggle'] manually when DOM changes.
$("[data-toggle='toggle']").bootstrapToggle();
$('#submit').click(function() {
$('#issue').html('<input id="view-toggle" checked data-toggle="toggle" data-on="On" data-off="Off" type="checkbox" />');
$("[data-toggle='toggle']").bootstrapToggle();
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<input id="submit" type="button" value="submit" />
<div id="issue">
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I was trying to follow this tutorial to have checkboxes displayed as buttons for my angular app, but something wasn't working for me, the checkbox value does not change, and the onclick function is not called :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" onclick="alert('is not shown')"> Click me <!-- Here -->
</label>
</div>
</body>
</html>
But if I remove the boostrap.js script (or the class="btn btn-primary") it works :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" onclick="alert('is shown !')"> Click me
</label>
</div>
</body>
</html>
How do I make this working without removing the bootstrap.js script?
Add custom css for input
.btn-group input[type=checkbox]{
clip: initial !important;
cursor: pointer;
height: 29px;
left: 0;
opacity: 0;
pointer-events: initial !important;
top: 0;
width: 100%;
}
https://jsfiddle.net/xt3b88z2/
Just use onchange. Checkbox onchange should be more meaningful than onclick.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" onchange="alert($(this).is(':checked'))">Click me
</label>
</div>
</body>
</html>