What is the best way to enable a DOM element's height to be resized?

Question

What is the best way to enable a DOM element's height to be resized?

I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the top property to adjust so that the widget can expand up to the maximum height defined by its CSS.

While jQueryUI offers a resizable behavior, I am unable to use it for this particular project. However, we do have jQuery at our disposal. Are there any examples or suggestions for achieving this functionality without jQueryUI? Any tips, ideas, or JSFiddle demos would be greatly appreciated to help me get started in the right direction. I explored CSS3 resizable options, but they only show the standard resizing icon in the bottom right corner, similar to a textarea.

javascript html css resizable jquery-resizable

Answer 1

Answer №1

Have you considered trying out this particular plugin for the task at hand?

Answer 2

Have you considered trying out this particular plugin for the task at hand?

Answer 3

Answer №2

If you're looking to achieve this using only jQuery, one possible approach could be like the following:

<div id="custom-block">
    <h3 id="block-header">Custom Header</h3>
    Insert your content here
</div>

<script type="text/javascript">
    var startPos = 0;
    var position = null;
    var resizeInitiated = false;

    $(function () {
        $("#block-header")
            .mousedown(function (event) {
                startPos = event.pageY;
                position = $("#custom-block").offset();
                resizeInitiated = true;
            })
            .mousemove(function (event) {
                if (resizeInitiated) {

                    // calculate changes in Y position
                    var diffY = event.pageY - startPos;
                    position.top += diffY;

                    // animate the adjustments
                    $("#custom-block").offset({ top: position.top, left: position.left });
                    $("#custom-block").height($("#custom-block").height() - diffY);

                    // update new positions
                    startPos = event.pageY;
                }
            })
            .mouseup(function (event) { resizeInitiated = false; })
            .mouseout(function(event) { resizeInitiated = false; });
    });

</script>

Answer 4

If you're looking to achieve this using only jQuery, one possible approach could be like the following:

<div id="custom-block">
    <h3 id="block-header">Custom Header</h3>
    Insert your content here
</div>

<script type="text/javascript">
    var startPos = 0;
    var position = null;
    var resizeInitiated = false;

    $(function () {
        $("#block-header")
            .mousedown(function (event) {
                startPos = event.pageY;
                position = $("#custom-block").offset();
                resizeInitiated = true;
            })
            .mousemove(function (event) {
                if (resizeInitiated) {

                    // calculate changes in Y position
                    var diffY = event.pageY - startPos;
                    position.top += diffY;

                    // animate the adjustments
                    $("#custom-block").offset({ top: position.top, left: position.left });
                    $("#custom-block").height($("#custom-block").height() - diffY);

                    // update new positions
                    startPos = event.pageY;
                }
            })
            .mouseup(function (event) { resizeInitiated = false; })
            .mouseout(function(event) { resizeInitiated = false; });
    });

</script>

What is the best way to enable a DOM element's height to be resized?

Answer №1

Answer №2

Similar questions

Tips for creating a unique custom rounded underline effect in an Angular Material Tab

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

ways to validate the calling function in jquery

Is it possible to receive both errors and warnings for the same ESLint rule?

Display a DIV next to the mouse cursor when a span is hovered over

The POST response I received was garbled and corrupted

Generate menu options in real-time

Update the appearance of an element in real-time using VUEJS

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

Express always correlates the HTTP path with the most recently configured route

Harnessing the Power of JSON in Rails to Enhance Your jQuery UI Autocomplete Form

Tips on personalizing the default html template in nuxt

The npm outdated command seems to ignore the caret notation specified in the package.json file

Adjust slider value dynamically with jQuery

Ways to extract single JSON entities from a consolidated JSON structure

Disregarding TypeScript import errors within a monorepo ecosystem

Tips on showcasing jQuery autocomplete suggestions on different fields?

The connection of <p:ajax> to a parent component that is not a ClientBehaviorHolder is not possible

Display the input text line by line

Add to the end just before the final element when generating dynamically