Delving into the World of CSS

Question

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank.

$(function() {
var body = $('body');
var backgrounds = new Array(
'url(images/bg.jpeg)',
'url(images/bg2.jpeg)',
'url(images/bg3.jpeg)'
);
var current = 0;

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

setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css('background', backgrounds[0]);
});

In addition, I have included jQuery by linking to the Google CDN.

Thank you so much for your assistance.

T

javascript jquery html css

Answer 1

Answer №1

There may not be an official answer for this question, but I will provide a response based on the comments.

The issue stemmed from the use of ‘curly quotes’ instead of 'straight quotes.'

Answer 2

There may not be an official answer for this question, but I will provide a response based on the comments.

The issue stemmed from the use of ‘curly quotes’ instead of 'straight quotes.'

Answer 3

Answer №2

The provided code contains errors such as incorrect quote marks for strings and a missing comma after the second background value.

$(function() {
  var body = $('body');
  var backgrounds = new Array(
    'url(images/bg.jpeg)',
    'url(images/bg2.jpeg)',
    'url(images/bg3.jpeg)'
  );
  var current = 0;

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

    setTimeout(nextBackground, 10000);
  }
  setTimeout(nextBackground, 10000);
  body.css('background', backgrounds[0]);
});

You can view a demo showcasing the corrected version with colors instead of background images: https://jsfiddle.net/kb58tvo9/1/

A cleaner version of the code can be found here: https://jsfiddle.net/kb58tvo9/2/

Answer 4

The provided code contains errors such as incorrect quote marks for strings and a missing comma after the second background value.

$(function() {
  var body = $('body');
  var backgrounds = new Array(
    'url(images/bg.jpeg)',
    'url(images/bg2.jpeg)',
    'url(images/bg3.jpeg)'
  );
  var current = 0;

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

    setTimeout(nextBackground, 10000);
  }
  setTimeout(nextBackground, 10000);
  body.css('background', backgrounds[0]);
});

You can view a demo showcasing the corrected version with colors instead of background images: https://jsfiddle.net/kb58tvo9/1/

A cleaner version of the code can be found here: https://jsfiddle.net/kb58tvo9/2/

Delving into the World of CSS

Answer №1

Answer №2

Similar questions

Styling with CSS: Using a Base64 Encoded Image in the Background URL

JQuery button.click() handler executes without a user click

Optimal method for detecting changes in a React webpage

Learn the best way to handle special characters like <, >, ", ', and & in Javascript, and successfully transfer escaped data from one text box to another

Bootstrap 3.2.0 Grid Column Creation Problem Identified

Invoke Selenium using JavaScript

What could be causing the undefined properties of my input variables in Angular?

How to disable the automatic sliding of the Twitter Bootstrap carousel when the page first loads

Using Vue 3 to have the ability to include multiple composable instances in a single script tag

What is the best way to display a single font in various sizes?

How can you use jQuery.ajax to solely fetch the status code without downloading the entire document?

Redirecting with response headers in Next.js

Is there a way to delay rendering the html until all the content has been fully downloaded?

Switching from the global import module pattern to ES6 modules

Scrolling automatically

What is the importance of including the source name when redirecting?

Uncertain about the process of accessing req.body data

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Could not locate module: Issue: Unable to resolve './Firebase'

The Heroku application is rendering with different CSS and positioning compared to the local development environment