46383

Change div Background jquery

I'm not sure what I'm doing wrong. I'm trying to get the background image of my div to change over time. I got the jQuery function from this site but its not working for me. Any clue what I'm doing wrong.

jQuery

$(window).load(function () { var images = ['wave_01.png', 'wave_02.png']; var i = 0; function changeBackground() { $('main').css('background-image', function () { if (i >= images.length) { i = 0; } return 'url(' + images[i++] + ')'; }); } // Call it on the first time changeBackground(); // Set an interval to continue setInterval(changeBackground, 3000); });

HTML

<div class="main"></div>

CSS

.main { background-image: url(../images/wave_01.png); background-repeat:no-repeat; background-size: 100% 40%; }

Answer1:

Is your path to images correct in your JavaScript ? You have:

var images = ['wave_01.png', 'wave_02.png'];

But in your CSS it's:

background-image: url(../images/wave_01.png);

This suggests the images are in the same folder as the Javascript. Is that the case ? This isn't necessarily incorrect if your project is structured that way, but worth checking. I think in reality it probably is an error though, as it would need your Javascript to be in "images" folder too to work.

If your CSS and Javascript are all in the same HTML file, make the paths the same, i.e.

var images = ['../images/wave_01.png', '../images/wave_02.png'];

If you're not sure, try both with absolute paths ( e.g. '/images/wave_01.png') instead.

Also, not sure it it's just a typo or not, but the selector $('main') should definitely be $('.main') instead.

Answer2:

Try this: <strong>Live Demo</strong>

<strong>HTML</strong> (No issues)

<div class="main" ></div>

<strong>CSS</strong>

If you are using an empty div, the background won't show.

.main { background-image: url(wave_01.png); background-repeat:no-repeat; background-size: 100% 40%; width:200px; height:200px; }

<strong>jQuery</strong>

Use $(document).ready. Use .main selector for class main. Make sure the path of image files in proper in the array.

$(document).ready(function () { var images = ['wave_01.png', 'wave_02.png']; var i = 0; function changeBackground() { $('.main').css('background-image', function () { if (i >= images.length) { i = 0; } return 'url(' + images[i++] + ')'; }); } // Call it on the first time changeBackground(); // Set an interval to continue setInterval(changeBackground, 3000); });

Answer3:

Your selector has a typo. You have 'main', but meant '.main'.

Answer4:

Your selector for main is problem. You have to use .main for selecting element based on className

Try the below code.

$(window).load(function(){ var images = ['wave_01.png','wave_02.png']; var i = 0; function changeBackground() { $('.main').css('background-image', function() { if (i >= images.length) { i=0; } return 'url(' + images[i++] + ')'; }); } // Call it on the first time changeBackground(); // Set an interval to continue setInterval(changeBackground, 3000); });

Recommend

  • Wait for angular to finish updating the DOM
  • How can I get new CSRF token in LARAVEL by using ajax
  • Getting the width from an scaled image
  • MySql - get days remaining
  • data.table replicate rows after join?
  • JSON data through JS/AJAX into PHP
  • Runtime.exec() gives Error: Could not find or load main class
  • extjs4 catching the scroll event on panel
  • Center align outputs in ipython notebook
  • Roxygen error “Skipping invalid path”
  • Adjust width of select element according to selected option's width
  • why do I get the error when installing the gem 'pg'? [duplicate]
  • FileReader+canvas image loading problem
  • Why value captured by reference in lambda is broken? [duplicate]
  • Spring security and special characters
  • AES padding and writing the ciphertext to a disk file
  • Modifying destination and filename of gulp-svg-sprite
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Adding custom controls to a full screen movie
  • Circular dependency while pushing http interceptor
  • retrieve vertices with no linked edge in arangodb
  • AngularJs get employee from factory
  • Load html files in TinyMce
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How does Linux kernel interrupt the application?
  • Qt: Run a script BEFORE make
  • apache spark aggregate function using min value
  • Django query for large number of relationships
  • Busy indicator not showing up in wpf window [duplicate]
  • reshape alternating columns in less time and using less memory
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Why do underscore prefixed variables exist?
  • How to push additional view controllers onto NavigationController but keep the TabBar?