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

Tips for linking the search button to the corresponding input field in Angular

I'm working on a form that dynamically generates input fields using a for loop. Each input field has a corresponding search button. When a search button is clicked, it triggers a method to execute on all input fields. How can I make sure that the sear ...

How to retrieve the type of a computed keyof T as a generic type within TypeScript

I am working with two different interfaces: interface PersonRequirements{ user:string, password:string, id:number } export interface Requirement<R> { name: keyof R & string, save: () => any,/* I want this return type to be ...

Create a dynamic HTML page using JavaScript

When I click on the following links: How can I create a new page using JavaScript? Create and dynamically append elements I'm looking to dynamically add HTML elements with JavaScript within a div, but I don't want my code to become overly comp ...

Encountered an issue with undefined property when attempting to add a second value to an array of

I have been working on the following javascript code: var res = [{}]; for (var idx = 0; idx < json.length; idx++) { // if the environment is already entered in the result if (res[idx].env) { sails.log.debug('Enviro ...

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

Troubleshooting HMR issue in webpack 4 for ReactJS: HTML and SCSS not refreshing

Currently, I am setting up webpack for my application and in development mode, I would like to enable HMR (Hot Module Replacement) that automatically refreshes the page whenever there are changes in HTML, SCSS, and JSX files. The entry point for my project ...

Phonegap app failing to run Ajax request properly

I have recently updated my Android app using phonegap build to the latest version, cli-5.2.0. Here is a snippet of my config: <preference name="phonegap-version" value="cli-5.2.0" /> Additionally, here is how my overall configuration looks like: & ...

transition-duration is ineffective in a particular div

Whenever I hover over the purple text, I want it to increase in size using the zoom property. Here is an example: I am facing two issues: The time duration does not seem to work even when I try to apply it within the hover and non-hover classes. Wh ...

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

Errors in Chartist.js Data Types

I am currently using the Chartist library to monitor various metrics for a website, but I have encountered some challenges with the plotting process. The main errors that are appearing include: TypeError: a.series.map is not a function TypeError: d.normal ...

Converting the jQuery $.xajax loadmore feature into a custom XMLHttpRequest JavaScript function

I'm facing challenges while trying to create a XMLHttpRequest loadmore function as compared to using $.ajax. I am uncertain about what I might be missing in my code. Below is the function that is based on a previously working $.ajax version that I ha ...

Mastering advanced authentication with Passport and the JwtStrategy

During a recent project I downloaded from the internet... In one specific part of the code, the following is implemented: passport.use(new JwtStrategy({ secretOrKey: credentials.secret, jwtFromRequest: ExtractJwt.fromAuthHeader(), }, ...

What is the best way to have NextJS add styles to the head in a production environment?

Typically, NextJS will include <style> tags directly in the head of your HTML document during development (potentially utilizing the style-loader internally). However, when running in production mode, NextJS will extract CSS chunks and serve them as ...

Ways to parse a JSON array using Javascript in order to retrieve a specific value if it is present

Below is the JSON code stored in an array: { "kind": "urlshortener#url", "id": "http://goo.gl/2FIrtF", "longUrl": "http://hike.com/?utm_source=facebook", "status": "OK", "created": "2015-09-22T13:45:53.645+00:00", "analytics": { "allTime": { ...

What is the best method to retrieve a nested JSON property that is deeply embedded within

I am facing an issue with storing a HEX color code obtained from an API in a Vue.js app. The object app stores the color code, for example: const app = {"theme":"{\"color\":\"#186DFFF0\"}"}. However, when I try to access the color prope ...

transferring background-image in html between elements

Imagine having a three-level hierarchy HTML code structured like this: <section> <div id="outer"> <div id="inner"> </div> </div> </section> If we set background-image:someImage.jpg to the section, and backg ...

Scrolling the Html5 canvas smoothly without the need for constant re-rendering

Is it feasible to achieve smooth panning on an HTML5 canvas without the need for rerendering? Are there any examples of code that demonstrate this functionality? Furthermore, is it also possible to apply the same technique for zooming? I am experiencing ...

Stopping React from re-rendering a component when only a specific part of the state changes

Is there a way to prevent unnecessary re-renders in React when only part of the state changes? The issue I'm facing is that whenever I hover over a marker, a popup opens or closes, causing all markers to re-render even though 'myState' rema ...

Having trouble getting Node.js to run Express.js and React.js simultaneously

My tech stack consists of reactjs for the frontend and expressjs for the backend API. I experimented with the following setup: { "name": "carweb", "version": "0.1.0", "private": true, "dependencies": { // list of dependencies }, "scripts ...

Adjust Font Size inside Circular Shape using CSS/jQuery

I have been searching for different libraries that can resize text based on the size of a container. However, my container is circular and I am facing difficulty in preventing the text from overflowing beyond the border. Below you will find a Fiddle conta ...