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
Related
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>
I have worked on a solution to change the src's value depending on the screen size, but somehow even if I resize the browser, it will only show the first image (../assets/img/features/cleardent-header.png). I want it to change to (../assets/img/features/cleardent-header-small.png when the screen size is less than 991.
I was looking at using CSS, but since it's within the carousel, it's a bit complicated. Could anyone give me a suggestion?
Here's my HTML of the carousel's first slide:
<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide">
<!--slogan and CTA-->
<div class="container carousel-caption main-slider">
<div class="row header-slogan fadeInDown animated">
<div class="col-xs-12">
<section class="cd-intro">
<h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
</section>
</div>
</div>
<div class="row header-tagline fadeInDown animated">
<div class="col-xs-12">
<p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
</div>
</div>
<div class="row header-cta fadeInUp animated">
<div class="col-xs-12">
<button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
<i class="fa fa-play fa-fw"></i> Watch a Video
</div>
</div>
</div>
<!--slogan and CTA end-->
</div>
Here's my jQuery :
<script>
$(document).ready(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
</script>
Your code works on the initial load of the DOM, but it has no affect once the document loads and the user resizes the browser window, you would need to hook up a handler to window.resize event to alert when the window size changes, then do your same logic:
//Place this in your document ready
$(window).resize(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
How about srcset?
<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">
I have a modal window build with CSS. The modal can be closed by clicking outside of it.
My solution to open the modal works, closing the modal works too, when the event listeners are added to the page separately. However, they don't work together. When both the listeners are added to the page, the modal won't open.
How can I make them to work together?
HTML
<a href="#openModal" id="modal-window" class="event test">
<div class="shorten-long-text test">
</div>
</a>
<div id="openModal" class="modalDialog Dialog1">
<div class="myModal">
<div class="modal-header">
</div>
<div class="modal-body row">
<div class="col-xs-6" >
</div>
</div>
<div class="modal-footer uppercase color-main">
</div>
</div>
</div>
JS
$(window).click(function(ev) {
if($(ev.target).attr('class') != ".Dialog1" ) {
$(".Dialog1").removeClass('isOpen');
$(".Dialog1").addClass('isClosed');
}
});
$(".test").click(function() {
$(".Dialog1").removeClass('isClosed');
$(".Dialog1").addClass('isOpen');
});
Use toggleClass()
html:
<div id="openModal" class="modalDialog isClosed Dialog1">
js:
$(window).click(function(ev) {
if(!$(ev.target).is('.Dialog1,.test') $(".Dialog1").toggleClass('isClosed isOpen');
}
});
$(".test").click(function() {
$(".Dialog1").toggleClass('isClosed isOpen');
});
My client wants to track if a modal is opened by a visitor, the only way that came to me was loading an iframe into the modal, and then they have a url to track. But the url is loaded whether the modal is opened or not.
I found this which seems to be what I want, they are using Bootstrap whilst I'm using Foundation6, I've tried to convert it to work for Foundation but am clearly missing something.
Obviously there may be a better way to achieve what I need without the below?
The modals:
<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-book'>
<iframe src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-quote'>
<iframe src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-brochure'>
<iframe src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
The script:
var iframes = ["URL1","URL2","URL3"];
$('.reveal-modal').on('open.zf.reveal', function() {
var loaded = $(this).data('loaded');
if(loaded == false) {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
$(this).data('loaded', 'true');
}
});
You don't need an iframe, unless the iframe contains it's own content or JavaScript. Just send an AJAX request to the server with the URL (and if necessary query parameters).
You must have an .on('open.zf.reveal',...) event though. There's no way around that since you want to know when the modal is open.
$('.reveal-modal').on('open.zf.reveal', function (evt) {
$.ajax({
url: url
method: 'GET'
});
})
Basically, whatever needs to happen in the modal when it's open needs to be done in the event function. So you shouldn't have pre-defined content in the modal.
Hope that helps.
Right, I think I've got it...
The Modals:
<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-book'></div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-quote'></div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-brochure'></div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
The Script:
var appendIFrameDemo = true;
var appendIFrameQuote = true;
var appendIFrameBrochure = true;
$(".bookDemo").click(function() {
if(appendIFrameDemo) {
$('.iframe-container-book').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-book" scrolling="no" style="border:0"></iframe> ');
appendIFrameDemo = false;
}
});
$(".getQuote").click(function() {
if(appendIFrameQuote) {
$('.iframe-container-quote').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-quote" scrolling="no" style="border:0"></iframe> ');
appendIFrameQuote = false;
}
});
$(".getBrochure").click(function() {
if(appendIFrameBrochure) {
$('.iframe-container-brochure').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-brochure" scrolling="no" style="border:0"></iframe> ');
appendIFrameBrochure = false;
}
});
.bookDemo, .getQuote & .getBrochure are the classes on the three buttons to open the modals.
This version fixed the problem of it loading the iframe three times on the homepage:
<div id="getnewsletterModal" class="newsletterReveal reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-newsletter'>
<iframe id="iframeNewsletter" src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
var appendIFrameNewsletter = true;
$(".getnewsletterModal").click(function() {
if(appendIFrameNewsletter) {
$('#iframeNewsletter').attr('src', '[url here]');
appendIFrameNewsletter = false;
}
});
plz help me(beginner) to solve a problem.
I am coding a site with bootstrap 3. I have bootstrap thumbnail on it.
when user will click an specific link in the thumbnail, it will show in an modal/popup.
modals primary contents will be same with the thumbnail was clicked.
but there will be two button (next, previous) in the modal, by clicking them, user will view the next or previous thumbnail.
There is an large image on each thumbnail which is hidden in thumbnail view, but will show in the modal view.
by clicking next or previous buttons, the large image, n the description part will change accordingly(like carousel).
The whole functionality is like lightbox. I have seen different jquery lightbox plugin, but either they are only with image preview,
or heavy weight. Plz help me with the issue. I know the html/css well. so, i can fix any css issue, i need the jquery functionality.
Please don't answer with just a lightbox plugin link, i want to use the basic jquery.
Here's the thumbnails in my html:
<div class="container" id="lightbox">
<div class="row">
<div class="lightbox-thumbs-wrap">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image1.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon2.png">
<h3>Description heading2</h3>
<p>
Description2 details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image2.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
</div>
</div>
And, the modal i want will look like:
<div class="modal">
<div class="overlay"></div>
<div class="modal-wrapper">
click to close modal
<div class="container-fluid">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="img/xyz/large-image1.png"> <!-- large slider image, it was hidden in thumbnail -->
<a class="next-img"><img src="img/xyz/next.png"></a>
<a class="prev-img"><img src="img/xyz/prev.png"></a>
</div>
</div>
</div>
Firstly note that you should describe the problem and what has been done so far to solve it when posting a question on SO.
Secondly read Varying modal content based on trigger button at Bootstrap's docs.
And than, i think you should create one modal and change its content dynamically onload, and after pressing the previous / next images (buttons). I create an example that can be found at: http://jsfiddle.net/esLad6x8/
First create a array of object that describe your images / thumbs:
var images = new Array();
for (var i=0; i<10; i++) {
images.push({img: 'http://dummyimage.com/600x400/000/fff&text=image' + i, thumb: 'http://dummyimage.com/100x100/000/fff&text=thumb' + i, head:'heading' + i, description:'Description' + i + ' details here.'});
}
Alternatively you could read the above information from your thumb's grid.
html of the modal
You should use Bootstrap's modal classes to use the modal jQuery Plugin, see: http://getbootstrap.com/javascript/#modals
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="" class="img-responsive"> <!-- large slider image, it was hidden in thumbnail -->
<a class="prev-img btn btn-primary">Previous</a>
<a class="next-img btn btn-primary">Next</a>
</div>
</div>
<div class="modal-footer"> </div>
</div>
</div>
</div>
A button to open the modal can look like that shown below:
<button type="button" class="openmodal btn btn-primary btn-lg" data-thumb="0">
First Thumb
</button>
The on click event of the above button:
$('.openmodal').on('click',function(){
setModalContent($( this ).data('thumb'));
$('#myModal').modal('show');//pop up modal
});
The setModalContent function used in the preceding code can look like as follows:
function setModalContent($thumbNumber) {
$('#myModal .tmb-gray h3').text(images[$thumbNumber].head);
$('#myModal .tmb-gray h3 + p').text(images[$thumbNumber].description);
$('#myModal .tmb-gray > img').attr('src',images[$thumbNumber].thumb);
$('#myModal .modal-body img').last().attr('src',images[$thumbNumber].img);
/* set next and previous buttons */
$('.prev-img').data('thumb',($thumbNumber - 1 >= 0) ? $thumbNumber - 1 : images.length - 1);
$('.next-img').data('thumb',($thumbNumber + 1 < images.length) ? $thumbNumber + 1 : 0);
}
And finally create the click events for the previous/next navigation, which only change the content of a already opened modal:
$('.modal').on('click','.prev-img',function(){ setModalContent($( this ).data('thumb'));});
$('.modal').on('click','.next-img',function(){ setModalContent($( this ).data('thumb'));});