Increase two divs height on mouse move

Question

I horizontally split a page of the browser with two divs, and I want to increase the height of a div and reduce it in the other using the mouse position on the y axis. It would enlarge the first div when I'm in the upper part of the page and enlarge the second one when I'm at the bottom, but keeping both divs sum height equal to the height of the page.

This is my code

<html><head>
<meta charset="UTF-8">
<style>
*{
    margin: 0 auto;
}
#container{
    height: 100vh
}
#alto{
    width: 100vw;
    height: 50vh;
    background-color: mediumpurple;
}
#basso{
    width: 100vw;
    height: 50vh;
    background-color: royalblue;
}
</style>
</head>
<body>
<div id="alto" onMousemove="myFunction()" ></div>
<div id="basso" ></div>
<script>
function myFunction() {
    var y = event.clientY + "px";
    document.getElementById("basso").style.height =  y ;
    }
</script>
</body>
</html>

`onmouseover` increase height, `onmouseout` restore height. You can achieve this by manipulating the style as in your example, but should get use separate CSS styles instead. — Timir, May 08 '18 at 16:28

BeeBee8 · Accepted Answer · 2018-05-13T16:58:51.037

4

Take a look at this.

var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");

document.onmousemove = function(event) {
  
  section1.style.height = event.clientY + 'px';
  section2.style.height = "calc(100% - "+ event.clientY + 'px';
  
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  background: gray;
  height: 100vh;
}

#section1, #section2{
  height: 50%;
  transition: all 0.1s;
}

#section1{
  background: hotpink;
}
#section2{
  background: pink;
}

<div class="container">
  <div id="section1"></div>
  <div id="section2"></div>
</div>

edited May 13 '18 at 16:58

answered May 08 '18 at 17:01

BeeBee8

2,944
1
27
39

My aim is to change the height in relation to the position of the mouse using event.clientY as a parameter – mattia May 09 '18 at 09:34
@mattia updated answer now, it requires even less code than before. – BeeBee8 May 13 '18 at 09:27
Wow great, thank you ... except it should be the opposite, when I'm on a div it should increase its height – mattia May 13 '18 at 10:40
@mattia i don't understand what do you mean ? Height should only increase and never decrease? Cant you now do required modifications yourself? And mark it as an answer as I have shown you what you asked in the question. Please remember that SO is not a coding service. – BeeBee8 May 13 '18 at 11:32
When I'm over a div the height should be something like 50vh + event.clientY – mattia May 13 '18 at 11:35
@mittia You can easily make that change, but I don't think you mean to use `vh` , instead `px` , anyways you can play around to achieve required effect, all the best. – BeeBee8 May 13 '18 at 11:39
1

I think you need `function(event)` rather than simply `function()` - otherwise it's not working in Firefox. – Rounin May 13 '18 at 16:49
1

@Rounin Yes indeed, I did not test it on firefox, I had that in my mind at some point that how did it worked without event, but as it was working in Chrome, I did not bother to investigate further. thanks. – BeeBee8 May 13 '18 at 17:01

score 0 · Answer 2 · answered May 13 '18 at 09:43

You can achieve a simpler version of this effect (ie. without constantly changing heights relative to the mouse position) with CSS alone.

Working Example:

body {
margin: 0;
padding: 0;
}

div {
width: 100vw;
height: 50vh;
margin: 0 auto;
transition: height 0.3s linear;
}

div:hover {
height: 80vh;
}

body:not(:hover) div {
height: 50vh;
}

div:not(:hover) {
height: 20vh;
}

.alto {
background-color: mediumpurple;
}

.basso {
background-color: royalblue;
}

<div class="alto"></div>
<div class="basso" ></div>

This is how I had offered previously, but OP doesn't want that, then I updated my answer. — BeeBee8, May 13 '18 at 11:35

Increase two divs height on mouse move

2 Answers2