Instructions on creating a vertical height adjustment handle for a website

Question

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/

This is the HTML code:

<div class="column">
  <div class="top">
      test
  </div>

    <div class="slider"></div>

  <div class="bot">
      test
  </div>
</div>

Here is the corresponding CSS:

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
}

.column {
    width: 100%;
    height: 100%;
    border: solid #000;
}

.top {
    width: 100%;
    height: 50%;
    background-color: #989898;
}

.bot {
    width: 100%;
    height: 50%;
    background-color: #686868;
}

.slider {
    width: 100%;
    height: 10px;
    background-color: #000;
}

Any suggestions on how I can enable the "slider" div to adjust the heights of the "top" and "bot" divs by dragging it? I also want to ensure that the "column" div maintains the full height of the browser window.

Thank you

javascript jquery html css

Answer 1

Answer №1

To modify the height of the top and bottom divs using jQuery, you can utilize the mousemove event. Below is the jQuery code snippet that accomplishes this:

$(document).ready(function(){
  $('.slider').on('mousedown',function(e){
    $('.column').on('mousemove',function(e){
        diff = $('.slider').offset().top + 5 - e.pageY ;
        $('.top').height($('.top').height()-diff);
        $('.bot').height($('.bot').height()+diff);
    });
  });
  $('.column').on('mouseup',function(){
      $('.column').off('mousemove');
  });
});

Explore the code on jsfiddle here: http://jsfiddle.net/ndud4ff7/

Answer 2

To modify the height of the top and bottom divs using jQuery, you can utilize the mousemove event. Below is the jQuery code snippet that accomplishes this:

$(document).ready(function(){
  $('.slider').on('mousedown',function(e){
    $('.column').on('mousemove',function(e){
        diff = $('.slider').offset().top + 5 - e.pageY ;
        $('.top').height($('.top').height()-diff);
        $('.bot').height($('.bot').height()+diff);
    });
  });
  $('.column').on('mouseup',function(){
      $('.column').off('mousemove');
  });
});

Explore the code on jsfiddle here: http://jsfiddle.net/ndud4ff7/

Instructions on creating a vertical height adjustment handle for a website

Answer №1

Similar questions

Sliding Toggle: Panel Revealed with Button Slide

I'm curious if there is an eslint rule specifically designed to identify and flag any unnecessary spaces between a block comment and the function or

Choose a Vue filter according to the variable selected

How should attributes be passed to the li element properly?

Creating Stunning CSS Animations for a Slider Using SVG

Error encountered: Function _ctx.showEditModal is not defined in Vue 3 + Laravel Project

Instructions for transforming DOM information into a JSON format

Why isn't this setState function activating?

What is the reason for using a callback as a condition in the ternary operator for the Material UI Dialog component?

inconsistent firing of mousedown events

Trouble with setInterval not refreshing the HTML element

Creating .ipa Files with React Native

Retrieve the most recent item inside a div using JQuery

Steps to animate a div expanding to fit its content dimensions

Vue router beforeRouteEnter - when the page is refreshed, the button label vanishes

Best practices for integrating Vuex with Vuelidation

optimal application of css with jquery

Achieve Efficient Data Input in Django with JQuery Ajax for Multiple Forms

When is the best time to assign properties to mobx domain objects?

The extent of the modal window (AngularJS directive)