Using Bootstrap and Javascript for a Toast function - javascript

I'm using Bootstrap 4 in order to create Toasts, I'm currently making a JavaScript function in order to generate a toast.
I have attempted to create elements within the JS file, this didn't properly style it.
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<div>
<div style="position: absolute; top: 50%; right: 50%">
<button type="button" class="btn btn-outline-primary" onclick="newToast('Test', 'Test2')">Example</button>
</div>
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
<div style="position: absolute; top: 5px; right: 5px;">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay=3000 id="toast">
<div class="toast-header">
<strong class="mr-auto" id="t-header">
Header
</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body" id="t-body">
Body
</div>
</div>
</div>
<script src="toast.js"></script>
</body>
</html>
toast.js
function newToast(Header, Body) {
var toast = {}
toast.Header = Header
toast.Body = Body
toast.Hide = function() {
// todo, hide
}
var header = document.getElementById("t-header")
var body = document.getElementById("t-body")
header.innerHTML = toast.Header
body.innerHTML = toast.Body
$('.toast').toast('show');
return toast
}
let toast = newToast("Header Test", "Body Test")
Currently if you make a new toast while one is currently visible it will overwrite the visible one, it should stack however. Bootstrap automatically will stack your Toasts. I believe I need make an entirely new toast and then appendChild, this didn't work for me though.

Add data-autohide="false"
<div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true" data-delay=3000 id="toast">
Toast has to be initialized with jQuery:
<script>
$(document).ready(function() {
$(".toast").toast("show");
});
</script>

Related

toggleClass Each element One By One jQuery

Problem is that I'm using an array that has more than one element. So, on the toggle, the last class gets passed and functionality given for the last element gets integrated and all starting elements were just added but didn't show any functionality.
I need that each element first to show functionality then toggled to another class.
var arrayOfButtonId = [];
$(".buttons-container").click(function (e) {
var clickedItemId;
// if (e.target !== e.currentTarget) {
clickedItemId = e.target.id;
arrayOfButtonId.push(clickedItemId);
console.log(arrayOfButtonId);
var counter = 0;
arrayOfButtonId.forEach((id) => {
console.log(id, counter++);
setTimeout(() => {
$(".sample-display").toggleClass(id,);
}, 4000);
});
});
For this, In HTML I have Various buttons which can pass the value to js . So that value gets added one by one with some time delay till one function shows its work properly.
<!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>Sample HTML</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
</head>
<div class="card col-md-6 offset-md-3 shadow text-center animate__animated">
THis is for Sample.
</div>
<div
class="
container-fluid
buttons-container
col-md-3
alert-primary
text-dark
rounded
"
>
<!-- Animation for Attention Makers -->
<div class="card col-md-12 my-md-2 py-md-2">
<span class="text-capitalize font-weight-bold text-center"
>Attention Maker</span
>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Flash"
id="animate__flash"
/>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Bounce"
id="animate__bounce"
/>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Tada"
id="animate__tada"
/>
</div>
</div>
<!-- script Start-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- script End-->
<script src="./js/main.js"></script>
<body></body>
</html>

MDL floating label textfields: forcing the label to float

This HTML file is supposed to write "New text" into the the textfield when the "ADD TEXT" button is clicked. Does anyone know how to make it so that the label of the textfield floats when the button is clicked on, as opposed to doing this?
Thanks.
textbox.html
<!--Template page for all other pages-->
<!--Based MDL items -->
<!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>Textfield Demo</title>
<!-- Import MDL libraries -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-red.min.css"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="js/config.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div class="mdl-cell--10-col" style="text-align:center; height:60vh">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="search-bar">
<label class="mdl-textfield__label" for="search-bar">Text...</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
id="button" onclick="addText()">Add Text</button><br>
</div>
<div class="mdl-cell mdl-cell--1-col"></div>
</div>
</div>
</main>
</div>
<script src="textbox.js"></script>
</body>
</html>
textbox.js
function addText() {
let searchBar = document.getElementById('search-bar');
let text = 'New text';
searchBar.value = text;
}
You need to "focus" (reference) on the input first to have the proper animation from Material Design and since it's expected to have the is-dirty class you also need to add it to the parent.
function addText() {
let searchBar = document.getElementById('search-bar');
// These two lines:
searchBar.focus();
searchBar.parentElement.classList.add("is-dirty");
let text = 'New text';
searchBar.value = text;
}

How to add buttons to bootstrap popover?

I want buttons to appear inside popover. The problem here is that the html code appears instead of buttons inside popover. I think there's an issue with this code: $('[data-bs-toggle="popover"]').popover('show');
How can I add buttons with button tag inside popover without changing data-bs-toggle to data-toggle?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" id="example"> Popover on bottom
</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var popString = "";
popString = popString + "<a href='#'><button class='btn btn-primary' id ='checkout'>Checkout</button></a> <button class='btn btn-primary' id ='clearCart'>Clear Cart</button> "
document.getElementById('example').setAttribute('data-bs-content', popString);
$(document).ready(function(){
$('[data-bs-toggle="popover"]').popover('show');
});</script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
$(function() {
$("[data-toggle=popover]").popover({
html: true,
placement:"bottom",
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
body{
width100%;
height:100vh
}
.flex-center{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-center">
<button class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</button>
</div>
<div id="a2" class="hidden">
<div class="popover-heading">This is the heading for #2</div>
<div class="popover-body">
This is the body for #2<br> With <b>html</b> content
<button class="btn btn-primary mx-auto">Button</button>
</div>
</div>
You'd need data-bs-html="true" attribute as well for html code to work in the popover.
I tried your code, and as much as I could tell buttons inside the popover aren't working, however anchor tags are. I don't like this approach myself, but that is what I could make work for now. Here's a fiddle: JSFiddle It basically meant converting your buttons in the content to anchor tags.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
html : true,
title : 'User Info <a href="#" class="close" data-dismiss="alert">×
</a>',
content : '<div class="media"><img src="images/avatar-tiny.jpg"
class="mr-3" alt="Sample Image"><div class="media-body"><h5 class="media-
heading">Jhon Carter</h5><p>Excellent Bootstrap popover! I really love
it.</p></div></div>'
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
});
</script>
<div class="wrapper">
<button type="button" class="btn btn-primary" data-toggle="popover">Click
Me</button>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<button
type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
<script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
</body>
</html>
When you use Bootstrap 5 Use this Script code you can easily Make Popover.
Either You can try jquery but I thinks it's not needed.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
<div class="container">Popover Example</div>
$(document).ready(function(){$('[data-toggle="popover"]').popover();});

HTML bootstrap collapse doesnt working at first button press properly

Can you help me with that bootstrap and javascript collapse please?
I have two collapse cards. The first should card be visible than you click on the link. After the click should show next card and the first should disappear.
It is functional but at the first click there are both cards. Thats fix after the second click. Thank u for your help.
HTML:
<div class="card text-center">
<div class="card-header ">
<a class="nav-link" id="spust" href="#">Kontaktní formulář</a>
</div>
<div id="kontakty">
</div>
<div class="collapse" id="konform">
</div>
</div>
Javascript:
var collapsestate = false;
jQuery('#spust').on("click",function(e) {
if (collapsestate == false){
$('#kontakty').collapse('hide');
$('#konform').collapse('show');
collapsestate = true;
}
else{
$('#konform').collapse('hide');
$('#kontakty').collapse('show');
collapsestate = false;
}
console.log(collapsestate);
});
try with this snippet code... I think this snippet is as per your requirements.
$(document).ready(function(){
var collapsestate = false;
$('#kontakty').collapse('show');
$('#spust').on("click",function(e) {
if (collapsestate == false){
$('#kontakty').collapse('hide');
$('#konform').collapse('show');
collapsestate = true;
}
else{
$('#kontakty').collapse('show');
$('#konform').collapse('hide');
collapsestate = false;
}
console.log(collapsestate);
});
});
<!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">
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="card text-center">
<div class="card-header ">
<a class="nav-link" id="spust" href="#">Kontaktní formulář</a>
</div>
<div id="kontakty">
abcd
</div>
<div class="collapse" id="konform">
1234
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
You can add "display:none" to make 'kontakt' invisible before click it:
<div id="kontakty" style="display:none">
</div>

bootstrap tooltip is not working

I'm using bootstrap in my application. I'm trying to show a table of contents as tooltip using data-html="true". but its not working.
Here is my code:
<div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
data-html="true" rel="tooltip" style="cursor:pointer;"
class="infobox infobox-red infobox-dark " onclick="OpenDetails(this)">
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data"><span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
$(function () {
$("[rel='tooltip']").tooltip();
});
function OpenDetails(Obj){
}
Thank you all in advance for your response.
using
data-original-title
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
Just use the following files if you are going to use all bootstrap functions:
-bootstrap.css
-bootstrap.js
using
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
at the end of the body tag (after jQuery and Bootstrap)
Aslo use
title="Column1 | Column2 <br> Value1 | Value2"
instead of
title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
the final version could be like this:
<!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://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
title="Column1 | Column2 <br> Value1 | Value2"
data-html="true"
rel="tooltip"
style="cursor: pointer"
class="infobox infobox-red infobox-dark"
onclick="OpenDetails(this)"
>
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data">
<span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
-->
</body>
</html>

Categories