We Keep Coding

How can I change the blotter canvas size?

For some reason the blotter.js canvas size is not cangable. Blotter seems to generate a canvas named b-canvas by default? But I can't find where it gets it width and height from? And I am not able to set a new width and size by .style in js. Help?!
I've tried all the techniques I could find.
I've also tried to set a Overflow: visible to the parent (Text) in js and in the css file, but the render is still crashing with the bounds of the canvas. What am I doing wrong?
var text = new Blotter.Text("Hello", {
weight: 800,
size: 80,
fill: 'lightgray',
paddingLeft: 80,
paddingRight: 80,
paddingBottom: 80,
paddingTop: 80
});
/*
* https://blotter.js.org
*/
var blotter = new Blotter(material, {
texts: text
});
var canvas = blotter.forText(text).domElement;
canvas.style.visibility = 'visible!important';
canvas.style = "width: 100vh !important";
canvas.style = "height: 100vw !important";
canvas.style = "z-index: -3 !important";
container.appendChild(canvas);

You can simply wrap it inside a div and resize that. The canvas size is probably calculated based on the font-size and it is as big as the drawing itself.
<div id="wrap">
<canvas></canvas>
</div>
<style>
#wrap canvas {
width: 50px !important
}
</style>
Take a look at the "Blotter.js" website itself and inspect its logo, see that it has this same code and how you can resize it.

Fit container inside element with table layout

I need to fit a container inside a table cell. Currently, I am unable to do so, and the container only shows when I manually set its height.
Here it is a fiddle showing the issue.
https://fiddle.sencha.com/#fiddle/13ug
If I set the container height to (say, 300), the container is displayed. However, I would like the container to automatically fit the colspan/rowspan and resize according to the table.
Could I please get some help? Thanks!

This will auto size the container to fill 100% of the cell height - even if the cell height increases.
initComponent: function() {
var me = this;
var tester2 = Ext.create("Ext.container.Container");
Ext.apply(tester2, {
height: "100%",
layout: "fit",
style:"background-color: red",
colspan: 5,
rowspan: 2,
});

Getting the width after resizing end using jQuery resizable

When I resize a width of div using jQuery resizable, not getting the correct width.
Resizing width from 250px to 200px getting width in jQuery is 250px. But background color position is 200px. Again I resize from 200px to 150px getting value is 200px. Why I have getting starting width position. Please help me to get ending width position.
Please check my code and attached image below and correct me?
https://jsfiddle.net/duL8gu3b/17/
CSS
#profile #graph #bar1 #bar1_slider {
background: #1640c0;
width: 250px;
}
JS
$( "#graph .slider" ).resizable({
animateEasing: "easeOutBounce",
helper: "ui-resizable-helper",
animate: true,
handles: 'w',
maxWidth: 250,
grid: [ 50, 10 ] ,
stop: function( event, ui ) {
/*graph = ui["size"]["width"] / 50;
alert(graph);*/
var graph1 = $("#bar1_slider").width() / 50;
$.post("/graph", { graph1: graph1},
function (response) {
});
}
});

The problem is animation. Jquery returns width value before finishing animation so the width of element has not changed. You can return value after 1 second delay. Check this
animateDuration: 0

jQuery UI-Resizable Adding an Unwanted Margin

jQuery UI "resizable" adds a 10 pixel handle to the right and bottom of an element. See example here: http://jsfiddle.net/Thaikhan/fGJ59/10/show/
If you click on Pikachu, then try to drag him into the bottom right corner, he doesn't fit flush because of the handle margin.
I want the images to be able to fit flush against the border. I've tried to disable the handle but have been unable to retain resizability while removing the border.
If this isn't possible, perhaps there's a way to add 10px to the right and bottom margin of the container and have the elements go through the border?
Thanks for your help!
Here is the relevant jQuery:
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
autoHide: true,
// containment: "parent",
minHeight: 50,
minWidth: 50,
maxHeight: 300,
maxWidth: 400
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});

Because you're working with the images directly resizable is wrapping them in a div and adding space for the handle. If you wrap the images in a div yourself, set resizable on the div and set the image to also resize you can get the desired effect. The handle will hover over the image and the image will be flush to the side.
The changes:
.frame img {
position: relative;
height : 50px;
width: 50px;
}
You need to get rid of the top and left positioning, they don't seem to be doing anything and they mess things up when you wrap the image in a div.
$('.inventory').on('click', 'img', function () {
$(this).wrap('<div style="height:50px;width:50px;"></div>');
$(this).parent().resizable({
aspectRatio: 1,
alsoResize:this,
autoHide: true,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});
Wrap the image in a div when it's added to the frame.
$('.frame').on('dblclick', '.ui-draggable', function () {
$(this).find('img').appendTo(".inventory").attr('style', '');
$(this).draggable("destroy");
$(this).resizable("destroy");
$(this).remove();
refreshIndexList();
zindex();
});
And then break the image out of the div when you put it back.
http://jsfiddle.net/fGJ59/13/

How do I apply the same effect that "background-size: cover" does, on a <img>

I need a <img> to have the smallest possible size without leaving any blank spaces inside a div and it needs to be centralized horizontally and vertically. The size of the image is variable.
So here is an example so you can understand it better:
http://jsfiddle.net/q2c9D/
More info: much like Mikel Ward did, I need the images to fill up the div, so that the background of it is not visible. I made the div background black so it was easier to tell that it is not filling up the div. But I need the images to be centered and to be the smallest size possible without being distorted while filling up the div.

Here is my go
I would set the width to 100%, and remove the height property altogether. This will prevent the image from being distorted
img{
width: 100%;
}
To center the element, I would use this plugin. It makes you do no work, other than to call the function
$("img").center()

Try adding min-width: 100% to the img. Here's an example. It may stretch the picture a little but at the size it is, may not be too noticeable. :)

This will center the image on the page:
img{
margin: 0 auto;
position: relative;
display: block;
}
Just wrap the images in a <div> to position them somewhere on the page.

The way i do it is set the width or height, but only 1 as 100%.
<img width="100%" src=""/>

So I was able to get it working the way I wanted using jQuery. With the following code:
function centerimg(){
$('img').each(function(){
var imgwidth = $(this).width();
var imgheight = $(this).height();
if (imgwidth > imgheight) {
$(this).css({
"height": "100%",
"width": "auto"
});
imgwidth = $(this).width();
$(this).css("margin-left", -.5 * imgwidth + 50 + "px");
} else if (imgheight > imgwidth) {
$(this).css({
"width": "100%",
"height": "auto"
});
imgheight = $(this).height();
$(this).css("margin-top", -.5 * imgheight + 50 + "px");
} else {
$(this).css({
"height": "100%",
"width": "100%"
})
}
})
};
window.onload = centerimg;<code>
The code gets the width and height of the image, so if the image is wider or taller it will properly set the smaller dimension to 100% and the larger one to auto. After that it gets the value of that last one again (since it was re sized with auto) and centers it. Also, if the image is a square it just sets both to 100%.
This way the image will ALWAYS fill up the div and be centered.
Thanks all. Hope this code helps others.