Button Styles Not Working On Phones

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>&nbsp;
                            <?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>&nbsp;";
                            }
                            ?>
                        </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>&nbsp;
                            <?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>&nbsp;";
                            }
                            ?>
                        </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"); ?>


Well my first impression is your mobile-show and computer-show blocks are… almost identical (to the point of only being a CSS rule different?) so i’d have combined those to simplify…

Second is that we dont have your CSS to be able to validate the situation.

… so… disable the hover styling on mobile?

1 Like

On iphones the hover style is treated as a first tap and will be persistent until something else active is touched on the page.

Therefore when you tap a button it will change to the hover color you set. However if you hold your finger on the button you will see that the :active color will flash briefly but will return to the hover color as :active is a transitory state.

You say that you see gray on a desktop but if its a persisten gray then that is not the :active state as such because as I said above the :active state is only the moment that you click and then its gone. It is not a persistent state. I’m guessing that you may mean :focus instead which will stay that colour until something else is clicked.

I suggest that if you want the button to remain gray on mobile then you give mobile the hover rule but with the gray color and then they will remain gray when tapped.

e.g.


button:hover {
  background: red;
}
button:active,
button:focus {
  background: green;
}
/* for non hover devices */
@media (any-hover: none) {
  button:hover {
    background: green;
  }
}
2 Likes

Thanks guys for the help… I managed to fix it with some css update.