Possible to Style the CSS3 Resize Function

how to change the style of resizing?

There's no default way to do this in css. However jQuery UI offers a solution if you use their resizable function. The e and w stands for east and west.

divElement.resizable({
handles: 'e, w'
});​

Here's a working fiddle: http://jsfiddle.net/nick_craver/bx2mk/

Is it possible to use the `resize` CSS property on the HTML `body` element?

You need to set overflow to html to disable the overflow propagation:

body {
/* Preparation of the example design */
padding-left: 20px;
padding-right: 20px;
max-width: 90vw;

/* Resize Properties */
resize: both;
overflow: hidden; /* this depends on what you want to experiment with */
border: 1px solid green;
}

html {
overflow: auto; /* anything different from visible */
}
<html>
<body>
<p>This is a very long text
al;djf;alskdjf;laskdjf;asldkjf;alsdkjfl;asdjf;lasdkjf;lasdjf;lasjdfl;asjdl;fajsdl;fja;ldfjl;jadf</p>
</body>
</html>

Textarea: Apply a style on resize

Without using any other library, creating own resize event for textarea could be done like this:

DEMO jsFiddle

$('textarea').on({
mousedown: function(){
$(this).data('size', $(this).width + '*' + $(this).height());
},
mouseup: function(){
if($(this).data('size') != $(this).width + '*' + $(this).height())
$(this).triggerHandler('resize');
},
resize: function(){
console.log('textarea resized!');
}
});

Resize by fixed value using CSS

That's a good point , So It's possible using the css-element-queries Library ,
All you have is creating a ResizeSensor() for your table and then make calculation to set both height and width range change :

See below Snippet :

var width = $('.elementTable').width();

var height = $('.elementTable').height();

var changePX = 50;

new ResizeSensor(jQuery('.elementTable'), function(){

//width calcuation

if(Math.abs($('.elementTable').width()-width) > changePX) {

$('.elementTable').width() > width ? width +=changePX : width -=changePX;

}

$('.elementTable').width(width);



//height calcuation

if(Math.abs($('.elementTable').height()-height) > changePX) {

$('.elementTable').height() > height ? height +=changePX : height -=changePX;

}

$('.elementTable').height(height);



})
.foo {

resize: both;

min-width: 250px;

width: auto;

text-align: center;

min-height: 30px;

border: 1px solid #515151;

border-radius: 6px;

position: absolute;

padding: 0;

overflow: hidden;

text-shadow: 1px 1px 1px rgba(0,0,0,0.33);

box-shadow: 5px 5px rgba(0,0,0, 0.1);

}

.thClass {

margin-left: -3px;

text-align: center;

box-shadow: 0 2px 2px rgba(0,0,0,0.26);

-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);

-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);

margin-top: -2px;

min-height: 30px;

line-height: 30px;

font-size: 19px;

cursor: move;

}

.header{

margin-left: 17px;

}

.tableBody {

display: block;

min-height: 25px;

text-align: center;

width: 102%;

margin-left: -2px;

cursor: default;

}

.foo tbody tr td {

display: block;

line-height: 25px;

text-align: center;

border-bottom: 1px solid rgba(0,0,0,0.2);

}

#displaySizes {

list-style: none;

padding: 0;

margin-top: 0;

}

.disp tbody tr th {

border: 1px solid black;

}

.disp tbody tr td {

display: table-cell;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script>

<table class="foo disp elementTable">

<tr class="tableHeader">

<th class="thClass" colspan="5">

<span class="header">Device</span>

</th>

</tr>

<tr>

<td rowspan="4" id="sizeContainer">

<ul id="displaySizes">

<li>4:3</li>

<li>16:9</li>

<li>Clock</li>

</ul>

</td>

<td>$100</td>

<td>February</td>

<td>February</td>

<td>February</td>

</tr>

<tr>

<td>February</td>

<td>February</td>

<td>February</td>

<td>February</td>

</tr>

<tr>

<td>February</td>

<td>February</td>

<td>February</td>

<td>February</td>

</tr>

<tr>

<td>February</td>

<td>February</td>

<td>February</td>

<td>February</td>

</tr>

</table>

Is there a way to change the CSS resize corner's position?

Here's one starting point. I essentially created a custom resize icon in the upper right corner. I then used 'mousedown', 'mousemove' and 'mouseup' events to track resizing activity. You might be able to do something similar using 'drag' and related events.

Note the 'mousedown' is on the resize icon, while 'mousemove' and 'mouseup' are on the document body (or some other larger element behind the resizable div).

I've hard-coded the width and height in the JavaScript for the sake of simplicity. That means those values exist in two different places which is not good. You should probably put them only in JavaScript or only in CSS, not in both as I have done.

I needed to put the resizable div into a container that filled the body. Otherwise 'mousemove' events outside of the resizable div were not registered. This might not be an issue if you already have other content "behind" your absolutely positioned resizable element.

For your information: I also initially tried using the native resize functionality. I used transform: rotate(-90deg) to move the resize corner to the upper right, then put in an inner div with transform: rotate(90deg) to make the inside content the right-way-up again. However, while this put the resize corner in the correct place, the resizing itself was completely messed up, as the mouse movements and the actually resizing itself were off by 90 degrees. It's a little hard to describe in words, but suffice it to say that, without some major re-working (or perhaps some brilliant code or hidden function) I couldn't get that strategy to work.

var

doc = document,

ht = 400,

wd = 400,

main = document.querySelector("#resizable"),

x, y, dx, dy;

var startResize = function(evt) {

x = evt.screenX;

y = evt.screenY;

};

var resize = function(evt) {

dx = evt.screenX - x;

dy = evt.screenY - y;

x = evt.screenX;

y = evt.screenY;

wd += dx;

ht -= dy;

main.style.width = wd + "px";

main.style.height = ht + "px";

};

rsz.addEventListener("mousedown", function(evt) {

startResize(evt);

doc.body.addEventListener("mousemove", resize);

doc.body.addEventListener("mouseup", function() {

doc.body.removeEventListener("mousemove", resize);

});

});
#container {

position: absolute;

border: solid red 1px;

margin: 0;

height: 100%;

width: 100%;

}

#resizable {

display: block;

font-size: 9pt;

position: absolute;

bottom: 50px;

left: 20px;

padding: 10px;

min-height: 0;

min-width: 0;

border: solid 1px black;

width: 400px;

height: 400px;

overflow-x: auto;

overflow-y: hidden;

}

#rsz {

position: absolute;

right: 0;

top: 0;

width: 20px;

height: 20px;

background-color: rgba(255, 0, 0, 0.5);

}

#original {}
<div id="container">

<div id="resizable">

<div id="rsz"></div>

(some content)

</div>

</div>


Related Topics



Leave a reply



Submit