Move the absolutely positioned div on either side of the parent element to create a dynamic animation

I am working with a structure that looks like this:

.sectors-column-right {
  float: right;
  width: 800px;
  height: 796px;
  position: relative;
}
.sectors-modal {
  background: #fff;
  width: 764px;
  height: 500px;
  position: absolute;
  top: 58px;
  right: 18px;
  z-index: 1111;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
<div class="sectors-column-right">
  <div class="sectors-column">
  </div>
  <div class="sectors-column">
  </div>
  <div class="sectors-modal">
  </div>
</div>

Is there a way to make the .sectors-modal element animate outwards (on both sides simultaneously) when clicked? Can this be achieved solely with CSS, or do I need JavaScript?

jqueryhtmlcss

Answer №1

  • Eliminate the specified width from .selectors-modal

  • Add left: 0 and right: 0 (or adjust to positive values for spacing) to .selectors-modal for full stretching

  • Assign a suitable transition property to .selectors-modal

  • When hovering (or clicking with jQuery), change the left and right values to negative. The transition effect creates a smooth animation.

Ensure there is enough room for expansion. In this example, space has been generated by setting left: -200px on the parent element.

Example — On Hover

.sectors-column-right {
  float: right;
  width: 200px;
  height: 796px;
  position: relative;
  background: #F00;
  left: -200px;
}
.sectors-modal {
  background: #fff;
  height: 500px;
  position: absolute;
  top: 58px;
  left: 10px;
  right: 10px;
  z-index: 2;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 1s;
}
.sectors-modal:hover {
  right: -200px;
  left: -200px;
  }
<div class="sectors-column-right">
  <div class="sectors-column">
  </div>
  <div class="sectors-column">
  </div>
  <div class="sectors-modal">
  </div>
</div>

Example — On Click (using jQuery)

$( ".sectors-modal" ).click(function() {
  $( this ).toggleClass( "expanded" );
});
.sectors-column-right {
  float: right;
  width: 200px;
  height: 796px;
  position: relative;
  background: #F00;
  left: -200px;
}
.sectors-modal {
  background: #fff;
  height: 500px;
  position: absolute;
  top: 58px;
  left: 10px;
  right: 10px;
  z-index: 2;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 1s;
}
.expanded {
  right: -200px;
  left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectors-column-right">
  <div class="sectors-column">
  </div>
  <div class="sectors-column">
  </div>
  <div class="sectors-modal">
  </div>
</div>

Answer №2

if you remove the position:relative from the parent element, then the absolutely positioned div will inherit its positioning values (left,right) from the document.`

.sectors-column-right {
  float: right;
  width: 800px;
  height: 796px;
  border: 1px solid red;
}
.sectors-modal {
  background: #fff;
  background: grey;
  height: 500px;
  position: absolute;
  top: 58px;
  right: 1px;
  left: 1px;
  z-index: 1111;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
<div class="sectors-column-right">
  <div class="sectors-column"></div>
  <div class="sectors-column"></div>
  <div class="sectors-modal">width</div>
</div>

Answer №3

.sectors-column-right { position: relative; width: 100%; }
.sectors-modal{ width: auto; margin-left: 160px; border: 1px solid #000; }
.sectors-column{ width: 145px; position: absolute; top: 0px; bottom: 0px; border: 1px solid #F00; }
<div class="sectors-column-right">
    <div class="sectors-column">
    </div>
    <div class="sectors-column">
    </div>
    <div class="sectors-modal"></div>
</div>

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

Implement a CSS style for all upcoming elements

I'm currently developing a Chrome extension tailored for my personal needs. I am looking to implement a CSS rule that will be applied to all elements within a certain class, even if they are dynamically generated after the execution of my extension&ap ...

javascriptcssgoogle-chrome-extension

transferring data between pages without the need for a form tag

<a href='new.php?logi_jo=$_POST[jo]'>submit</a> <input type='text' style='width:50px' name='logi_jo'> Is there a method to extract the value of logi_jo and transfer it to another webpage without u ...

phpjavascriptjquery

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

javascriptjqueryhtmlcssjson

Tips for invoking a PHP script to handle an uploaded file when clicking

As a beginner in JavaScript and PHP, I have been struggling to find a solution for the past 2 days. I want my index.php file to have an input field for uploading a file, along with a button that, when clicked, will trigger a JavaScript function to call m ...

javascriptphpjquery

Designing the appearance of a jQuery UI range slider

I recently delved into the world of jQuery UI for the first time, and let me tell you, it's been quite the challenge. I've been attempting to create a slider that looks like this: https://i.sstatic.net/YZ3gM.png However, I'm struggling to c ...

jqueryhtmlcssjquery-ui

Submitting a form in a JQuery dialog box

When users encounter a sign-in form, they are faced with two options: submit or cancel. If they choose to submit, they will proceed with the action. If they decide to cancel, a different outcome will occur. There seems to be a minor issue that might not b ...

jqueryhtmlcssformsdialog

Save information in a session using html and javascript

I'm having trouble accessing a session variable in my javascript code. I attempted to retrieve it directly but ran into issues. As an alternative, I tried storing the value in a hidden HTML input element, but I am unsure of how to properly do that wit ...

javascriptphphtmlsession

Shutting down Bootstrap's modal with Knockout

I have created a function that simplifies the process of displaying dynamically-generated modals without the need to manually create them in the HTML code. The function is based on one I found online. To summarize, here's how it works: I added a ne ...

javascriptjqueryknockout.jsbootstrap-4modal-dialog

The response from AJAX delivers HTML data

I recently implemented an AJAX call in my CodeIgniter project. Let me show you the code: Here is the view section: $('#forgotPassword').click(function() { var base_url = '<?php echo base_url()?>'; $('#forgo ...

javascriptphpjqueryajaxcodeigniter

If the body's height is adjusted, the page will automatically scroll to the top

I'm facing an issue where a button on my HTML page triggers a popup box to open (which covers the background). To prevent the background from scrolling, I am using the following CSS: windowHeight = $(window).height(); $("body").css({ "height": wi ...

javascriptjqueryhtmlcss

Issue with Angular 6: date disappearing upon refreshing the page

While working with a textarea that allows users to submit comments, I encountered an issue. Whenever a comment is submitted, the date and time of submission are saved along with the comment in a JSON file. However, upon refreshing the page, the date inform ...

javascriptangularhtmltypescriptangular6

How can I continuously track the vertical distance of an element from the top while scrolling in JavaScript using jQuery?

Is there a way to bind the scroll action in order for me to determine the pixel distance from the top as users scroll? ...

javascriptjquery

"Get the Easy Tabs Plugin and never lose your place with its automatic scroll to

Greetings! I have integrated the Jquery EasyTabs Plugin into my website by following the instructions provided on the Jquery EasyTabs plugin page. The plugin seems to be functioning properly; however, I am facing an issue where clicking on each tab takes m ...

javascriptjqueryhtmlcss

What could be causing my bootstrap to overlap?

Hello everyone, I am currently in the process of creating a basic template to enhance the overall design of my website. I recently started utilizing Bootstrap and encountered an issue where my footer is overlapping when I resize my browser to a smaller siz ...

htmlcssfrontendbootstrap-4

The incorporation of sweetalert into the project is dependent on the presence of children

I'm a beginner in javascript and I have a specific requirement. I want to display a sweetalert only if there are children elements present. In my container, if I add something and then try to leave the page without saving, a sweetalert should pop up a ...

javascriptjqueryangularjs

Finding the height of concealed content within a div using the overflow:hidden setup

I'm trying to create a div that expands when clicked to reveal its content. I've taken the following steps so far: Established a div with overflow:hidden property Developed a JavaScript function that switches between a "minimized" and "maximize ...

javascripthtmlcss

Issue with synchronization between Jquery Countdown and server

I'm currently working on setting up a countdown for an upcoming event. For this, I am utilizing the Jquery Countdown plugin. This is the code I have so far: $(function () { var eventDate = new Date("July 30, 2011 00:00:00"); $('#default ...

phpjquerytimeclockcountdown

Conceal list item using Jquery on the beginning of a new month

As someone with experience in CSS rather than programming, I find jQuery a bit challenging. However, I am trying to achieve a specific task and could use some help. I have an unordered list (UL) with one list item (li) representing each month. My goal is t ...

jquery

Remove HTML element and launch in a separate browser tab while preserving styles

I am currently working on developing a single-page application with Polymer3 (Javascript ES6 with imports). One of the key functionalities of my application involves moving widgets to new browser windows, allowing users to spread them across multiple scree ...

javascripthtmlwebecmascript-6polymer

What is the most effective method for managing various types of single quotes (’) and (') in jQuery, Perl, and Mechanize?

Recently, I encountered an issue with a form in HTML that I'm submitting using jQuer.ajax to a Perl script which uses Mechanize to process the form on a specific URL. Everything seems to be working fine, except for one thing - when I check the informa ...

javascriptjqueryperlformsmechanize