1

I have set up a loop to pull in staff bios. When a user clicks on the thumbnail of the staff member a popup with the complete bio information for that "post" should be displayed. I have been able to connect most things, but when I click on a bio, the content of the popup is always from the last post. I assume this is because the script is outside of the loop. I can't imagine that putting the script inside the loop is a good idea. Sorry, total rookie here. Can you please help me understand how I should set up the JS to display the correct information for each post?

Here is my loop code:

<?php
$staff = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type' => 'staff_bios',
    'orderby' => 'title',
    'order'   => 'ASC'
));

while($staff->have_posts()){
    $staff->the_post(); ?>

//Below is what should display for each post.

<div class="staff-thumb" onclick="staffDetails()">
    //Thumbnail details here 
</div>

//Below is the pop up container (hidden until called).

<div id="<?php the_ID()?>" class="popup-wrap">
    <div class="popup-content">
        <span onclick="staffDetailsClose()" class="close">×</span>
        <h4><?php the_title(); ?></h4>
        //The rest of the bio details
    </div>
</div>
<?php }
?>

//Here is the Javascript (outside the loop, for now).
<script>
function staffDetails() {
document.getElementById("<?php the_ID()?>").style.display = "block";
}

function staffDetailsClose() {
document.getElementById("<?php the_ID()?>").style.display = "none";
}

window.onclick = function(event) {
if(event.target == document.getElementById("<?php the_ID()?>")) {
  document.getElementById("<?php the_ID()?>").style.display = "none";
   }
}
</script>

I appreciate any help, including the reference to other documentation. Also, since I am new on here, please let me know if you think this question could be set up differently or if you have any questions about what I am asking.

-1

This may help

<?php
$staff = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type' => 'staff_bios',
    'orderby' => 'title',
    'order'   => 'ASC'
));

while($staff->have_posts()){
    $staff->the_post(); ?>

//Below is what should display for each post.

<div class="staff-thumb" onclick="staffDetails(<?php the_ID(); ?>)">
    //Thumbnail details here 
</div>

//Below is the pop up container (hidden until called).

<div id="<?php the_ID()?>" class="popup-wrap">
    <div class="popup-content">
        <span onclick="staffDetailsClose(<?php the_ID(); ?>)" class="close">×</span>
        <h4><?php the_title(); ?></h4>
        //The rest of the bio details
    </div>
</div>
<?php }
?>


//Here is the Javascript (outside the loop, for now).
<script>
    modal = '';

    function staffDetails( p_id ) {
        modal = document.getElementById(p_id);
        modal.style.display = "block";
    }

    function staffDetailsClose( p_id ) {
        document.getElementById( p_id ).style.display = "none";
        modal = '';

    }

// based on https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close

// When the user clicks anywhere outside of the modal, close it. NOT TESTED
window.onclick = function(event) {
   if(event.target == modal) {
       modal.style.display = "none";
   }
}

</script>
  • Qaiser, thank you very much for this. I was able to get the pop up and close button to work with the code you provided. Are you able to tell me how to have the pop up also close when a user clicks outside of the pop up, but stay open if they click within the pop up? Finally, do you know how I can prevent the page from scrolling behind the pop up when it's open? – Iisrael Apr 22 at 13:54
  • @Iisrael I have updated the answer based on your previous comment. However for Scrolling issue this may help. – Qaisar Feroz Apr 22 at 16:07
0

You use the_ID() function outside the loop, this is a function that should be used inside. Also your approach of JavaScript could have been better by:

  1. Instead of targeting each element by ID, target them by a class. ( If you have more elements, you will need to generate for each one a JavaScript function, which doesn't look like a good approach. Having a class with for example a name like "js-toggle-staff-tooltip" looks more good in HTML code. )
  2. Don't modify the CSS directly, use a class, which you can toggle(add,remove), as you want. (This is a good practices : link)

There are a lot more to say... but I think this is enough...

  • Brada, thank you for your notes. Can you please help me understand a few things you mentioned? What's improved by targeting a class over ID? How can I make sure the thumbnail opens the correct bio container if I just toggle the class? Wouldn't that open all of the containers with that class on the page? Also, what should I use to get the ID outside of the loop in the script? – Iisrael Apr 21 at 16:44
  • Hi... good question... Lets see. First you toggle your tooltip by an onclick event in HTML. This works and is good, but lets just do a little bit different. Lets get all the elements with a class that we can click: let tooltipButtons = document.getElementsByClassName('test'); – Brada Apr 21 at 16:49
  • Then... for each one, add an event Listener, which will trigger the popup wrap. The JavaScript should be easy to target those. for(let i=0; i<tooltipButtons.length; i++){ tooltipButtons[i].addEventListener('click', function( event ){ // find the element that needs to be displayed, and add a class }) } – Brada Apr 21 at 16:56
  • Brada, thanks again for trying to help me with this. I am still having trouble following what you have set up. I did get the code Qaiser set up below to work for two tasks (getting the correct pop up and getting the close X button to work. I posed a couple more questions for him below re. how to prevent the window from scrolling behind the pop up and how to have the pop close on window click, except when clicking within the pop up. Any ideas on how to complete those two tasks? – Iisrael Apr 22 at 14:43
  • Hi... to prevent the window from scroll you can add overflow:hidden, or better as I explained, a class that have overflow:hidden. I really recommend you to start to understand JS and it's abstractization, the DOM and his object model, and how you can traverse it. After you understand that, these responses will come to you very fast... – Brada Apr 22 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.