Adjust the position of all content below when the specific div slides down

I am attempting to create a notification div that smoothly slides down when active. The sliding effect is achieved through this script:

<script type="text/javascript>
    $(document).ready(function(){
        $('#notice').slideDown(1000);
         $('.exit').click(function(){
             $("#notice").slideUp(400);
         });
    });
</script>

The corresponding style is as follows:

#notice {
    background: #E0E0E0;
    color: #FFF;
    padding-left: 30px; 
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 30px;
    position: absolute;
    z-index: 999999;
    width: calc(100% - 60px);
    top: 0;
    font-weight: 200;
    letter-spacing: 1px;
    text-align: center;
    display: none;
}

In order to have everything else move down as the div slides down, even when the lower div is in a 'position: fixed' state, I am seeking a solution to slide everything back up when the .exit link is clicked.

javascriptjqueryhtmlcss

Answer №1

Here is a solution you can try:

Take a look at this example http://jsfiddle.net/jvarj4gk/2/

$('#notification').slideDown(1000);
 var timer = setInterval(function () {
     $('#fixed').css({
         top: $('#notification').outerHeight()
     });
     if ($('#notification').outerHeight() == $('#fixed').css('top')) {
         clearInterval(timer);
     }

 }, 10);

 $('.close').click(function () {
     $("#notification").slideUp(400, function(){
         $(this).remove();
     });
     $('#fixed').animate({
         top: 0
     }, 400);

 });

Update

If you want to move the #content, you can achieve that with the following code:

Check out this example http://jsfiddle.net/jvarj4gk/5/

$('#notification').slideDown(1000);
 var timer = setInterval(function () {
     $('#fixed, #content').css({
         top: $('#notification').outerHeight()
     });
     if ($('#notification').outerHeight() == $('#fixed').css('top')) {
         clearInterval(timer);
     }

 }, 10);

 $('.close').click(function () {
     $("#notification").slideUp(400, function(){
         $(this).remove();
     });
     $('#fixed').animate({
         top: 0
     }, 400);

 });

Answer №2

Below is a div that can be animated using the animate() function

var height = '+=' + $('#notice').height();
$('#fixedDivId').animate({
    top: height
},1000);

Similar steps can be taken for sliding up, with 

height='-='+ $('#notice').height();

UPDATE Your code should be modified as follows:

 $(document).ready(function(){
    var height = $('#notice').height()+'px';
    $('#notice').slideDown({duration:1000, queue:false});
    $('#fixedDivId').animate({
       top: height
    },{duration:1000, queue:false});
    $('.exit').click(function(){
       $("#notice").slideUp(400);
    });
 });

Access the Fiddle here

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

Real-Time Chat Update Script

Recently, I've been delving into PHP and attempting to create a live chat web application. The data for the chat is stored in a MySQL database, and I have written a function called UpdateDb() that refreshes the chat content displayed in a certain div ...

javascriptphphtmlajax

Delete an item from an array based on its index within the props

I am attempting to remove a specific value by its index in the props array that was passed from another component. const updatedData = [...this.props.data].splice([...this.props.data].indexOf(oldData), 1); const {tableData, ...application} = oldData; this ...

javascriptreactjs

Stack div on top of div

It seems like I'm facing a simple problem that needs a solution. I have two container divs .topwrap{ position:relative; top:100px; background:#00C; } </i> and .lowerwrap{ position:relative; ...

htmlcssposition

What is the best way to create a summary module that consolidates and re-exports all the exported functionalities from multiple sub-modules in E

Is there a way to re-export the exports from multiple files in an ESM module without manually listing each export? I am looking to convert my CommonJS module directory, which contains several files, to ESM imports/exports. Currently, I have an index.js fi ...

javascriptnode.jsnode-moduleses6-modules

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

I have a webpage with select menus for choosing user type, minimum age, and maximum age. I want to select options and send values as an object array to ajax. Initially, the getAjax function is working when the page loads. However, it stops working when I c ...

javascriptjqueryhtmlajax

The intricacies of how Node.js handles asynchronous execution flow

I wanted to ask about the best approach for displaying data retrieved from MySQL. Do you think this workflow is correct? app.get('/demo/:id', function(req, res) { var query = csql.query('SELECT * FROM table_videos WHERE id=? LIMIT 1' ...

javascriptmysqlnode.jsexpress

Unable to update state in my React app when clicking on a button

There is a requirement for a button click to filter the job-card array by one specific category. For example, clicking on the button "Marketing" should only show jobs from the array that have the property "jobstags: Marketing". I followed a similar procedu ...

javascriptarraysreactjsstate

The drop-down menu remains visible even after clicking outside of it

I've written a script that works when clicked, but it doesn't hide when clicked outside of it. $(document).ready(function() { //Translate(); //caling Language Translater function $("#translate_image").attr('href', base_url) ...

javascriptjquery

PayPal form without encryption

Once upon a time, I recall creating a button in Paypal which provided me with a standard HTML form. However, now everything seems to be encrypted. Is there a way to retrieve an unencrypted format? I need to be able to manually adjust the price using jQuer ...

phphtmlencryptionpaypal

Creating an Innovative Grid Design with Varying Column Widths for Each Row

Seeking advice on achieving a specific layout using HTML. I have attempted to use HTML tables but struggled with creating rows with varying columns. Does anyone have recommendations for grid tools that may be more helpful? Thank you ...

htmlcsslayout

Expanding Beyond Boundaries: Utilizing CSS to Overflow From a Div and Fill the Entire Screen

I have a main DIV that acts as part of my responsive layout grid. It grows to the maximum width I've set, which is 1280px, and then adds margins for larger devices. Below you'll find my CSS along with a snippet of Less code. .container { mar ...

css

How can Typescript help enhance the readability of optional React prop types?

When working with React, it is common practice to use null to indicate that a prop is optional: function Foo({ count = null }) {} The TypeScript type for this scenario would be: function Foo({ count = null }: { count: number | null }): ReactElement {} Wh ...

javascriptreactjstypescript

Error: JSON encountered circular structure when attempting to serialize an object of type 'ClientRequest' with a property 'socket' that references an object of type 'Socket'

Encountering an error while attempting to make a POST request to my TypeORM API using axios: TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -&g ...

javascriptnode.jstypescripttypeorm

Inconsistency with div heights in Chrome, unlike Firefox and IE where it works smoothly

I am in the process of creating a simple website using MVC3, with plans to make it easily expandable in the future. Despite my limited skills in javascript, I have attempted various online solutions to address a persistent issue with Chrome. Some have sugg ...

jquerycssasp.net-mvc-3

Attempting to create a fresh string by substituting certain characters with different ones

Exploring TypeScript, I encountered a puzzle where I needed to substitute specific characters in a string with other characters. Essentially, replacing A with T, T with A, C with G, and G with C. The initial code snippet provided to me looked like this: e ...

javascripttypescript

Saving a revised JSON file using AngularJS

Currently, I am in the process of developing a phonegap application using AngularJS that relies on a .json file to store an array of entries. The main goal I am aiming for is to enable users to mark specific entries as favorites and then utilize that data ...

javascriptjsonangularjscordova

Form with a dropdown menu and a button to duplicate the dropdown menu

In my form, I have a simple setup where user names are listed, and for each user, there is a drop-down box displaying items that can be assigned to them. To facilitate the assignment of multiple items to a user, I want to implement a feature where a "add a ...

javascriptformsdrop-down-menudom-events

Disable automatic focus on first button in PrimeNG Dialog

I am looking for a way to stop the autofocus on the first input element when opening the PrimeNG dialog. <p-dialog header="User Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" (onAfterHide)="onDialogHide ...

htmlangularprimengprimeng-dialog

Tips on stopping the page from scrolling following an ajax request (return false not effective or potentially misplaced)

I am working on a project that involves displaying a tree with information from the Catalogue of Life, including details such as Kingdom, phylum, order, and more. My approach includes using ajax/php to interact with a mySQL database and javascript to handl ...

phpjavascriptajaxscroll

Experiencing issues calling a function in Vue.js while working with the SDK JavaScript?

When attempting to integrate the JavaScript SDK into Vuejs by utilizing a Facebook login button, I encountered an issue: <template> <div> <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" d ...

javascriptvue.jssdk