If you have the Taxonomy Filter as well, then use this modified code: .container { display: none; /* Hide all containers by default */ } .button_style { pointer-events: auto; cursor: pointer; /* Ensure pointer cursor on hover */ } document.addEventListener('DOMContentLoaded', function () { function attachShowBioEventListeners() { // Select all buttons that have an ID starting with 'button' const buttons = document.querySelectorAll('[id^=button]'); // Add event listeners to each button buttons.forEach(button => { button.removeEventListener('click', handleShowBioClick); // Remove any existing listeners to avoid duplicates button.addEventListener('click', handleShowBioClick); }); // Add event listener to each close icon document.querySelectorAll('.close-icon').forEach(icon => { icon.removeEventListener('click', handleCloseIconClick); // Remove any existing listeners to avoid duplicates icon.addEventListener('click', handleCloseIconClick); }); } function handleShowBioClick(event) { const button = event.currentTarget; const postID = button.id.replace('button', ''); // Extract the post ID from the button ID const containerID = 'container' + postID; // Construct the container ID // Hide all containers document.querySelectorAll('.container').forEach(container => { container.style.display = 'none'; }); // Show the specific container related to the clicked button const containerToShow = document.getElementById(containerID); if (containerToShow) { containerToShow.style.display = 'block'; } } function handleCloseIconClick() { // Hide all containers when a close icon is clicked document.querySelectorAll('.container').forEach(container => { container.style.display = 'none'; }); } // Initial attachment of event listeners attachShowBioEventListeners(); // Reattach event listeners after the filter is applied document.querySelectorAll('.e-filter-item').forEach(filterButton => { filterButton.addEventListener('click', function () { setTimeout(attachShowBioEventListeners, 500); // Wait a bit for the DOM to update }); }); });
This is amazing got it working on a container nearly missed adding the button and the container to the ID's before (the two bits you said were really important!) but once added works a treat. Thank you!
Thank you!! I have a strange issue. The popup that opens when clicking on a post is being overlapped by all the posts that come after it. For example, if there are 5 posts in a row and I click on the second post, posts 3, 4, and 5 appear on top of the popup.
Please Help.... I have a strange issue. The popup that opens when clicking on a post is being overlapped by all the posts that come after it. For example, if there are 5 posts in a row and I click on the second post, posts 3, 4, and 5 appear on top of the popup. Thank you!
Fantastic video. Really easy to follow. Unfortunately I realised a there is a problem. If the content is a liitle big, bigger that the screen height, it's not visible at the end and there is no scroll. I did not manage to solve it yet. Seems a little tricky
Hi, Thanks a lot for this tutorial ! I have a question : when closing the "popup", no matter where I am on the page, it brings back to the top of the page. How can I keep the scroll level of the page before opening the popup ?
Hello! It worked for me with this updated code: .container { display: none; /* Hide all containers by default */ } .button_style { pointer-events: auto; cursor: pointer; /* Ensure pointer cursor on hover */ } document.addEventListener('DOMContentLoaded', function () { // Select all buttons that have an ID starting with 'button' const buttons = document.querySelectorAll('[id^=button]'); // Add event listeners to each button buttons.forEach(button => { button.addEventListener('click', function (event) { event.preventDefault(); // Prevent default behavior (e.g., jumping to top of the page) const postID = button.id.replace('button', ''); // Extract the post ID from the button ID const containerID = 'container' + postID; // Construct the container ID // Hide all containers document.querySelectorAll('.container').forEach(container => { container.style.display = 'none'; }); // Show the specific container related to the clicked button const containerToShow = document.getElementById(containerID); if (containerToShow) { containerToShow.style.display = 'block'; } }); }); // Add event listener to each close icon document.querySelectorAll('.close-icon').forEach(icon => { icon.addEventListener('click', function () { // Hide all containers when a close icon is clicked document.querySelectorAll('.container').forEach(container => { container.style.display = 'none'; }); }); }); });
awesome! - I was trying to do this months ago with no success! Question, does this only work with a button acting as a trigger? can an image or other object act as the trigger? - thanks!
Interesting! It can be possible with Off-Canvas widget? I want to simulate the 3 vertical dots traditional app menu that displays more option on a UI Card. Thanks in advanced.
Using this to play UA-cam videos in the pop up. Works great, except that when you close the popup, the video sound keeps playing. Is there a way to stop the video playing when you close the window?
@@websquadron you can add this to the function handleCloseIconClick() and it works: document.querySelectorAll('').forEach(v => { v.src = v.src }); document.querySelectorAll('video').forEach(v => { v.pause() });
That's because of the listeners: Use this instead :) .container { display: none; /* Hide all containers by default */ } .button_style { pointer-events: auto; cursor: pointer; /* Ensure pointer cursor on hover */ } document.addEventListener('DOMContentLoaded', function () { function attachShowBioEventListeners() { // Select all buttons that have an ID starting with 'button' const buttons = document.querySelectorAll('[id^=button]'); // Add event listeners to each button buttons.forEach(button => { button.removeEventListener('click', handleShowBioClick); // Remove any existing listeners to avoid duplicates button.addEventListener('click', handleShowBioClick); }); // Add event listener to each close icon document.querySelectorAll('.close-icon').forEach(icon => { icon.removeEventListener('click', handleCloseIconClick); // Remove any existing listeners to avoid duplicates icon.addEventListener('click', handleCloseIconClick); }); } function handleShowBioClick(event) { const button = event.currentTarget; const postID = button.id.replace('button', ''); // Extract the post ID from the button ID const containerID = 'container' + postID; // Construct the container ID // Hide all containers document.querySelectorAll('.container').forEach(container => { container.style.display = 'none'; }); // Show the specific container related to the clicked button const containerToShow = document.getElementById(containerID); if (containerToShow) { containerToShow.style.display = 'block'; } } function handleCloseIconClick() { // Hide all containers when a close icon is clicked document.querySelectorAll('.container').forEach(container => { container.style.display = 'none'; }); } // Initial attachment of event listeners attachShowBioEventListeners(); // Reattach event listeners after the filter is applied document.querySelectorAll('.e-filter-item').forEach(filterButton => { filterButton.addEventListener('click', function () { setTimeout(attachShowBioEventListeners, 500); // Wait a bit for the DOM to update }); }); });
When you set an element's display property to none, the element is still present in the HTML DOM (i.e., it exists in the page source), but it is not rendered on the screen. This means the element is invisible to users and doesn't occupy any space on the webpage. For SEO purposes: Search engine crawlers generally can see elements with display: none, because they are still part of the page's HTML.
@@websquadron "Thank you for the response! I tried using the video widget with the source, but it’s not working for me. Could you please make a video tutorial on this? I think it would help many people. Thank you!"
Hi, I did everything exactly as in the video, but after clicking "show bio," a window appears only against the background of one tile :(. Where could the mistake be?). Regards.
Great. But aint working for me... on mobile if you choose one of post grids dipslay none (i use 2 loop grids bcs of mobile) its simply hidden. :/... And you use loop grid with pagination, its not loading other pages.
If you have the Taxonomy Filter as well, then use this modified code:
.container {
display: none; /* Hide all containers by default */
}
.button_style {
pointer-events: auto;
cursor: pointer; /* Ensure pointer cursor on hover */
}
document.addEventListener('DOMContentLoaded', function () {
function attachShowBioEventListeners() {
// Select all buttons that have an ID starting with 'button'
const buttons = document.querySelectorAll('[id^=button]');
// Add event listeners to each button
buttons.forEach(button => {
button.removeEventListener('click', handleShowBioClick); // Remove any existing listeners to avoid duplicates
button.addEventListener('click', handleShowBioClick);
});
// Add event listener to each close icon
document.querySelectorAll('.close-icon').forEach(icon => {
icon.removeEventListener('click', handleCloseIconClick); // Remove any existing listeners to avoid duplicates
icon.addEventListener('click', handleCloseIconClick);
});
}
function handleShowBioClick(event) {
const button = event.currentTarget;
const postID = button.id.replace('button', ''); // Extract the post ID from the button ID
const containerID = 'container' + postID; // Construct the container ID
// Hide all containers
document.querySelectorAll('.container').forEach(container => {
container.style.display = 'none';
});
// Show the specific container related to the clicked button
const containerToShow = document.getElementById(containerID);
if (containerToShow) {
containerToShow.style.display = 'block';
}
}
function handleCloseIconClick() {
// Hide all containers when a close icon is clicked
document.querySelectorAll('.container').forEach(container => {
container.style.display = 'none';
});
}
// Initial attachment of event listeners
attachShowBioEventListeners();
// Reattach event listeners after the filter is applied
document.querySelectorAll('.e-filter-item').forEach(filterButton => {
filterButton.addEventListener('click', function () {
setTimeout(attachShowBioEventListeners, 500); // Wait a bit for the DOM to update
});
});
});
@websquadron this doesn't work once we filter the grid.
So when we click on some filter, and it shows the filtered item the popup stops appearing
Do you have any ideas on how to fix this code so that it can be used with the Taxonomy Filter?
This is amazing got it working on a container nearly missed adding the button and the container to the ID's before (the two bits you said were really important!) but once added works a treat. Thank you!
Glad it helped!
Had a similar challenge and used crocoblock popup builder to achieve this (whilst testing) but might go this route in the final site. Thanks!
Thank you!!
I have a strange issue. The popup that opens when clicking on a post is being overlapped by all the posts that come after it. For example, if there are 5 posts in a row and I click on the second post, posts 3, 4, and 5 appear on top of the popup.
Thank you so much! Life saver
Once again, this ist gold!
Nicely done!!!
Thanks!
Please Help.... I have a strange issue. The popup that opens when clicking on a post is being overlapped by all the posts that come after it. For example, if there are 5 posts in a row and I click on the second post, posts 3, 4, and 5 appear on top of the popup.
Thank you!
Fantastic video. Really easy to follow.
Unfortunately I realised a there is a problem. If the content is a liitle big, bigger that the screen height, it's not visible at the end and there is no scroll. I did not manage to solve it yet. Seems a little tricky
Hi,
Thanks a lot for this tutorial !
I have a question : when closing the "popup", no matter where I am on the page, it brings back to the top of the page. How can I keep the scroll level of the page before opening the popup ?
Hello! It worked for me with this updated code:
.container {
display: none; /* Hide all containers by default */
}
.button_style {
pointer-events: auto;
cursor: pointer; /* Ensure pointer cursor on hover */
}
document.addEventListener('DOMContentLoaded', function () {
// Select all buttons that have an ID starting with 'button'
const buttons = document.querySelectorAll('[id^=button]');
// Add event listeners to each button
buttons.forEach(button => {
button.addEventListener('click', function (event) {
event.preventDefault(); // Prevent default behavior (e.g., jumping to top of the page)
const postID = button.id.replace('button', ''); // Extract the post ID from the button ID
const containerID = 'container' + postID; // Construct the container ID
// Hide all containers
document.querySelectorAll('.container').forEach(container => {
container.style.display = 'none';
});
// Show the specific container related to the clicked button
const containerToShow = document.getElementById(containerID);
if (containerToShow) {
containerToShow.style.display = 'block';
}
});
});
// Add event listener to each close icon
document.querySelectorAll('.close-icon').forEach(icon => {
icon.addEventListener('click', function () {
// Hide all containers when a close icon is clicked
document.querySelectorAll('.container').forEach(container => {
container.style.display = 'none';
});
});
});
});
awesome! - I was trying to do this months ago with no success! Question, does this only work with a button acting as a trigger? can an image or other object act as the trigger? - thanks!
As long as the CSS ID of the element is set to Post ID - then it should be fine.
It works great on any other object. I just tested on an image!
When i activate for the ajax preloading it not work anymore, it work only on first preloading after ajax fired button not working at all
Interesting!
It can be possible with Off-Canvas widget? I want to simulate the 3 vertical dots traditional app menu that displays more option on a UI Card.
Thanks in advanced.
I'm not convinced that it can without adding extra load time. Test it out and let me know.
Using this to play UA-cam videos in the pop up. Works great, except that when you close the popup, the video sound keeps playing. Is there a way to stop the video playing when you close the window?
Would need extra JS I guess.
@@websquadron you can add this to the function handleCloseIconClick() and it works:
document.querySelectorAll('').forEach(v => { v.src = v.src });
document.querySelectorAll('video').forEach(v => { v.pause() });
Hey, Imran, do you know how to close the container when clicked on transparent background? Maybe there is a way to modify the html?
Just add .close-icon class to that background color container and it will work the same as the button!
Amazing video. Is there a way to make it work with Loop Carousel on mobile?
Yes you can. It's the same process as you build the loop template in the carousel :)
Is it possible to use this solution with the carousel loop? I had problems implementing it, the pop-up container is getting stuck in the carousel
Yes as it’s a loop
if you also use taxonomy filters this one no longer works,
Do you have any ideas how we can solve this?
That's because of the listeners:
Use this instead :)
.container {
display: none; /* Hide all containers by default */
}
.button_style {
pointer-events: auto;
cursor: pointer; /* Ensure pointer cursor on hover */
}
document.addEventListener('DOMContentLoaded', function () {
function attachShowBioEventListeners() {
// Select all buttons that have an ID starting with 'button'
const buttons = document.querySelectorAll('[id^=button]');
// Add event listeners to each button
buttons.forEach(button => {
button.removeEventListener('click', handleShowBioClick); // Remove any existing listeners to avoid duplicates
button.addEventListener('click', handleShowBioClick);
});
// Add event listener to each close icon
document.querySelectorAll('.close-icon').forEach(icon => {
icon.removeEventListener('click', handleCloseIconClick); // Remove any existing listeners to avoid duplicates
icon.addEventListener('click', handleCloseIconClick);
});
}
function handleShowBioClick(event) {
const button = event.currentTarget;
const postID = button.id.replace('button', ''); // Extract the post ID from the button ID
const containerID = 'container' + postID; // Construct the container ID
// Hide all containers
document.querySelectorAll('.container').forEach(container => {
container.style.display = 'none';
});
// Show the specific container related to the clicked button
const containerToShow = document.getElementById(containerID);
if (containerToShow) {
containerToShow.style.display = 'block';
}
}
function handleCloseIconClick() {
// Hide all containers when a close icon is clicked
document.querySelectorAll('.container').forEach(container => {
container.style.display = 'none';
});
}
// Initial attachment of event listeners
attachShowBioEventListeners();
// Reattach event listeners after the filter is applied
document.querySelectorAll('.e-filter-item').forEach(filterButton => {
filterButton.addEventListener('click', function () {
setTimeout(attachShowBioEventListeners, 500); // Wait a bit for the DOM to update
});
});
});
With the use of HTML and JS, how is SEO affected? Will the information in the pop-up still be analyzed?
When you set an element's display property to none, the element is still present in the HTML DOM (i.e., it exists in the page source), but it is not rendered on the screen. This means the element is invisible to users and doesn't occupy any space on the webpage.
For SEO purposes: Search engine crawlers generally can see elements with display: none, because they are still part of the page's HTML.
Is it possible to play a UA-cam video in a pop-up, where the video link is dynamically pulled from ACF fields?
Yes you can with the video widget and then add it to the source
@@websquadron "Thank you for the response! I tried using the video widget with the source, but it’s not working for me. Could you please make a video tutorial on this? I think it would help many people. Thank you!"
Hi, I did everything exactly as in the video, but after clicking "show bio," a window appears only against the background of one tile :(. Where could the mistake be?). Regards.
Difficult to be sure without working on your site.
Hello Imran, how can I copy the CSS animations and JavaScript/Jquery animation from any website. Thanks
Copy the Page Source.
Great. But aint working for me... on mobile if you choose one of post grids dipslay none (i use 2 loop grids bcs of mobile) its simply hidden. :/... And you use loop grid with pagination, its not loading other pages.
Difficult to tell from this unless I’m working on the site?