Hi All
I hope I am posting this in the right place…
If you have had this problem before I think you will know the answer straight away.
I have my code, below, that is part of my system and the A, B, C and so on buttons should be grey when they are active… it is working fine on my computer and pad but not on phones… I have checked 2 phones in 3 browsers and they all have the same issue.
Instead of the button turning grey when clicked or tapped on a phone it is going to the hover colour.
Any help would be great.
Thanks for much
mrmbarnes
<?php
$titleDirectoryName = htmlspecialchars($directoryName, ENT_QUOTES);
$letter = $_GET['letter'] ?? '';
$show = $_GET['show'] ?? '';
$categoryID = $_GET['categoryID'] ?? '';
$categoryName = htmlspecialchars_decode($_GET['categoryName'] ?? '');
// Redirect to set default letter if not specified
if (empty($letter)) {
header("Location: $useCurrentUrl&letter=none");
exit;
}
?>
<title>Browse The <?php print $titleDirectoryName; ?> Alphabetically :: <?php print $mainDirectoryCompanyName; ?> and <?php print $titleDirectoryName; ?> :: Nanango Queensland (QLD) Australia</title>
<div class="container" style="padding-top:2em;">
<div class="row">
<div class="text-center">
<h1 class="customFont mainHeadingColour text-uppercase myTextShadow">Browse THE <?php print $titleDirectoryName; ?> Alphabetically</h1>
</div>
</div>
</div>
<div class="container" style="padding-top:2em;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<?php include("/home/account/public_html/resources/directories/directory/side-nav.php"); ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div style="padding-bottom:1em;">Browse The <?php print $titleDirectoryName; ?> Listings by selecting a Letter below.</div>
<div style="padding-bottom:0.5em;">When you see <img src="/images/is-member.png"> you know that Business is part of The <?php print $mainDirectoryCompanyName; ?>.</div>
<div><hr></div>
<!-- Computer View Buttons -->
<div class="computer-show">
<div class="row">
<div class="text-center">
<div style="padding-bottom:0.5em;">
<button type="button" class="btn <?php echo $letter === 'none' ? 'btn-secondary' : 'btn-main-custom'; ?>" style="width:3em;" data-letter="none" onclick="loadDirectoryByLetter('none', '<?php echo $titleDirectoryName; ?>')">#</button>
<?php
$letters = range('A', 'Z');
foreach ($letters as $btnLetter) {
$btnClass = ($letter === strtolower($btnLetter)) ? 'btn-secondary' : 'btn-main-custom';
echo "<button type='button' class='btn $btnClass' style='width:3em;' data-letter='" . strtolower($btnLetter) . "' onclick=\"loadDirectoryByLetter('$btnLetter', '$titleDirectoryName')\">$btnLetter</button> ";
}
?>
</div>
</div>
</div>
</div>
<!-- Mobile View Buttons -->
<div class="mobile-show">
<div class="row">
<div class="text-center">
<div style="padding-bottom:0.25em;">
<button type="button" class="btn <?php echo $letter === 'none' ? 'btn-secondary' : 'btn-main-custom'; ?>" style="width:3em;" data-letter="none" onclick="loadDirectoryByLetter('none', '<?php echo $titleDirectoryName; ?>')">#</button>
<?php
foreach ($letters as $btnLetter) {
$btnClass = ($letter === strtolower($btnLetter)) ? 'btn-secondary' : 'btn-main-custom';
echo "<button type='button' class='btn $btnClass' style='width:3em;' data-letter='" . strtolower($btnLetter) . "' onclick=\"loadDirectoryByLetter('$btnLetter', '$titleDirectoryName')\">$btnLetter</button> ";
}
?>
</div>
</div>
</div>
</div>
<div><hr></div>
<div style="padding-bottom:0.5em;"></div>
<!-- AJAX Content Placeholder -->
<div id="results-container">
<div class="text-center">Select a letter to browse listings.</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const initialLetter = urlParams.get('letter');
// Ensure correct button state on initial page load
if (initialLetter) {
const initialButton = document.querySelector(`button[data-letter="${initialLetter.toLowerCase()}"]`);
if (initialButton) {
initialButton.classList.remove('btn-main-custom');
initialButton.classList.add('btn-secondary');
}
}
// Function to load directory by letter on button click
window.loadDirectoryByLetter = function(letter, directoryName) {
const resultsContainer = document.getElementById('results-container');
resultsContainer.innerHTML = '<div class="text-center">Loading...</div>';
// Reset all buttons to default styling
const buttons = document.querySelectorAll('.computer-show button, .mobile-show button');
buttons.forEach(button => {
button.classList.remove('btn-secondary'); // Remove active styling
button.classList.add('btn-main-custom'); // Reset to main custom styling
});
// Apply secondary styling to the active button
const activeButton = document.querySelector(`button[data-letter="${letter.toLowerCase()}"]`);
if (activeButton) {
activeButton.classList.remove('btn-main-custom');
activeButton.classList.add('btn-secondary');
}
// Update the URL to reflect the selected letter
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('letter', letter.toLowerCase());
history.pushState(null, '', currentUrl.toString());
// Fetch and display the results for the selected letter
fetch(`https://account.com/resources/directories/directory/browse-alphabetically-fetch.php?letter=${letter}&directoryName=${directoryName}`)
.then(response => response.text())
.then(data => {
resultsContainer.innerHTML = data;
})
.catch(error => {
console.error('Error loading directory:', error);
resultsContainer.innerHTML = '<div class="text-center">An error occurred. Please try again.</div>';
});
};
});
</script>
<?php include("/home/account/public_html/resources/directories/directory/popups.php"); ?>