My site is built on WordPress, but I also have many PHP based pages. My Wiki is built from my database. I am trying to show another page of my own site (entitycard.php) in a javascript popup iframe, when hovering over a link to show stats of in-game weapons/armors/items. It works great, but for some reason entitycard.php is giving me the WordPress “Sorry, no posts matched your criteria” issue.
See video below showing the problem on my site, but it working great on localhost. Here is also a screenshot of the issue on my site versus it working in localhost. I appreciate any insight.
Working in localhost versus issue in PROD:
Website where you can see the issue:
https://www.kisnardonline.com/wiki/players.php?name=Tomek
https://www.kisnardonline.com/wiki/entitycard.php?entityid=697711
entitycard.php is just a connection to database and then output. Nothing WordPress within it.
Code below for anyone who may want to beg, borrow, steal 🙂
CSS style:
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
}
</style>
onmouseover hover js/php and popup iframe:
...
echo "<td><a onmouseover="showPopup(this)" onmouseout="hidePopup(this)" href="entity.php?entityid=$entity_id">$name_with_quantityplusraritystarlevel</a></td>";
...
echo "<div id="myModal" class="modal">";
echo "<div class="modal-content">";
echo "<iframe onload="resizeIFrameToFitContent()" id="popupcontent" height="200px" width="150px"></iframe>";
echo "</div>";
echo "</div>";
Javascript for popup hide/show:
<script>
// START: Code for popup on entity link hover
var modal = document.getElementById('myModal');
// To show the modal popup when hovering over the Entity URL link
showPopup = function(context) {
let link = context.href;
link = link.replace("entity.php", "entitycard.php");
//link example is https://www.kisnardonline.com/wiki/entitycard.php?entityid=697711
modal.style.display = "block";
document.getElementById("popupcontent").src = link;
resizeIFrameToFitContent();
};
// When the user moves mouse off of link, close the modal
hidePopup = function(context) {
modal.style.display = "none";
}
// To resize the popup iFrame
function resizeIFrameToFitContent() {
document.getElementById("popupcontent").width = 0;
document.getElementById("popupcontent").height = 0;
document.getElementById("popupcontent").width = document.getElementById("popupcontent").contentWindow.document.documentElement.scrollWidth + 7;
document.getElementById("popupcontent").height = document.getElementById("popupcontent").contentWindow.document.documentElement.scrollHeight;
}
// END: Code for popup on entity link hover
</script>