CSS Styles Not Sticking in Jquery

Hello everyone!

I'm new here and I need some help. I want to change the background of a td element without losing the CSS styling that is currently applied to it. Right now, the background is repeating and tiling.

Below is the script I am using:


$(function () {
    var change1 = $('#change1');
    var backgrounds = [
    'url(http://content.abt.com/media/images/promos/change1abe.jpg)', 
    'url(http://content.abt.com/media/images/promos/change1fish.jpg)',
    'url(http://content.abt.com/media/images/promos/change1abe.jpg)'];
    var current = 0;

function nextBackground() {
    change1.css(
        'background',
    backgrounds[current = ++current % backgrounds.length]);

    setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
change1.css('background', backgrounds[0]);
});

Here is the CSS snippet I have:


.tdback{
border:2px solid #fff; 
background-repeat:no-repeat; 
background-position: left top; 
}

And this is my HTML markup:

 <td class="tdback" id="change1" height="50%" width="33%">
javascriptjqueryhtmlcss

Answer №1

http://jsfiddle.net/silkster/Uwh7V/

To ensure the background-repeat is properly set, it should be updated each time the background image changes.

$(function () {
    var change1 = $('#change1');
    var backgrounds = [
        'url(http://content.abt.com/media/images/promos/change1abe.jpg)',
        'url(http://content.abt.com/media/images/promos/change1fish.jpg)',
        'url(http://content.abt.com/media/images/promos/change1abe.jpg)'];
    var current = 0;

    function nextBackground() {
        change1.css({
            'background-image': backgrounds[current = ++current % backgrounds.length],
                'background-repeat': 'no-repeat'
        });

        setTimeout(nextBackground, 5000);
    }
    setTimeout(nextBackground, 5000);
    change1.css({
        'background-image': backgrounds[0],
            'background-repeat': 'no-repeat'
    });
});

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

Ways to trigger Bootstrap modal through a PHP GET call

I have been searching for a solution to create a modal similar to this one, but I haven't found anything yet. My requirement is that when we pass true in a GET request, the modal should be displayed. Otherwise, if there is no value specified in the $ ...

javascriptphphtmlbootstrap-modal

The client side isn't providing the JSON data

I need assistance with sending JSON data from the client side to the server side. On the client side: function sendData() { var formData = { first: $("#name").val(), last: $("#lastname").val() } console.log("Sending data: " + ...

javascriptnode.jsajaxexpress

Picking a live Selected choice within an HTML form

I currently have a dropdown menu that displays a list of employee names: <select class="form-control" id="assignee" name="assignee" style="max-width: 300px;"> <option value="Employee 1">Employee 1</option> <option value="Em ...

phphtmlsql

What is the reason that adding bottom padding and margins is ineffective in creating vertical space between these links?

I am struggling with aligning links vertically in a div. Currently, I am using <br> tags to stack them on top of each other because I couldn't find a way to add vertical spacing with CSS. I attempted to add bottom margin and padding to the &apos ...

csshtmlanchorspacing

Begin by adding the sub Route at the start of the route path in Angular

How can I dynamically add a user's name to all routing pages in my Angular project when they type the URL like www.mysite.com/hisName? The desired result should be www.mysite.com/hisName/home This is the routing code I have: import { NgModule } from ...

javascriptangulartypescriptroutes

The selection elements fail to reset correctly

I'm currently working on an Angular 4 application where I have a form that includes a select element inside a box. <div class="form-group"> <label for="designation">Designation</label> <select [class.red-borde ...

javascriptangularforms

The custom validation function in jQuery is not triggering

I am facing an issue with my HTML and JavaScript setup, which looks like this: <html> <head> <title>Validation Test</title> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="htt ...

javascriptjquery

The following middleware is not functioning properly on a local SSL server

When I run my Nextjs app without SSL using "next dev", the middleware functions as expected without any errors. However, if I attempt to run the app with SSL enabled, an empty middleware function triggers an error. The code for the middleware function (l ...

javascriptnode.jsreactjssslnext.js

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

I'm interested in adjusting the position of my draggable element based on the distance moved by the mouse. For instance, if the scale is 1:2 and the cursor is moved 10px to the right, then the draggable should move 20px. I already have my draggable ...

javascriptjqueryhtmljquery-ui

Risks associated with working with position:relative and left/top in web development

When using position: relative; with multiple elements, are there any potential issues to be aware of? Unlike position: absolute;, which may not display correctly on different monitors. For example: <img src="blah.png"/ class="someClass"> <im ...

htmlcsscss-position

What is the best way to appropriately update a partial that displays another partial (refreshing with JavaScript leads to a page within a page)?

Update 2 - marzapower's assistance proved valuable once again. The success section in the ajax was identified as the root cause of the issue, as explained below. UPDATE: marzapower's solution works effectively (refer to it below), but I require ...

jqueryruby-on-railsajaxruby-on-rails-3

Inside the Promise.then() function, iterate through the values using a for loop

I am curious about the behavior of promise.then() within a for loop in node.js. Consider the following code snippet: const arrayObject = [ { id: 1234, toto: 'abc' }, { id: 5678, toto: 'def' }, { id: 910, ...

javascriptnode.jspromise

Is Jquery getting imported correctly, but AJAX is failing to work?

I am currently working on a Chrome extension that automatically logs in to the wifi network. I have implemented AJAX for the post request, but when I inspect the network activity of the popup, I do not see any POST requests being sent. Instead, it only sho ...

javascriptjqueryajaxgoogle-chrome-extension

Utilizing worldwide server session within an express node.js application

What is the best way to grant access to the current session for the modules in my node.js app when I can only access it within the request's function? My app is complex but modular, and passing the session between modules seems challenging as it wou ...

javascriptnode.jssessionexpress

Identify which anchor tag from the group with the matching class was selected and retrieve its unique identifier

There are multiple anchor tags with the same class in my code. <a href='' id='id1' class='abc'>Link 1</a> <a href='' id='id2' class='abc'>Link 2</a> <a href='&apos ...

javascripthtml

Tips for displaying an alpha-numeric keyboard in a React Native application

I am struggling to display an alpha-numeric keyboard in my React-Native App. I have tried various values for the keyboardType prop, but none of them seem to work for me. If anyone has any suggestions on how I can achieve this, please do share your ideas w ...

javascriptiosxcodereact-nativeandroid-studio

Utilizing Bootstrap 5: Executing JavaScript exclusively upon successful form validation

I've created a form with multiple input fields that are being validated using Bootstrap 5 validation. <form class="needs-validation asset-test" action="{{ url_for('asset_test') }}" method="post" novalidate> ...

javascriptbootstrap-5

Is it possible for a table data cell to be nested within another table

Is it possible for a <td> to be a direct child of another <td>? For example: <td class="parent"> <td class="child"> <!-- Some content --> </td> </td> Or is it necessary to always create a new < ...

htmlhtml-tablew3cw3c-validation

Discovering the bound ASP.NET AJAX event handlers for a specific DOM element

I am currently working on customizing a pre-existing ASP.NET 3.5 AJAX web application, specifically SharePoint 2010. Unfortunately, I do not have the ability to modify the source code. My task involves adding a click event handler to act as the first even ...

javascriptasp.netdom-eventsasp.net-ajax

Is it possible to determine if a HTML element has word-wrap applied, causing a word to break in the middle of the text?

Inside a div, I have Persian text that wraps because I've used word-wrap: break-word; and the div's size is smaller than the text. <div class="r25" style="width: 13.3333px; height: 50px;"> <p style="font-size: 8px;">This is an ex ...

javascripthtmlcss