How to resize DIV to less than its initial width & height?


Tags: javascript,css,html,resize

Problem :

I want to give the user the ability to resize a DIV to less than its declared width and height. How to ?

Code here: http://jsfiddle.net/hW4nn/

HTML

<div class="divClass"></div>

CSS

.divClass {
    resize: both;
    overflow: auto;
    width: 200px;
    height: 200px;
    border: 1px dotted #000;
}


Solution :

Have a look at jQuery UI's Resizable.


    CSS Howto..

    grayscale - how to disable it automatically

    How to make resizable li elements with CSS only

    How to use bootstrap css tables to display data from MySQL tables?

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    Javascript/CSS slideshow: Using transparencies highlights flaws I don't know how to fix

    How do you override CSS applied by jQuery UI theme properly?

    How to move images in a grid box?

    JavaScript: How to clear my custom keyboard mappings and use the default ones

    How do I combine this 2 sets of coding together to form a mega drop down nav

    CSS + Bootstrap: How to dynamically stretch subdiv width to fit container (with image)?

    How I can add highlight effect on outside the area of selection with CSS?

    How to use javascript to trigger a css event for a collection of elements that have the same class/name

    how to do jquery once fade out has finished?

    How to index star rating in google?

    How to give the background-image path in CSS?

    how to get a rounded corner table with a body in different color with CSS?

    how to fix a display difference between chrome and firefox for css relative position?

    How to mix 100% height with a minimum height

    How to make the background of my text larger?

    How do I apply a CSS to a clutter stage?

    How to center a Dijit Select widget?

    How to add an existing class to td in css file?

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    how to set overflow: hidden; to one element

    How to filter elements on click in js?

    How can I solve this styling issues?

    How to hide overflow on slideshow without hiding arrows?

    css: how to make the third div line up with the first div

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    How can I truncate long texts in a table using CSS?