How can I make a div resizable

Question

I have a div that I would like to be able to resize from the top of it and increase/decrease its height. I have found a ton of ways on the internet that people are using to do this, but for some reason, nothing works for mine. I can get the double headed arrow to show up, but no part of my div or it's children will move. Here are some things I have tried:

$('#header').mousedown(function(){
    $('#container').resizable({
        handles: 'n, s'     
    });         
});

I have also used this:

$container-results.resizable({ handles: 'n, e, s, w, ne, se, sw, nw' });

and this

$("#container").resizable({ handles: 'n' });
var handles = $("#container").resizable("option", "handles");
$("#container").resizable("option", "handles", 'n')

and in CSS I tried

resize: vertical

and a couple of other ways, but nothing will make it resize! Help would be appreciated.

here is a simple jsfiddle example: http://jsfiddle.net/TCHdevlp/zpD2R/

I found jsfiddles that both have resizable containers at the bottom of the page as well.

http://jsfiddle.net/J4bJ3/1/

http://jsfiddle.net/Zns4Q/

this may help explain what I am looking for.

It's nearly impossible to make a relative div resize from the top/left, as that is the origin point. If you change the div to `position: absolute` it will work, but will take it out of the document flow and may screw up your layout. — Rory McCrossan, Oct 31 '13 at 15:15
@RoryMcCrossan, Jsfiddle itself has the functionality I want, if you look at http://jsfiddle.net/ the middle horizontal lines can be pulled up and down. This is what I want. position: absolute would mess things up though... — user2847749, Oct 31 '13 at 15:18
@user2847749 that's because the `div#panel_html` (and the other 3) are `position: absolute` as I mentioned. — Rory McCrossan, Oct 31 '13 at 15:20
@Paulie_D, I had tried that way as well, but it did not work :( — user2847749, Oct 31 '13 at 15:21
I don't see the problem : http://jsfiddle.net/TCHdevlp/zpD2R/ — TCHdvlp, Oct 31 '13 at 15:21
@TCHdvlp, that's what I'm having trouble understanding. I have found these methods online and it all works in jsfiddle, but not on my page. My div includes a datatables from Twitter Bootstrap, I am not sure if that is what is messing it up. — user2847749, Oct 31 '13 at 15:24

score 0 · Answer 1 · answered Oct 31 '13 at 16:07

0

I've made a little jQuery demo for you. It might not be perfect, but it does the job. Is this something you're looking for?

$(document).ready(function(){
    // Create variable to see if mouse is down
    var clicking = false;

    $(document).mousedown(function(){
        clicking = true;
    });

    $(document).mouseup(function(){
        clicking = false;
    })

    // Function on mousemove
    $(document).bind('mousemove', function(event){
        // Check if the mouse is within a 20px radius of the bottom of the div, and whether the mouse is down
        if(event.pageY < (($('.resizable').offset().top + $('.resizable').height()) + 10) && event.pageY > (($('.resizable').offset().top + $('.resizable').height()) - 10) && clicking){
            // If it is, then drag div in height along with the mouse
            $('.resizable').height(event.pageY - $('.resizable').offset().top);
        }
    });
});

I hope this is clear. If not, I'll edit and explain more.

And you can also just see the fiddle

answered Oct 31 '13 at 16:07

Sander Koedood

6,007
6
25
34

thank you so much for your reply!! For the div I need to resize, it has a div with a header, a div with a title, and a div container that contains a twitter bootstrap datatable. I used the code you gave me and replaced the "document" with the header, and it did not work. Right now the entire div will hide and show on the page, but it's still not resizing properly. It's at the bottom of the page, so I would want it to move up and down. – user2847749 Oct 31 '13 at 16:27
Try to change only ".resizable" and not "document". Document is the webpage. (Nearly) everything directed at document is to capture actions done by the user. So change '.resizable' to the div class or id name in question. – Sander Koedood Oct 31 '13 at 16:30
ok, I tried that and all that happens is that a white color (from behind all the divs I'm guessing) will go up and down and cover the div, but it doesn't move the div itself or anything on it. I have no idea why nothing is working for me.. – user2847749 Oct 31 '13 at 16:47

score 0 · Accepted Answer · answered Jul 17 '14 at 20:16

I ended up not being able to have a dynamic resizing and chose to resize to full screen, mid screen, and minimize. See the following code:

JAVASCRIPT

//attach hide show functionality to results
        $search_results.click(function() {
                if($('#hide-info').children().first().hasClass('icon-resize-full')){
                    $('#hide-info').children().first().removeClass('icon-resize-full').addClass('icon-resize-small');
                    $('#hide-info').attr('title', 'Hide train info');
                    $('#search-results-container').attr('style', 'bottom: 330px');
                    $('#table-container').height('330px');
                }
                $(this).toggleClass('visible');
                adjustSections();
                setTaskListHeight();

        });




function showInfo(){
            if($('#views').hasClass('minimized')){
                $("#hide-info").show();
                $("#views").removeClass("minimized").addClass("visible");
                $('#search-results-container').attr('style', 'bottom: 30px');
                infoState = 'vis';
            }
            else if($('#views').hasClass('visible')){
                $("#show-info").hide();
                findRule('#views.visible').style.height='100%';
                $('#table-container').css('height','100%');
                $('#train-tab-content').css('height',
                        $('#table-container').height()-$('#train-tab-content').offset().top
                );
                $('#summary-tab-container').css('height',
                        $('#table-container').height()-$('#train-tab-content').offset().top
                );
                $('#search-results-container').attr('style', 'bottom: 30px');
            }
            adjustSections();
            google.maps.event.trigger(map, 'resize');
            schedule.resizeTable();
        }

        function hideInfo(){
            if(findRule('#views.visible').style.height == '330px'){
                $("#hide-info").hide();
                $("#show-info").show();
                $("#views").attr("class", "").addClass("minimized");
                findRule('#views.visible').style.height='';
                $('#search-results-container').attr('style', 'bottom: 330px');
            }else{
                $("#show-info").show();
                findRule('#views.visible').style.height='330px';
                $('#table-container').css('height');
                $('#tab-content').css('height','220px');
                $('#summary-tab-container').css('height','220px');
            }
            setTaskListHeight();
            adjustSections();
            google.maps.event.trigger(map, 'resize');
            schedule.resizeTable();
        }

How can I make a div resizable

2 Answers2