Develop Reference

How to show the selected element in javascript

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");
...

Why is windows resize not working with a modal?

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

Image pop up using bootstrap Modal?

I want to pop up image on clicking it. Images are added by using advanced custom field.
Here is my code
<?php
$args=array(
'post_type' => 'map',
);
$staffs = new WP_Query( $args );
if( $staffs->have_posts() ) {
while( $staffs->have_posts() ) {
$staffs->the_post();
?>
<div class="div_img">
<div class="col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<h4 class="map_titles"><?php the_title();?></h4>
<img src="<?php the_field('map_image'); ?>" />
</a>
</div>
</div>
<div class="map_modal">
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><?php the_title();?></h4>
</div>
<div class="modal-body">
<img src="<?php the_field( 'map_image' ); ?>" />
</div>
</div>
</div>
</div>
</div>
<?php
}?>
<?php
};?>
script
<script>
jQuery(document).ready(function() {
var $lightbox = jQuery('#lightbox');
jQuery('[data-target="#lightbox"]').on('click', function(event) {
var $img = jQuery(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': jQuery(window).width() - 100,
'maxHeight': jQuery(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});</script>
when I click on each image each image pop up nicely but the title remain same for all images. However my requirement is to show the title of each image with its image .Here is link
Any help would be highly appreciated

Hi I am not sure if I understand your question, however this is the simple way I will go about it.
1; query database and get the image and the title use for each loop.
2,Add Data-dir attribute to the image tag and put the title inside like below.
<div class="div_img">
<div class="col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<h4 class="map_titles"><?php the_title();?></h4>
<img src="<?php the_field('map_image'); ?> data-dir="<?php the_title();?>"/>
</a>
</div>
</div>
3.When you grab the image on click using jquery I can see you are grabbing other attribute, grab the data-dir attribute as well like below, and using jquery .html() put the title in the modal-title.
var title = $img.attr('data-dir'),
$('.modal-title').html(title);
Hopes this help if not let me know.

Jquery : How to Varying modal content based on trigger button

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);

Change iframe youtube src with jquery - IE8 Error

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/