Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

Question

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

My webpage contains a div element positioned in the middle of the content, with its height being adjustable through JavaScript code.

I am seeking a way to manage the scrolling behavior when the height of the div changes. Specifically, I want the content to always be pushed downwards and never upwards.

Currently, the content moves either up or down based on the scroll position when the button is triggered.

Below is a basic example:

function toggle(ev) {
    const div = document.querySelector("div");
    if (div.style.height === "336px") {
      div.style.height = "147px";
    } else {
        div.style.height = "336px";
    }
}

body {max-width: 60em; margin: auto;}

<p style="background-color: coral; height: 400px;"></p>
<div style="background-color:grey; height: 147px;"></div>
<button href="#" onclick="toggle()">toggle div size</button>
<p style="background-color: olive; height: 3000px;"></p>

To clarify, I am looking for a solution where the top paragraph remains fixed in its position when the div expands, regardless of the current button location on the window. This means that the bottom paragraph should adjust its position accordingly as well.

javascript html css

Answer 1

Answer №1

To prevent the button from causing the page to scroll when clicked, blur the element using e.target.blur() in the click handler before updating the content height. This way, the window will no longer consider the button as active and won't automatically keep it in view.

const handleClick = e => {
    e.target.blur()
    updateScrollHeight()
}

function adjustSize(ev) {
    const container = document.querySelector("div");
    ev.target.blur();
    if (container.style.height === "336px") {
      container.style.height = "147px";
    } else {
        container.style.height = "336px";
    }
}

document.querySelector("button").addEventListener("click", adjustSize);

body {max-width: 60em; margin: auto;}

<p style="background-color: coral; height: 400px;"></p>
<div style="background-color:grey; height: 147px;"></div>
<button href="#">toggle div size</button>
<p style="background-color: olive; height: 3000px;"></p>

Answer 2

To prevent the button from causing the page to scroll when clicked, blur the element using e.target.blur() in the click handler before updating the content height. This way, the window will no longer consider the button as active and won't automatically keep it in view.

const handleClick = e => {
    e.target.blur()
    updateScrollHeight()
}

function adjustSize(ev) {
    const container = document.querySelector("div");
    ev.target.blur();
    if (container.style.height === "336px") {
      container.style.height = "147px";
    } else {
        container.style.height = "336px";
    }
}

document.querySelector("button").addEventListener("click", adjustSize);

body {max-width: 60em; margin: auto;}

<p style="background-color: coral; height: 400px;"></p>
<div style="background-color:grey; height: 147px;"></div>
<button href="#">toggle div size</button>
<p style="background-color: olive; height: 3000px;"></p>

Answer 3

Answer №2

It seems like you are trying to automatically scroll to the bottom when adjusting the height.

function adjustHeight(ev) {
  const targetDiv = document.querySelector("div");
  if (targetDiv.style.height === "336px") {
    targetDiv.style.height = "147px";
  } else {
      targetDiv.style.height = "336px";
  }
  targetDiv.scrollTop = targetDiv.scrollHeight
}

Answer 4

It seems like you are trying to automatically scroll to the bottom when adjusting the height.

function adjustHeight(ev) {
  const targetDiv = document.querySelector("div");
  if (targetDiv.style.height === "336px") {
    targetDiv.style.height = "147px";
  } else {
      targetDiv.style.height = "336px";
  }
  targetDiv.scrollTop = targetDiv.scrollHeight
}

Answer 5

Answer №3

If you want to navigate to a specific element, you can achieve this by using the window.scrollTo function.

<!doctype html>

<style>
    body {max-width: 60em; margin: auto;}
</style>

<script>
function switchSize(event) {
    const targetDiv = document.querySelector("div");
    if (targetDiv.style.height === "336px") {
      targetDiv.style.height = "147px";
    } else {
        targetDiv.style.height = "336px";
    }
    window.scrollTo(0, targetDiv.scrollHeight);
}
</script>

<p style="background-color: coral; height: 400px;"></p>
<div style="background-color:grey; height: 147px;"></div>
<button href="#" onclick="switchSize()">Adjust div size</button>
<p style="background-color: olive; height: 3000px;"></p>

Answer 6

If you want to navigate to a specific element, you can achieve this by using the window.scrollTo function.

<!doctype html>

<style>
    body {max-width: 60em; margin: auto;}
</style>

<script>
function switchSize(event) {
    const targetDiv = document.querySelector("div");
    if (targetDiv.style.height === "336px") {
      targetDiv.style.height = "147px";
    } else {
        targetDiv.style.height = "336px";
    }
    window.scrollTo(0, targetDiv.scrollHeight);
}
</script>

<p style="background-color: coral; height: 400px;"></p>
<div style="background-color:grey; height: 147px;"></div>
<button href="#" onclick="switchSize()">Adjust div size</button>
<p style="background-color: olive; height: 3000px;"></p>

Answer 7

Answer №4

When a button is clicked, the page ensures that the active element stays in view. This may cause the extra height to appear as though it is moving up or down depending on the button's position relative to the screen.

To make it seem like the page did not scroll up after the element expanded, we can simply scroll the page back to its original position before the expansion occurred. This creates the illusion of the height expanding downwards.

1. Store the current page's top position

var pagePosBeforeExpand = window.pageYOffset;

2. Scroll the page back to its original position if the div has been expanded:

// If we are increasing the height, scroll to the previous top...
window.scrollTo({ top: pagePosBeforeExpand });

It's important to note that this approach does not impact collapsing the height again. However, you can modify it accordingly for such scenarios - for instance, by executing the scroll code outside of the 'if' statement.

Illustrative Example:

function toggle(ev) {
    // 1. Save the current position of the top of the page
    var pagePosBeforeExpand = window.pageYOffset;

    const div = document.querySelector("div");
    if (div.style.height === "336px") {
      div.style.height = "147px";
    } else {
        div.style.height = "336px";
        // 2. Scroll the page back to the position it was before we changed the height
        window.scrollTo({ top: pagePosBeforeExpand })
    }
}

body {max-width: 60em; margin: auto;}

<p style="background-color: coral; height: 400px;"></p>
<div style="background-color:grey; height: 147px;">Top of content</div>
<button href="#" onclick="toggle()">toggle div size</button>
<p style="background-color: olive; height: 3000px;"></p>

Answer 8

When a button is clicked, the page ensures that the active element stays in view. This may cause the extra height to appear as though it is moving up or down depending on the button's position relative to the screen.

To make it seem like the page did not scroll up after the element expanded, we can simply scroll the page back to its original position before the expansion occurred. This creates the illusion of the height expanding downwards.

1. Store the current page's top position

var pagePosBeforeExpand = window.pageYOffset;

2. Scroll the page back to its original position if the div has been expanded:

// If we are increasing the height, scroll to the previous top...
window.scrollTo({ top: pagePosBeforeExpand });

It's important to note that this approach does not impact collapsing the height again. However, you can modify it accordingly for such scenarios - for instance, by executing the scroll code outside of the 'if' statement.

Illustrative Example:

function toggle(ev) {
    // 1. Save the current position of the top of the page
    var pagePosBeforeExpand = window.pageYOffset;

    const div = document.querySelector("div");
    if (div.style.height === "336px") {
      div.style.height = "147px";
    } else {
        div.style.height = "336px";
        // 2. Scroll the page back to the position it was before we changed the height
        window.scrollTo({ top: pagePosBeforeExpand })
    }
}

body {max-width: 60em; margin: auto;}

<p style="background-color: coral; height: 400px;"></p>
<div style="background-color:grey; height: 147px;">Top of content</div>
<button href="#" onclick="toggle()">toggle div size</button>
<p style="background-color: olive; height: 3000px;"></p>

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Does the Parent Tag style override the child tag style when hovering?

"Uncovering the dangers of XMLHttpRequest: How automatic web-page refresh can lead

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

Issues with data retrieval from PHP file in AJAX submission

Creating a scrollable table with CSS: A step-by-step guide

JavaScript Object-Oriented Programming - Accessor method that retrieves a property from the parent

Swapping stylesheets using a hyperlink - a simple guide

Updating text color in JavaFX for a textarea

React: Issue with function not recognizing changes in global variable

Is it possible to dynamically change the background image using ReactJS?

What is the best method for integrating UL / LI into JSON to HTML conversion?

Utilizing inline javascript to dynamically update the selected option of a radio button

User disappears from Firebase after refreshing the page

"Integrating Laravel 5.4 Backend with Angular 5 Frontend: A Step-by-Step

Populate HTML form with return values using jQuery AJAX

Utilize INTERFACE-driven capabilities in ReactJS to dynamically render components based on a variable

Tips for transforming an Observable stream into an Observable Array

Accessing content from a text file and showcasing a designated line

It is not possible for ReactJS to disable a button that has been created dynamically

What is the process of using TypeScript to import a constant exported in JavaScript?