I am working with toasts in Bootstrap 4 and there is one things that's bothering me:
If I initialize the toast
<div class="toast my-3" data-delay="2500">
<div class="toast-header text-dark">
//fill this later
</div>
<div class="toast-body text-dark">
//fill this later
</div>
</div>
like in the documentation
$(document).ready(function () {
$(".toast").toast("show");
});
the toast is show as expected, when the page loads. If I don't initialize the toast, the html code takes some place. at the bottom of my page.
How can I make the toast not to be shown when loading the page and not taking some place due to html code? I tried initialize them with toast("hide") or toast("dispose") as well.
Thanks
When you write this:
$(document).ready(function () {
$(".toast").toast("show");
});
It means you're expecting the toast to show as soon as the DOM is loaded. If you want the toast to appear conditionnally, you have for example to create a button in your html file (click on "Run snippet" and click on the button).
$(document).ready(function () {
$('#toastThis').on( "click", function() {
$(".toast").toast("show");
});
});
.toast {
position: absolute;
top: 0;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="toastThis" class="btn btn-primary">Primary</button>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<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">
Hello, world! This is a toast message.
</div>
</div>
Related
The simple javascript is not working. When I test the code in live preview (chrome), it says "ThfJ8q9:58 Uncaught ReferenceError: textpage is not defined
at HTMLButtonElement.onclick (ThfJ8q9:58)"
What I am trying to do is to change the background image of the div "chat" when the button is clicked to the new image specified.
HTML:
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JAVASCRIPT DOCUMENT:
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('full-convesation-
MRP.png')";
}
Could use something like this to listen for a click on the button
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" id="btns"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
var btntrigger = document.getElementById('btns');
btntrigger.addEventListener('click', function(){
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
})
Or have a closer look at your syntax on the orginal, fixed here:
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()">
<img class="submit-button-img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
}
:)
I have a slider inside of a modal. However, on modal show, the slider does not show on the screen. When I resize the window manually, it would appear.
I've attempted to do some research regarding this issue and individuals have stated that the problem is because the modal is hidden at the start and there are issues with the size calculations.
I have tried to do a manual resize of the screen when the modal is opened but it does not work.
<script type="text/javascript">
$(document).on('show.bs.modal', function (e) {
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}
});
</script>
There are no error messages but its just a visual glitch.
Edit: This is the code for my modal
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1"
role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">Title</h2>
<p class="item-intro text-muted">Subtitle</p>
<img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">
<p style="text-align: left;">Description 1</p>
<p style="text-align: left;">Description 2</p>
<!--Script for Carasusel-->
<script src="https://cdn.jsdelivr.net/npm/publicalbum#latest/embed-ui.min.js" async></script>
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
data-link="https://photos.app.goo.gl/CSV7NDstShTUwUZq5"
data-title="Mr. Monstro"
data-description="Mr. Monstro is a great traveler. He visited Madeira, Poland, but also Georgia, Italy ...">
<img data-src="https://lh3.googleusercontent.com/XlH6wo2PzrAEqmplYrZwV0fI-2TafTT6BRwZhKDfZSHd_zT7HIdPyPWd3Xuqhn1QQADuTJ32QFmcgYiTOEU0sC4Bvf-VyTIiq-DxxEaxIeWDYyUK_VjaW8-zrMGBvekDZT77lpduYQ=w1920-h1080" src="" alt="" />
<img data-src="https://lh3.googleusercontent.com/HISe-DV_b4gjLvSEGzrJlsqBU2rSE8uQpSqHHKTPihg_Ax9VtfCrOrvdXF01raBeBleAWQKI7Hfb4_w9vZeJKFymQfNTlubwXxTBTbqGTPwjg7S0CBtQsQJqsspvIhD9c-pniSZrEw=w1920-h1080" src="" alt="" />
<img data-src="https://lh3.googleusercontent.com/05lhR1IAQY_B9rdQ_GvHDNLe1lJsSPyyuDeIMkt--gDDAnO2_EATwif7-sfNd2K_48RvyqKmN-u2svKZ06yfh8bnrbQ5kBUrIHfZvWheTzDGhIeFd1roPor-F_BycJmVKbQO6a9EaA=w1920-h1080" src="" alt="" />
<img data-src="https://lh3.googleusercontent.com/VvK__Vx8kpPTP57WZPLblacZbTE0NqWeIGTyHSQ8Rq9pvOpWQG_CQE_tOc6jHPtj02XIBYa0Zo9fWbXXQyNYs9hDGGj34QibKFJky4W9nYBpSb57OwxiQoDyo25vzIXMTN2SNxuzqg=w1920-h1080" src="" alt="" />
</div>
<ul class="list-inline">
<li>Date: July 13 - August 11</li>
<li>Category: Events</li>
<li>Partners: THD</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('show.bs.modal', function (e) {
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}
console.log('works');
});
If you need to decorate widgets manually you can you tiny API.
Change class name pa-* (for example, set to pa-custom-gallery-player) to another name to disable auto-decorator. Setup element ID (in this case set to widget1).
Decorate widget with the following javascript code (for gallery player):
var player = new GalleryPlayerWidget();
player.decorate(document.getElementById('widget1'));
After Public album Embed UI script loaded, there are following object constructors are available: CarouselWidget, GalleryPlayerWidget.
Here is a small example: https://www.publicalbum.org/examples/decorate-widget-onclick.html
Source
I created the popup when I am trying to call action on click for close pop up icon no change is shown.
In index.html in bottom there is code for pop up, this will be shown when user will click on change zip code link.
<!-- Pop up div -->
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
<!-- html of change zip code -->
<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>
Change zip code action is written in autoQuotectrl.js
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
To keep other action separate I wrote new controller utilityCtrl.js.
Here I wrote action for hide this popup .
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
But nothing is working, please help me to understand what I am missing here.
It seems $rootScope.myModal is not accessible in utilityCtrl
You don't invoke function closePopup in template.
See example on plunker.
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup()">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
they are in two controller,so the $scope is diferent ,you can use $rootScope.$broadcast and $scope.$on
My bootstrap alerts are not working with CSS animation class fadeout. As mentioned in BS documentation closed.bs.alert does: This event is fired when the alert has been closed (will wait for CSS transitions to complete).
But I want to fade and sildeUp the alert.
JavaScript
$('.alert').each(function(index, el) {
$(this).on('closed.bs.alert', function(){
$(this).addClass('animated fadeOut')
})
});
Can I use jQuery fadeOut method and slideUp to do the work?
HTML
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p><i class="fa fa-check"></i> <strong>Success Message ! </strong>You have successfully registered</p>
</div>
You need to
bind event at close.bs.alert
remove bootstrap animation and use your own
please see code below.
// bind event at 'close.bs.alert'
$('.alert').on('close.bs.alert', function(e) {
// stop Bootstrap animation
e.stopPropagation();
// Use my own animation
$(this).closest('.alert')
.animate({
height: 'toggle',
opacity: 'toggle'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p><i class="fa fa-check"></i> <strong>Success Message ! </strong>You have successfully registered</p>
</div>
</div>
</div>
</div>
So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/