How can I add divs to an HTML page with a Javascript animated background?

I am currently facing an issue with my JavaScript animated background, consisting of just 3 pictures. I am trying to display some Div elements on it with content inside.

Here is the code snippet I have right now: In my CSS file, I have defined styles for the divs content. However, they are not displaying on the JavaScript animation itself.

<head>

    <title></title>
    <link href="rekensite.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="main">

            <div class="hoi">
            <img id="change-me" src='w1.jpg' style="width:99%;height:99%" alt='[]' />
            <div class="main">
            <div class="Back">
    <div class="header">
    <div class="menu">
    <div class="content">


        <script>

        var
            images = [ "11.jpg", "22.jpg", "33.jpg" ] //the list of images
          , imgToCHange = document.getElementById( 'change-me' )
          , interval = 1000 //in ms
          ;

        setInterval( function(){
          images.unshift( images.pop() );
          imgToCHange.src = images[0];
         }, interval );

        </script>


        </div>
        </div>
        </div>
        </div>
        </div></div>
<div class="Bottom"><br/> </div>
</body>

Answer №1

It seems that the issue lies in your attempt to overlay divs on top of an image. To resolve this, you should set the background image of a specific div (presumably "hoi" in your scenario) and then place all other div elements within it. In my demonstration, I have eliminated the image and adjusted the style for the "hoi" div to display a background image along with a blue border for visibility. Additionally, I have updated the JavaScript code to ensure seamless background image transitions. This setup should seamlessly integrate with your images.

Feel free to explore the implementation through my interactive jsbin demo here.

HTML

<div class="hoi" id="change-me" style="width:99%;height:99%;border:1px solid blue">
    Replace this space with the previous image content
    <div class="main">main
            <div class="Back">back
                <div class="header">Header
                    <div class="menu">menu
                        <div class="content">content
</div></div></div></div></div></div>

JavaScript:

var
    images = [ "11.jpg", "22.jpg", "33.jpg" ] //an array of image paths
  , imgToCHange = document.getElementById( 'change-me' )
  , interval = 1000 //in milliseconds
  ;

setInterval( function(){
  images.unshift( images.pop() );
  imgToCHange.style.backgroundImage = "url(" + images[0] + ")";
 }, interval );

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

Incorporate a dynamic fading effect for text and images using JQuery

I successfully implemented a Crossfade effect using Jquery: function doAnimationLoop(o, n, t, i, a) { fadeInOut(o, n, t, i, function() { setTimeout(function() { doAnimationLoop(o, n, t, i, a) }, a) ...

What is the best way to guide the user to a different page with PHP once the preventDefault() function in jQuery has been utilized on a

My approach to form validation involves using jQuery, AJAX, and PHP on my website. I utilize PHP for the actual input validation process as I believe it is more secure and prevents users from manipulating scripts through browser source code inspection. Add ...

Angular throws an error when trying to parse undefined data outside of an async function

I'm having trouble parsing data retrieved from an http call and passing it to ngOnInit. Can you assist me in finding a solution? My project is built with Angular 4. Here's the async function: async getAsyncData() { this.asyncResult = awai ...

Unlocking the potential of GraphQL: Harnessing the power of sibling resolvers to access output from another

Could use a little assistance. Let's say I'm trying to retrieve the following data: { parent { obj1 { value1 } obj2 { value2 } } } Now, I need the result of value2 in the value1 resolver for calculation ...

gulp.watch executes tasks without following a specific sequence

Objective Develop a gulp.watch task to execute other tasks in a specific sequence Why this is unique While many have referred me to How to run Gulp tasks sequentially one after the other, my query differs as it pertains to using gulp.watch instead of gu ...

Fine-tuning the flexbox grid layout for various screen sizes, both big and small

Two different layouts were created. The first layout is designed for medium & large screens, while the second one is tailored for devices with a maximum width of 736px. Check out the vanilla implementation using flexbox (without mobile adaptation) Here ...

Is it possible to display two separate pieces of content in two separate divs simultaneously?

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( <span>Is React a JavaScript library for creating user interfaces?</span>, document.getElementById("question1") ) ReactDOM.render( <form class="options"> ...

How to use jQuery to adjust the opacity of a CSS background

I am facing a challenge with changing the transparency of a <div> element's background color using jQuery. An external API provides me with a hexadecimal value for the color: #abcdef I make use of jQuery (version 1.9) to apply this color using ...

Issue with Magento: Unable to execute dataflow profiles due to Ajax Error (Uncaught TypeError: e is not a function)

Whenever I try to execute a dataflow profile in Magento, the following series of events unfold: The CSV file is uploaded successfully X rows are found A message displays: Starting ... :: saveRow (handler-method) However, a JavaScript error interrupts th ...

What is the Significance of the Height in This Sample Menu?

I came across this interesting menu sample on W3Schools while working on my MVC layout page. My menu was looking messy, and I really liked the clean look of this one. When I pasted it into my website, it worked perfectly, but I'm puzzled about how it& ...

Executing a webservice method in an html page using javascript without the need to refresh the page

Is it possible to call a webservice from an index.html page using JavaScript? My webservice is located at "localhost/ws/service.asmx" and the specific web method I want to call is called HelloWorld. The index.html page contains an HTML submit button whic ...

What is causing the search feature to malfunction on the Detail page?

In my project, I have different components for handling shows. The Shows.jsx component is responsible for rendering all the shows, while the ProductDetails component displays information about a single show. Additionally, there is a Search component which ...

Troubleshooting the 'App Already Bootstrapped with this Element' Error in AngularJS

When I try to load my AngularJS app, I encounter the following error: Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element '<html lang="en" ng-app="app" class="ng-scope">' I have only placed ng-app once in the html elem ...

Pulling JSON Data with Ajax Request

I am attempting to retrieve the following JSON Data: {"status":"success","id":8,"title":"Test","content":"This is test 12"} Using this Ajax Request: $.ajax({ url: 'http://www.XXX.de/?apikey=XXX&search=test', type: "GET", dataType: 'js ...

Retrieve the HTML structure from an AJAX response

I'm working on an Ajax call in my code: callAjaxController: function(){ var url = Routing.generate('ajax_price'); $.ajax({ type: "GET", url: url, cache: false, success: funct ...

Determining the Clicked Button in ReactJS

I need help with a simple coding requirement that involves detecting which button is clicked. Below is the code snippet: import React, { useState } from 'react' const App = () => { const data = [ ['Hotel 1A', ['A']], ...

What is the method for transforming an array object into an object?

How can I assign the values of an array object called hello to a constant called answer, changing the key value in the process? I've considered using Object.entries but couldn't quite get it right. Is there a way to achieve this? Here is my cod ...

javascript: extracting class name from HTML elements

To extract class names from an HTML code using JavaScript, I can utilize the following method: var cPattern = new RegExp(/class[ \t]*=[ \t]*"[^"]+"/g); var cMatches = data.match(cPattern); However, the above code returns an array with values li ...

Is it possible to use reactjs and react-router to showcase either a component or {this.props.children}?

Here's the scene: I have multiple components where certain words can be clicked to link to a reference page/component. If the highlighted words are not clicked, the component is displayed as is (and there are many of them with this feature and a menu ...

Ways to conceal or deactivate button controls on videojs?

I am building an application using video.js and Vue. I am looking for a way to hide or disable certain controls like the play button, playback rate, and make the progress bar read-only. In the video.js documentation, I found that using controls: false hi ...