I’m trying to create a pop-up slider on my homepage. I generated the code using ChatGPT, and it works fine on my local XAMPP setup when I include right after at the top of the index.php file. However, on my web hosting server, including it right after header.php causes the pop-up to appear without displaying content. When I place it after footer.php, the pop-up shows with content but appears below the footer. Why might this be happening?
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
let currentPage = 0;
const pages = $(".dialog-page");
const pageCount = pages.length;
function showPage(index) {
pages.hide();
$(pages[index]).show();
updateIndicators(index);
}
function updateIndicators(index) {
$(".indicator").removeClass("active");
$(".indicator").eq(index).addClass("active");
}
$("#dialog-message-a").dialog({
width: '90%', // Set the width to 90% for better responsiveness
maxWidth: 900, // Max width to maintain size on larger screens
height: 'auto', // Auto height based on content
autoOpen: true,
modal: true,
position: { my: "center", at: "top+100", of: window },
show: { effect: "blind", duration: 700 },
closeText: "Close"
});
$(".arrow-left").click(function() {
currentPage = (currentPage - 1 + pageCount) % pageCount;
showPage(currentPage);
});
$(".arrow-right").click(function() {
currentPage = (currentPage + 1) % pageCount;
showPage(currentPage);
});
setInterval(function() {
if ($("#dialog-message-a").dialog("isOpen")) {
currentPage = (currentPage + 1) % pageCount;
showPage(currentPage);
}
}, 5000);
// Generate indicators based on page count
for (let i = 0; i < pageCount; i++) {
$(".indicators").append('<span class="indicator' + (i === 0 ? ' active' : '') + '"></span>');
}
showPage(currentPage);
});
</script>
<style>
.dialog-page {
display: none;
overflow-y: auto;
text-align: center;
max-height: 100vh; /* Limit height to 80% of the viewport height */
}
.arrow-left, .arrow-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 50%;
user-select: none;
}
.arrow-left { left: 10px; }
.arrow-right { right: 10px; }
.indicators {
text-align: center;
margin-top: 20px;
}
.indicator {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background-color: #ddd;
}
.indicator.active {
background-color: #333;
}
/* Media Queries for Responsiveness */
@media (max-width: 600px) {
.arrow-left, .arrow-right {
font-size: 18px; /* Smaller arrow size on mobile */
padding: 8px; /* Less padding */
}
#dialog-message-a {
width: 95%; /* More width on smaller screens */
max-height: 80vh; /* Limit height on mobile devices */
}
.dialog-page p {
font-size: 14pt; /* Slightly smaller font size */
}
.dialog-page img {
width: 100%; /* Ensure images take full width */
height: auto; /* Maintain aspect ratio */
}
}
@media (min-width: 601px) and (max-width: 900px) {
#dialog-message-a {
width: 90%; /* Less width for medium screens */
max-height: 90vh; /* Limit height for medium devices */
}
.dialog-page img {
width: 80%; /* Adjust image size for medium screens */
}
}
@media (min-width: 901px) {
#dialog-message-a {
max-height: 80vh; /* Limit height for larger screens */
}
}
</style>
<div id="dialog-message-a" title="Events">
<!-- Left Arrow Button -->
<div class="arrow-left">◀</div>
<!-- Right Arrow Button -->
<div class="arrow-right">▶</div>
<!-- Page 1-->
<div class="dialog-page">
<p style="font-size:15pt; font-weight:bold;">Page 1</p>
</div>
<!-- Page 2 -->
<div class="dialog-page">
<p style="font-size:15pt; font-weight:bold;">image</p>
</div>
<!-- Page 3-->
<div class="dialog-page">
<p style="font-size:15pt; font-weight:bold;">Page 3</p>
</div>
<!-- Indicators for Current and Total Pages -->
<div class="indicators">
<!-- The indicators will be generated by JavaScript -->
</div>
</div>
I try in xampp it works fine but not one web hosting server.