automatically update the background picture of the div

I have created a div with the class name 'top-page-content'. Inside this div, I added a script that is supposed to automatically change the background image of the div. Here is the code: 

    var bgArr = ["../images/unicorn-bg.jpg", "../images/twistter-bg.jpg"];
    function backgroundSlide(i) {
        $('.top-page-content').css("background", "url("+bgArr[i++]+")");
        if (i == bgArr.length) i = 0;
        var st = setTimeout(arguments.callee(i), 1000);
    }
    backgroundSlide(0)
</script>

However, it seems that the script is not functioning as expected. Can you help me identify the issue?

javascripthtmlcss

Answer №1

$('.main-content').css("background-image", "url("+images[i++]+")");

Modify the code as shown below

$('.main-content').css("background-image", "url('"+images[i++]+"')");

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

launch a website independently of the original source code

I recently completed a website project using PHP. I'm interested in deploying it without sharing the source code. Is this something that can be done with PHP? Is there a way to convert my website's code into an intermediate form before deploymen ...

phpjavascriptjqueryhtml

Showing the SQL table data output

Attempting to present a new table based on the SQL query result. Below is the initial table code shown when the user first loads the page. TABLE: <form action="walkthroughs.php" method="POST"> Platform: <input type="text" name="platform" ...

phphtmlmysql

Exploring the concept of next middle-ware within the realm of Express.js and Sail.js controllers

Currently, I am utilizing sails.js framework which is constructed on top of express.js. Within my routes.js file, I have defined a route as shown below: '/account/login': { controller : 'Session', action : 'l ...

javascriptnode.jsmodel-view-controllerexpresssails.js

The JavaScript image slideshow functions perfectly when run from a local environment, however, it encounters

It seems like you all are my go-to team for JavaScript assistance. I've encountered an issue with a slideshow on my webpage. The slideshow works perfectly fine when I load the local copy of the page, but it fails to function properly when I load the a ...

javascriptjqueryhtmlcss

Having trouble adding a value to a specific location in Javascript

I have a JavaScript code that retrieves HTML markup or text data from the user and submits it to the server. Now, I have added a dialog box that collects descriptions about the code from the user on button click and sends this data to the server as a desc ...

javascriptjqueryhtmlajax

Issue: Module '@angular/compiler' not found

After downloading an angular template, I encountered an issue while running "ng serve": Cannot find module '@angular/compiler' Error: Cannot find module '@angular/compiler' ... I tried various solutions found on the internet, incl ...

javascriptnode.jsangularnpmterminal

Do we need to use initializeApp() from Firebase 9 when setting up email login?

Similar Topic: Exploring the Fun of Firebase's initializeApp(config) Function When integrating Gmail login, is it necessary for an app to invoke intializeApp()? Although the documentation specifies that a config object must be provided to initializ ...

javascriptfirebasefirebase-authentication

Click on a button to completely remove all JavaScript from your website using jQuery

I'm currently experiencing some difficulties with my website Concept Studio. On a specific page, I have a typing animation within a form and I'd like to include a button that allows users to skip the animation. However, I'm unsure of how to ...

javascriptjquery

Having trouble with JSON search not functioning as expected in Select2 4.0?

After numerous hours of effort, I finally managed to successfully load and display the json file, complete with the flag icons using Select2 4.0. The code ended up appearing deceptively simple. However, I am now facing an issue where the search function i ...

javascriptjqueryjsonjquery-select2

Unable to Transmit Authorization Header in Cross-Domain Access Situation

My Node.js server has cross-origin communication enabled, allowing my Vue application to access its API from a different origin where static assets are served. This is achieved by setting the following code in Node.js: res.setHeader('Access-Control-Al ...

javascriptnode.jsauthenticationcorspreflight

Using Choices.js to inject live data into the select dropdown options

I am currently utilizing Choices.js for multi-select functionality and incorporating a select with a search box. Even though I am using Angular.js to populate the data, it does not appear to be functioning correctly. Is there anyone who can assist me in dy ...

javascriptangularjsajax

I'm experiencing difficulties with app.use() not functioning in my specific case, even though the paths are identical

My goal is to transfer the dist folder from the server to the client. When I use the following command, it works perfectly: app.use('/', express.static( Path.join(__dirname, '..', 'node_modules', 'del-js-webapp', &a ...

javascriptexpress

Leverage JavaScript variables within PHP

Seeking assistance on using javascript variable in php. After researching various resources such as stackoverflow and google, I have yet to find a suitable solution. Although aware of the distinction between client-side scripting in js and server-side proc ...

javascriptphpjquery

An example of using quotes within quotes is an HTML tag embedded within JavaScript code

Currently, I'm working on a JavaScript code where clicking assigns the function getImage the source of an image to be displayed later on the page. The issue I'm facing revolves around dealing with quotation marks. <img src="bill.jpg" class=" ...

javascripthtml

How do I go about extracting and presenting the JSON data from the ESPN API?

In my current project, I am trying to utilize the jQuery library to work with API JSON data. Even though I am experienced in parsing JSON in PHP, I want to explore doing it with jQuery this time around. The goal is to extract information about each of the ...

javascriptjqueryhtmljson

Discover the optimal path and most competitive cost within an array

How can you efficiently determine the cheapest route for customers? For instance, how do you compare prices between Guarulhos to Rio or Sao Paulo to Rio. In the code snippet provided, I am looking to specifically display the route with the lowest combine ...

javascriptreactjs

Access a single document from Firestore:

How can I fetch a single document from Firestore in Angular 4? I am not looking for a list of documents in the collection, I already know how to do that. Let's say I have a key-value pair of the document and I want to retrieve it using Angular 4. i ...

javascriptangularrxjsgoogle-cloud-firestoreangularfire5

Interactive image map with hover effects and external image swapping placed beyond the container

I've encountered a problem with a responsive image map and rollovers. Using Matt Stow's responsive image jQuery plugin ensures that coordinates are responsive, and clicking on an area brings up Lightview as expected. However, the issue arises whe ...

phpjavascriptjqueryresponsive-design

The div element makes a comeback following its disappearance using the .hide() method in jQuery

I've tried various solutions and checked similar questions, but I have had no luck so far. I have a simple div where users can enter their name and surname. My goal is to post the input to another page using jQuery, hide the first div (div1), and sho ...

javascriptjqueryhtmlmysqlcss

Struggling with validating forms with JavaScript

I'm having trouble with the following JavaScript code: <script type="text/javascript"> function checkDetails(search) { var search = documment.getElementById('query'); if(search.value ==''||search.val ...

javascripthtmldom-events