I would like to open a modal that shows a pdf according to the selected text, but only the first one in the list is shown. What should I do?
index.html
<p><a id="other-activies-link">Semana Omnistack 11</a></p>
<p><a id="other-activies-link">28ª Semana do IME</a></p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
</div>
</div>
scripts.js
const selectedActivity = document.querySelectorAll("#other-activies-link");
selectedActivity.forEach((link) => {
link.addEventListener("click", () => {
document.getElementById(
"myFrame"
).src = `/files/${event.target.textContent}.pdf`;
});
});
you shouldn't use same id element, it would work here but it's frowned upon. I've created a demo with the same class. Of course, the iframe wouldn't load. I've done the explaining in the code itself. See, if it works for you.
const selectedActivity = document.querySelectorAll(".other-activies-link");
selectedActivity.forEach((link) => {
link.addEventListener("click", (event) => { // pass event parameter here
document.getElementById(
"myFrame"
).src = `/files/${event.target.innerText}.pdf`; // use innerText instead
console.clear();
console.log(event.target.innerText);
console.log(event.target.textContent);
});
});
<p><a class="other-activies-link">Semana<br> Omnistack 11</a></p>
<p><a class="other-activies-link">28ª Semana do IME</a></p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
</div>
</div>
See the difference between innerText and textContent here.
You shouldn't use non-unique ids. If you replace id with a class, the code should work.
You should use classes instead, id's of elements should always be unique
<p><a class="other-activies-link">Semana Omnistack 11</a></p>
<p><a class="other-activies-link">28ª Semana do IME</a></p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
</div>
</div>
This should work,
const selectedActivity = document.querySelectorAll(".other-activies-link");
...
Related
I want my code to play a video but when I close the modal the music in the video still plays on the background.
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
I tried using jquery to fix it but nothing happens.
$(document).ready(function () {
var $videoSrc;
$('.btn-play').click(function () {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);
$('#videoModal').on('shown.bs.modal', function (e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
})
$('#videoModal').on('hide.bs.modal', function (e) {
$("#video").attr('src', $videoSrc);
})
});
To do what you require you can either stop or pause the video playing when the hide.bs.modal event fires.
You can do this by sending a postMessage to the iframe containing the embedded Youtube player. Note that the enablejsapi=1 parameter has to be included in the embed URL for this to work.
Here's a simplified example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>Play Video</div>
<div>Stop Video</div>
<div>Pause Video</div>
<iframe class="embed-responsive-item" id="video" width="560" height="315" src="https://www.youtube.com/embed/LDU_Txk06tM?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="autoplay"></iframe>
let videoIframeContent = $('#video')[0].contentWindow;
// stop
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "stopVideo" }), '*');
// pause
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "pauseVideo" }), '*');
Here's a working demo in a jsFiddle and the snippet editor is sandboxed and won't allow video.
That's because the video wasn't stopped.
In the listener that listens to the hide.bs.modal event:
const video = $('#video').get(0);
video.pause();
video.currentTime = 0;
I think You need to use video tag instead of iframe to control video follow link
I'm using an iframe inside of bootstrap modal:
<div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newsModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<div id="loadingMessage">Loading...</div>
<iframe width="100%" class="frame embed-responsive-item" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
That iframe is open when an element of some elements with the same class clicked:
<?php foreach($new as $news){ ?>
<div class="post_frame" data-link="<?php echo $news['link']; ?>" data-toggle="modal" data-target="#newsModal">
Lorem ipsum dolor sit amet
</div>
<?php } ?>
I'm using that code to set the source of the iframe:
$('.post_frame').each(function() {
$(this).click(function() {
var data = $(this).data('link'),
frame = $('.frame');
frame.attr('src', data);
});
});
To hide the preloader I use:
frame.load(function() {
$('#loadingMessage').css('display', 'none');
});
But the preloader still there.
And when I close that modal and click on another element with the same class post_frame, The previous source content still there until the content of the new source loads.
How to create a preloader before each source is loaded?
Change this:
var data = $(this).data('link'),
To this:
var data = $(this).data('link');
And then remove this from where it currently is (inside function):
frame = $('.frame');
And place it in the global scope outside the function:
var frame = $('.frame');
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;
}
});
Is there another way to varying modal with Picture based on trigger button?
If I have the trigger button which contains the picture:
<button type="button" data-toggle="modal" data-target="#ViewModal" data-picture="<?php echo $user->getPicture(); ?>"></button>
What's the best approach to fetch and show the picture on the modal?
This is my picture field in that modal:
<div class="modal-body">
<center>
<img src="**(SHOULD I PUT THE PICTURE IN HERE?)**" name="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
And this is the javascript who handle the modal :
<script type="text/javascript">
$('#ViewModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var picture = button.data('picture')
var modal = $(this)
modal.find('.modal-body img[name="picture"]').val(picture)
})
</script>
Note : I can not fetch the picture in modal with this line of code
Is there another way to varying modal with Picture based on trigger button?
In my opinion you should declare your modal html somewhere in the footer of the page, so you have more control and more ease in displaying your image.
<div class="modal fade" id="my_image" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<img src="" id="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
</div>
</div>
</div>
And then you just change the src attribute of the picture element from your function.
var picture = button.data('picture')
$('#picture').attr('src',picture);
I am using the following code to load different youtube videos into a Twitter Bootstrap modal. Why is it that IE8 is the only browser that does not load the youtube video? It just displays a black div where the video would normally show up. There are more videos to be uploaded and a lot of additional scripts on the page I am working on, so I am trying to keep this as flexible and lightweight as possible. Any suggestions would be appreciated. Thanks! jsfiddle at bottom.
<div id="Videos">
<a data-source="http://www.youtube.com/embed/z4Ezruu1oeQ" href="#" class="videoThumbnail">
<img src="http://placehold.it/200x100&text=Video%20Thumbnail%20One"></a>
<a data-source="http://www.youtube.com/embed/3tYrd4tPVXs" href="#" class="videoThumbnail">
<img src="http://placehold.it/200x100&text=Video%20Thumbnail%20Two"></a>
</div>
<div id="videoModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="video-container">
<iframe width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The Javascript:
$('.videoThumbnail').click(function(e) {
e.preventDefault();
var src = $(this).data('source');
$('#videoModal').modal('show');
$('#videoModal iframe').attr('src', src);
});
$('#videoModal button').click(function () {
$('#videoModal iframe').removeAttr('src');
});
http://jsfiddle.net/curly33/LTxm7/
I'd suggest letting the html do the work.
<a href="http://www.youtube.com/embed/z4Ezruu1oeQ" target="videoIframe" class="videoThumbnail">
and
<iframe name="videoIframe" width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
small modification to js:
$('.videoThumbnail').click(function(e) {
$('#videoModal').modal('show');
});
$('#videoModal button').click(function () {
$('#videoModal iframe').removeAttr('src');
// ^^ is this really needed? ^^
});
http://jsfiddle.net/LTxm7/3/