Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner).

    <script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element;

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>


  <div class = "layout">
 <div class="header"><asp:label id="label1" runat="server/></div>
   <div class="chart"><asp:label id="label2" runat="server/></div>
    <div class="legend"><asp:label id="label3" runat="server/></div>
     <div class="info1"><asp:label id="label4" runat="server/></div>
      <div class="info2"><asp:label id="label5" runat="server/></div>
      <div class="info3"><asp:label id="label6" runat="server/></div>............
  </div>

  ![enter image description here][1]
  The screenshot is provided below

Answer №1

Attempting this task with JavaScript is not feasible due to the presence of ASP.NET controls. To tackle this issue, you will need to modify each div by adding runat="server" and adjusting their IDs to Upperleftcorner, Upperrightcornerbottom, bottomleftcorner, bottomrightcorner.

Given Code Snippet:

          List<HtmlGenericControl> alldivs=new List<HtmlGenericControl>(4);
            alldivs.Add(Upperleftcorner);
            alldivs.Add(Upperrightcornerbottom);
            alldivs.Add(bottomleftcorner);
            alldivs.Add(bottomrightcorner); 
            foreach(HtmlGenericControl divparent in alldivs)
            {
            HtmlGenericControl divholder= new HtmlGenericControl("div");
            divholder.Attributes.Add("class", "layout");
            for(int i=1;i<=6;i++)
            {
            HtmlGenericControl div= new HtmlGenericControl("div");
            if(i==1)
            div.Attributes.Add("class", "header");
            if(i==2)
            div.Attributes.Add("class", "chart");
            if(i==3)
            div.Attributes.Add("class", "legend");
            if(i==4)
            div.Attributes.Add("class", "info1");
            if(i==5)
            div.Attributes.Add("class", "info2");
            if(i==6)
            div.Attributes.Add("class", "info3");
            Label l=new Label();
            div.Controls.Add(l);
            divholder.Controls.Add(div);
            }
            divparent.Controls.Add(divholder);
            }

To implement changes using JavaScript, incorporation of <span> tags is necessary.

<script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element='<div class = "layout"><div class="header"><span  class="label1" /></div><div class="chart"><span  class="label2" /></div><div class="legend"><span  class="label3" /></div><div class="info1"><span  class="label4" r/></div><div class="info2"><span  class="label5" /></div><div class="info3"><span class="label6" /></div></div>';

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>

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

How to modify the background color within the mat-menu-panel

Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...

Hover effect for child element not activating CSS3 Transition

I need my list item to activate a css3 transition on its child element .pusher when it is hovered over. I usually achieve this using JS, but I want to try implementing it with css3 transitions. After reading some other questions on SO, I attempted to do it ...

Troubleshooting CSS issues in a Docker container running a VueJs project

I have successfully set up a VueJs project on AWS using Docker. Following the guidelines in the Real-World Example section of the documentation, I created a Dockerfile with instructions to copy my nginx conf file: # build stage FROM node:lts-alpine as buil ...

Information sent to a slot does not trigger a response

Trying to create a mobile-friendly chat app, I want to hide the new message button during conversations and use a different button on desktop. In addition, I have a dialog for creating new chat groups. <v-dialog transition="dialog-top-transition&qu ...

The user type is not yet loaded from Firestore when the view is rendered

I am currently in the process of developing an Ionic - Angular application that allows hospital patients to submit requests to nursing staff, who can then view the assigned requests based on the patient's room. Nurses have access to all requests, whil ...

What is the process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

What is the correct location to define the "env" setting in the eslint.config.js file?

In 2022, ESLint rolled out a new configuration system called the "flat config" here. Check out the documentation for the new "flat config". | Old configuration system documentation here. The "flat config" documentation shows that the `eslint.config.js` ...

Is there a way to work around the CORS policy in order to fetch data from URLs?

I have been developing a tool that can analyze URLs from an uploaded CSV file, search the text content of each URL, and calculate the total word count as well as the occurrences of "saas" or "software". The goal is to generate a new CSV file with the origi ...

Changing the icon on click in react: a step-by-step guide

I have two MUI icons that I need to toggle with every click. I created a component for them, and one of the props (called btnClicked) controls the state. However, when clicking on the component, the icon buttons do not change. Here is the code: import Reac ...

Getting the most out of the fastest-validator package: Implementing multiple patterns and custom messages

Utilizing the powerful fastest-validator library for validation purposes. I have a requirement where the password field must contain at least one character and one number. Along with this, I am in need of specific messages for validating these conditions ...

Running a child process within a React application

I'm currently in search of the best module to use for running a child process from within a React application. Here's what I need: I want a button that, when clicked, will execute "npm test" for my application and generate a report that can be r ...

Detecting changes in URL hash using JavaScript - the ultimate guide

What is the most effective method for determining if a URL has changed in JavaScript? Some websites, such as GitHub, utilize AJAX to add page information after a # symbol in order to generate a distinct URL without having to refresh the page. How can one ...

Invoke PHP by clicking on a button

I am facing an issue with a button I have created. Here is the code for it: <input type="submit" name="kudos_button" value="★ Give kudos"/>' To test it, I wrote a PHP script like this below the </html> tag: ...

Add a blur effect to a specific region of an SVG image

I have a complex, dynamic SVG image created using jQuery SVG. I want to create a "popup" area that appears on top of all SVG elements in the canvas. To achieve a modern translucent iOS7 style, I would like to add a blur filter to everything beneath the pop ...

Exploring intricate binding expressions using IF statements in ASP.NET

I am trying to create an expression for a column in my repeater, but I am not confident about the syntax. My goal is to display "No Document" if the value is equal to "DispForm.aspx", otherwise show the actual value. I attempted to combine all expression ...

Is it possible to modify the flex direction in Bootstrap based on specific breakpoints?

I am currently utilizing Bootstrap 4 for my project. I have a div that is styled with "d-flex" and it is meant to display as a row at the "lg" breakpoint (screens 1200px and above). However, on smaller devices such as mobile phones at the "sm" or "xs" brea ...

Rearrange information when the textarea is adjusted in size

One issue I am facing is that when I resize the textarea in my form, the content below the textarea does not move along with it. How can I ensure that the content moves accordingly when resizing the textarea? <form name="contactform" method="post" ...

What is causing the malfunction with this JQuery/AJAX request?

Currently in the process of setting up an autocomplete feature. Following the guidance from php academy at the moment. My goal is to display "suggestions go here" below the input field whenever something is typed in. I have two files for this task: home.ph ...

The error message that occurs when using angularjs $scope.$apply() is: Error: [$rootScope:inprog]

Having trouble updating text on a page within the $scope. Facing this error message: Error: [$rootScope:inprog] [http://errors.angularjs.org/1.2.15/$rootScope/inprog?p0=%24apply] at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/ ...

Modify the file format depending on the browser being used as Internet Explorer

Currently seeking the most effective method to dynamically alter the file extension of certain images (from .svg to .png) specifically for Internet Explorer users. Uncertain about the optimal approach: consider parsing the HTML code with PHP utilize jQu ...