CODEWITHSUNDEEP
jquerycss
Kleber Mota
Kleber Mota

Reputation: 9065

function .resizable() of jquery don't work

In my project, I have in the initial page this piece of code:

html

<div id="box">
    <div id="header"> <span id="title"></span> <span id="button">X</span> </div>
    <div id="text"> </div>
</div>

css

#box {
    border-style: solid;
    box-shadow: 2px 2px 2px black;
    max-width: 66%;
    max-height: 80%;
}

#button {
    background-color: #99CCFF;
    min-width: 32px;
    max-width: 5%;
    min-height: 32px;
    max-height: 100%;
    position:absolute;
    right:0px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
}

#header {
    background-color: #66B2FF; 
}

#title {
    text-decoration-color: #FFFFFF;
    font: 28px arial;
}

#text {
    background-color: #E0E0E0;
    text-decoration-color: #000000;
    font: 24px sans-serif;
    overflow: scroll;
}

I define this element as draggable and resizable using the respectives functions from jquery. The Drag behaviour are working perfectly, but the Resize don't.

This is the jquery code to adjust this:

$('document').ready(function(){
    $('#box').draggable({
        cointainment: "#container"
    });

    $('#box').resizable({
        cointainment: "#container"
    });

    $('#box').hide();

    $('#button').click(function(){
        $('#box').hide();
    });

    $('a').click(function(e){
        if($(this).attr('href') != 'logout.html') {
            e.preventDefault();
            $.get($(this).attr('href'), function(data){
                var $temp  = $('<div/>', {html:data});
                $('#title').text($temp.find('title').text());
                $('#text').html($temp.remove('head').html());
                $('#box').show();
            });
        }
    });
});

Someone can see any error in the code?

ps.: Also, I have one question in relation to css display above. how you can see, I define both max-width and max-height; it happens that the max-height attribute aren't working. Someone can see what's wrong with it?

Upvotes: 1

Views: 76

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

The resizable functionality is technically there in your code. However, you need to style the .ui-resizable-handle so that it shows up. If you're not able to click and hold down on the handle, then you won't be able to resize it.

So for example I just added this

.ui-resizable-handle {
    width: 20px;
    height: 20px;
    background: red;
}

and now you can resize it.

View DEMO

Also, there are many more options with the resizable widget which you can learn about on this page

Also, there are demo's of some of the different options that you can view here

Upvotes: 1

Related Questions