Layer a div on top of another when a button is clicked

I am currently working on a project that involves two visualizations placed in different divs. My goal is to overlay one div over another when a button is clicked so that they can be compared, and then separate them again with another button click. Does anyone have any code snippets or links that could help me achieve this? I have been experimenting with the following javascript function:

function ShowOverlay(divID, xCoordinate, yCoordinate) {
    var divObject = document.getElementById(divID);
    divObject.style.visibility = "visible";    
    divObject.style.left = xCoordinate;
    divObject.style.top = yCoordinate;
}
javascripthtmlcss

Answer №1

It is recommended to utilize absolute or relative positioning.

If the position attribute is not defined as absolute or relative, then setting style.left and style.top will not have any impact.

The script below enables the elements to be repositioned (you just need to determine the coordinates:

function AdjustPosition(divID, xCoordinate, yCoordinate) {

    var divElement = document.getElementById(divID);

    divElement.style.visibility = "visible";
    divElement.style.left = xCoordinate;
    divElement.style.top = yCoordinate;
    divElement.style.position = "absolute";

}

To revert it, simply reset the position to static:

divElement.style.position = "static";

Answer №2

Check out this straightforward demonstration of moving three divs on top of each other with a button click. HTML code

<div class="container">
 <div class = "circlea"><h2>link</h2></div>
 <div class = "circleb"><h2>link</h2></div>
 <div class = "circlec"><h2>link</h2></div>
 <button >click me</button>
</div>


.circlea,.circleb,.circlec{
 height:150px;
 width:150px;
 border-radius:50%;
 margin-left:50%;
 margin-top:120px;
 position: absolute;
 transition: all 1s ease-in-out;
 opacity:0;
 color:white;
 text-align:center; 
}

.circlea{
 background-color:rgba( 20, 155, 138 );
 }

.circleb{
 background-color:rgba( 155, 20, 144 );
}

.circlec{
 background-color:rgba( 24, 155, 20);
 opacity:1;
}

button{
 background-color:tomato;
 width:100px;
 padding:10px;
 color:white;
 }

.transforma{
 margin-left:200px;
 opacity:1;
 }

.transformb{
  margin-left:800px;
  opacity:1;
 }

.transformb{
 opacity:1;
 }

JavaScript 

 $("button").click(function(){

  $("div.circleb").toggleClass("transformb");
  $("div.circlea").toggleClass("transforma");

 });

https://codepen.io/pranjalkoshti/pen/rYNQeL

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

Exiting a chain of promises prematurely based on a condition without causing an error

Currently, I am facing a challenge in my node.js application. The issue lies within the registration route where I need to execute several asynchronous steps. At an early stage, there's a specific condition that requires me to halt the process and ret ...

javascriptnode.jspromise

Substitute the colon in JavaScript prior to submitting the form

I am currently working on a text input search field where I want to automatically add an escape backslash to any colon entered by the user. Below is the code snippet I have implemented so far: <form role="form" action="..." method="get"> <div ...

javascript

Update 64 for Chrome - <video> tag's mute attribute not functioning as expected

Click here to view the code snippet <div ng-app="myApp" ng-controller="testCtrl"> <section ng-if="url"> <video id="player1" playsinline autoplay loop muted volume="0.0"> <source ng-src="{{url | trusturl}}" type="video/m ...

javascriptangularjsgoogle-chrome

`The functionality of Material UI Grid item seems to be malfunctioning`

I currently have the following code snippet: <div style={{ flexGrow: 1 }}> <Grid container spacing={0} style={{ width: '100%' }}> <Grid item xs={12} sm={6}> Left Side </Grid> ...

javascriptcssreactjsmaterial-ui

What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Currently, I'm using react-bootstrap and facing a challenge in changing the background color of a chosen <ToggleButton> to blue. For instance: <ButtonToolbar> <ToggleButtonGroup type="radio" name="options" ...

cssreactjsreact-bootstrap

Implementing event listeners with AngularJS after making a POST request

As I delve into the world of development, please forgive my lack of knowledge. My search for solutions brought me here. I am currently working on a comment and reply app. In order to add comments to my view, I am utilizing this specific function. $scope.i ...

javascriptangularjs

Mastering the Rejection of Promises in Javascript with Graceful Elegance

One effective pattern using ES2017 async/await involves: async function () { try { var result = await some_promised_value() } catch (err) { console.log(`This block will be processed in a reject() callback with promise patterns, which is far mo ...

javascriptnode.jsasynchronousasync-awaites6-promise

Unable to retain the textbox value upon the initial button click in ReactJS

Can you please assist me? I am trying to save textbox data to hooks, but when I click the save button, the data is not immediately saved to my useState. I have to click the save button again in order to save it to the hooks. Here are the relevant code sni ...

javascriptreactjs

Animating content using CSS keyframes for dynamic changes

I'm trying to change the text of a div using keyframes with the code content:'text';, but unfortunately, the div remains empty and nothing happens. The content inside the #neon-sign div is not updating and stays blank: #neon-sign { p ...

csscss-animations

Tips for resolving the issue of a Bootstrap dropdown menu overlapping content in its vicinity

I am trying to position a Bootstrap dropdown button on the right-hand side of the page. The dropdown should cover 100% of the page's width and overlay any content when activated. However, there is a large logo on the left-hand side that I want users t ...

javascriptjqueryhtmlcssbootstrap-4

I'm facing an issue where the Font Awesome icons are not appearing in my code

I'm seeking assistance with my code as I develop a website and have encountered a roadblock at the very beginning. Despite following a tutorial, I expect two icons to be displayed in the window but instead, all I see is a blank white screen. <! ...

htmlcsstwitter-bootstrapbootstrap-4font-awesome

Bootstrap is not supporting the use of justify-content-between in cards

Incorporating Bootstrap 4, I am designing a horizontal card layout for a classified ad. My goal is to have the ad title on the left and the price on the right within the header section using a Django template: <section class="card"> ...

htmlcssbootstrap-4

Gatsby's own domain and absolute links: the perfect pair

My goal is to establish a direct link to files (such as images and downloads) in my static directory. During development, the link should be http://localhost/myimage.jpg, and once deployed, it needs to switch to https://www.example.com/myimage.jpg. Is the ...

javascriptreactjsgatsby

What is the advantage of using event.target over directly referencing the element in eventListeners?

Suppose there are several buttons in an HTML file and the following code is executed: const buttons = document.querySelectorAll('button'); buttons.forEach((btn) => { btn.addEventListener('click', (e) => { console.log(btn.te ...

javascriptaddeventlistenertarget

Displaying information in a drop-down list based on the selection made in a previous drop

Hey fellow developers, I could really use your expertise on a project I'm working on for attendance management. I've hit a roadblock with a specific feature - my goal is to dynamically display departments based on the selected block without requi ...

phpjquerycssajaxhtml

Leveraging Jquery Splice

Trying to eliminate an element from an array using the Splice method. arrayFinalChartData =[{"id":"rootDiv","Project":"My Project","parentid":"origin"},{"1":"2","id":"e21c586d-654f-4308-8636-103e19c4d0bb","parentid":"rootDiv"},{"3":"4","id":"deca843f-9a72 ...

javascriptjqueryarrayssplice

Can angular and grunt support multiple run blocks simultaneously?

Currently, I am configuring $httpBackend to simulate fake API routes while our team of API developers is building them out. However, I am facing an issue where I have to place all the $httpBackend configurations within my run block. This leads to a situa ...

javascriptangularjsgruntjs

Tips for integrating Magnolia CMS with Phonegap

I'm currently working on creating pages in Magnolia that are compatible with phoneGap. PhoneGap is a tool that wraps HTML5/CSS/JavaScript and transforms them into mobile apps. One issue I've encountered with Magnolia is that it uses servlets lik ...

htmlcordovarendermagnolia

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

htmlcsscss-selectorspseudo-element

Interact with HTML elements through Python scripting

Check out this HTML element: <a aria-role="button" href="" class="sc-button-play playButton sc-button sc-button-xlarge" tabindex="0" title="Play" draggable="true">Play</a> After trying to use Selenium to trigger a click event: from selenium ...

pythonhtmlseleniumselenium-webdriver