Hi, is it possible to add a pause button?

Hi,

I’m working on making a website accessible and would like to be able to add a pause button to a ditty scrolling text. Is this possible?

I’ve tried the following code, but haven’t had any luck (FYI I used ChatGPT)

Step 1: Enqueue Custom Scripts and Styles

First, you need to enqueue custom JavaScript and CSS files in your theme’s functions.php file.

function custom_enqueue_scripts() {
    // Enqueue custom JavaScript file
    wp_enqueue_script('custom-ditty-pause', get_template_directory_uri() . '/js/custom-ditty-pause.js', array('jquery'), null, true);
    
    // Enqueue custom CSS file
    wp_enqueue_style('custom-ditty-style', get_template_directory_uri() . '/css/custom-ditty-style.css');
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Step 2: Create Custom JavaScript

Create a file named custom-ditty-pause.js in your theme’s js directory.

jQuery(document).ready(function($) {
    // Add pause button to all Ditty tickers
    $('.ditty-ticker').each(function() {
        var $ticker = $(this);
        
        // Create pause button
        var $pauseButton = $('<button class="ditty-pause-button">Pause</button>');
        $ticker.append($pauseButton);

        // Pause functionality
        $pauseButton.on('click', function() {
            var $this = $(this);
            if ($this.text() === 'Pause') {
                $ticker.addClass('paused');
                $this.text('Play');
            } else {
                $ticker.removeClass('paused');
                $this.text('Pause');
            }
        });
    });
});

Step 3: Add CSS for Pause Button

.ditty-pause-button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
}

.ditty-pause-button:hover {
    background-color: #005a87;
}

/* Example style for paused state */
.ditty-ticker.paused .ditty-ticker-item {
    animation-play-state: paused;
}

Thanks and appreciate any help.
Ashley