CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Filtered
Filtered

Reputation: 75

jquery element draggable but not resizable

Thank you for taking the time for reading my question.

So I'm new to using jQuery and I was trying to make a div that I can drag and resize. So I followed the steps on the jQuery website. The problem was, the div was only draggable. I thought that it might be because I combined two functions. I then just tried to make it resizable but it still didn't work. So I discard the code followed a youtube video and still, the div was only draggable and not resizable. If I had to guess, the problem is not due to the javascript but the HTML or CSS.

Here is the HTML:

<div id="htmlWrap">
    <div id="html" class="ui-widget-content">
        <div id="aheadWrap">
            <h2>Title</h2>
            <div id="htsub">Interesting subtitle</div>
            <div id="htlogoWrap"><img id="htlogo" src="https://cdn.pixabay.com/photo/2017/01/14/22/49/bison-1980589_960_720.png"></div>
        </div>
    </div>
</div>

Here is the CSS

#html{
    width: 80%;
    position: absolute;
    top: 10px;
    left: 10px;
    border: 2px solid red;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    height: 80%;
    margin: 4px;
}

#htmlWrap{
    border: 5px solid black;
    position: absolute;
    top: 150px;
    margin-left: 340px;
    width: calc(100% - 360px);
    height: calc(100% - 180px);
    overflow-y: scroll;
    overflow-x: hidden;
}

here is the javascript

    $("#html").draggable({cursor:"move", containment: "#htmlWrap"});
    $("#html").resizable({handles: "n,s,e,w"});
});

and if the links I used would be helpful

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

I don't have the first clue why this is not working as I followed the instructions as closely as I could and tried to debug it for a long time. Knowing me I probably made a simple mistake but again, I think that the styling that I applied to it might play a role in the underlying problem.

And again thank you for reading my question!

Upvotes: 2

Views: 139

Answers (1)

Murali Nepalli
Murali Nepalli

Reputation: 1618

You were missing the jquery-ui "css" file, So include that in your html file. https://jsfiddle.net/sdebxwm0/5/

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css""/>


$("#html").draggable({cursor:"move", containment: "#htmlWrap"});  
  $("#html").resizable();
#html{
    width: 50%;
    position: absolute;   
    border: 2px solid red;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    height: 40%;
    margin: 4px;
}

#htmlWrap{
    border: 5px solid black;
    position: absolute;
    top: 10px;
    margin-left: 10px;
    width: calc(100% - 360px);
    height: calc(100% - 180px);
    overflow-y: scroll;
    overflow-x: hidden;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css""/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <div id="htmlWrap">
    <div id="html" class="ui-widget-content">
        <div id="aheadWrap">
            <h2>Title</h2>
            <div id="htsub">Interesting subtitle</div>
            <div id="htlogoWrap"><img id="htlogo" src="https://cdn.pixabay.com/photo/2017/01/14/22/49/bison-1980589_960_720.png"></div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions