"Switching Classes with a Click Event: A Step-by-

This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than text. Any suggestions on how to achieve this?

$(function () {
    var widgetIframe = document.getElementById('sc-widget'),
        widget = SC.Widget(widgetIframe),
        img_on_pause = 'image-url-for-pause-button',
        img_on_play = 'image-url-for-play-button';
    widget.bind(SC.Widget.Events.READY, function () {
        $(".sc-toggle").attr("src", img_on_pause);
    });
    widget.bind(SC.Widget.Events.PAUSE, function () {
        $(".sc-toggle").attr("src", img_on_pause);
    });
    widget.bind(SC.Widget.Events.PLAY, function () {
        $(".sc-toggle").attr("src", img_on_play);
    });
    $(".sc-toggle").click(function (e) {
        e.preventDefault();
        widget.toggle();
    });
});

Answer №1

Applying the functions addClass and removeClass should get the desired outcome.

$(function () {
    var widgetIframe = document.getElementById('sc-widget'),
        widget = SC.Widget(widgetIframe),
        txt_on_pause = '¡Escuchar música!',
        txt_on_play = 'Escuchando algo de música... (click para pausar)';

    widget.bind(SC.Widget.Events.READY, function () {
        $(".sc-toggle")
            .removeClass('pause')
            .removeClass('play')
            .addClass('ready'));
    });
    widget.bind(SC.Widget.Events.PAUSE, function () {
        $(".sc-toggle")
            .removeClass('play')
            .removeClass('ready')
            .addClass('pause');
    });
    widget.bind(SC.Widget.Events.PLAY, function () {
        $(".sc-toggle")
            .removeClass('pause')
            .removeClass('ready')
            .addClass('play');
    });
    $(".sc-toggle").click(function (e) {
        e.preventDefault();
        widget.toggle();
    });

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

Remove a jQuery class from a parent, sibling, or child element

After implementing this jQuery code to toggle classes on elements within an unordered list, I'm not entirely convinced it's the most efficient approach. Are there any better alternatives to achieve the same effect? $(function() { $('nav ...

When IntelliJ starts Spring boot, resources folder assets are not served

I'm following a tutorial similar to this one. The setup involves a pom file that manages two modules, the frontend module and the backend module. Tools being used: IDE: Intellij, spring-boot, Vue.js I initialized the frontent module using vue init w ...

The inner workings of v8's fast object storage method

After exploring the answer to whether v8 rehashes when an object grows, I am intrigued by how v8 manages to store "fast" objects. According to the response: Fast mode for property access is significantly faster, but it requires knowledge of the object&ap ...

Working with AngularJS: binding data to dynamically appended HTML elements using JavaScript

Is there a way to connect an angular event and model to an html element that is added through javascript code? To see my code, click here: https://jsfiddle.net/hq7qk48n/13/ <div ng-app> <div ng-controller="MyController"> <input ...

Is it possible to utilize checkbox images for type="checkbox" in ng-repeat with AngularJS?

Hi there, I'm currently attempting to add a checkbox image for input type="checkbox" using ng-repeat. I've styled everything accordingly, but when I apply ng-repeat, it only works for the first item in the list. Here is what my CSS file looks lik ...

Design the button element with input text using CSS styling

https://i.sstatic.net/3vdRV.png Is there a way to stylize input text and buttons similar to this using CSS or Vuetify JS? ...

Developing a fresh browser window with a clickable button using JavaScript

Currently, I am learning JavaScript and trying to create a button on a webpage using the code I wrote in JavaScript. However, instead of adding the button to the page specified by me, it is always added to index.html. I am using WebStorm IDE for this proje ...

Attempting to vertically center text within a percentage div

I'm trying to create a button that is centered on the screen with text aligned vertically within the button. I want to achieve this using CSS only and restrict the usage of percentages only. Here's what I have so far: Check out my code snippet h ...

Obtain the final output of a specific class utilizing jQuery

My HTML table structure is as follows: <tbody id="letter-list"> <?php $index = 0; foreach($letters as $letter) { $index++; ?> <tr id="letter-<?php echo $index; ?>"> <td><?php echo $l ...

Tips for retrieving a flag when there is a preexisting record within an association in Sequelize

I am working with a model A that has a 1:N association with a model B. My objective is to retrieve all records from A and determine whether there is at least one associated record from B (true) or not (false). The relationship setup: ModelA.hasMany(ModelB ...

Prevent PHP script from running during an AJAX request

Here is a brief overview of how my small application functions: users are prompted to input a URL into a simple text field. Upon any changes made to the input, my script attempts to extract and showcase the first 10 images found on that particular webpage. ...

Dim the shading of a portion of the picture

If you have an image that covers an entire element through CSS like this #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;} Now, what if you want to add a gray ov ...

Error encountered in Angular $injector:unpr while attempting to initialize uibModal

I followed the ui-bootstrap tutorial to create my code. On my homepage, there is a button that triggers a modal window to open using ng-click. However, when I check the dev tools, I encounter the following error: Error: [$injector:unpr] Unknown provider: ...

Edit data with modal form in Angular-UI

Currently in the process of developing a single page todo application using AngularJs and Angular-Ui. Encountering difficulties when attempting to edit a todo item at this stage. The plan is to utilize a modal window for editing information, successfully ...

Is there a way to guide the user to a different page while still inside a getJSON function?

After making an external call to a JSON file, I am facing an issue where if the JSON data is null (possibly due to expired user session), the user should be redirected to the logout.php page. However, in my current implementation, instead of redirecting, t ...

The CSS selector "not:nth-child" is failing to function properly within the template

Trying to apply a margin-top to all labels except the first one in a row using the :not() and :nth-child selectors. Having trouble with my selector, can anyone help? .form-group:not(:nth-child(1)) + .label { margin-top: 20px; } <div class="form- ...

Best practices for displaying output in Python Flask after submitting an HTML form

Embarking on my first web development project, I delved into Flask. Recently, I created a basic temperature converter, running it on my local host. The webpage featured a form input for entering a value, two radio buttons for selecting Fahrenheit or Celsiu ...

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

Why is the promise not returning an integer value, but instead returning undefined?

My validation process includes checking the integrity of the down streaming data to the server and verifying its existence in the database. The code snippet from model.js: const mongoose = require('mongoose'); const User = new mongoose.Schema({ ...