Develop Reference

ExtJS: How to get the width of a button before it's added?

Is there a way to get the width of button before its added to the panel in a situation such as follows:
var myButton = Ext.widget('button', {
text : 'Hello'
});
myButton.getWidth(); //This is undefined
panel.add(myButton);
I know that since the button is't rendered on screen and I haven't explicitly given it a width, there is no way to know the width at this time. But is there an event or something else just before the button is rendered that will let me know its width before it's displayed on screen ?

Simply you can't, if you have a look to the button source code his dimensions are setted on his render.
You shouldn't work with the button width, instead you should use other layouts.
Probably there is a way, but it seems crazy:
var myButton = Ext.widget('button', {
text : 'Hello'
}),
clone=Ext.clone(myButton);
panel.add(clone);
clone.getWidth();//This is width
clone.destroy();
panel.add(myButton);
Like you can see the problem is on creating and adding it to only get his width.
It has probably no sense, but if you need to do something else change the question with something more clear. And surely we can get an answer to your problem.

Using the height() method in jquery

I am new to jquery and am currently trying to set a variable equal to the height of some div with id="thing" before animating another div with class=".init_leftbar" by the same quantity.
var iHeight = $("#thing").height();
$(".init_leftbar").animate({top: iHeight + "px"});
However, this does not seem to be working.
if I just set "iHeight" equal to some number it will animate however.
I figured there has been some misunderstanding on my part as to how the "height()" method works.
Any help is greatly appreciated.

I would try to print $("#thing").height() in the browser console with
console.log($("#thing").height());
to see what is returning from the div.
I also noticed that .height() has some problems with absolute positioned divs given a display:block; style.

As documented in the Jquery API:
http://api.jquery.com/height/
// Returns height of browser viewport
$( window ).height();
// Returns height of HTML document
$( document ).height();

Consider running the script on document ready, allowing everything else to load first.
Also, you might get better mileage with outerheight(), which accounts for everything which can make up the height, including padding.

What about replacing:
$("#thing").height();
with:
$('#thing').css("height");
Be aware that css() returns string as "100px" and not 100 as height()
so you need to delete the '+ "px"' suffix.

Set/Get style height in javascript

I try
console.log(document.getElementById('content').style.height);
prints nothing, just an empty line in console.
console.log(document.getElementById('content').clientHeight);
prints the height.
document.getElementById('content').style.height = '50px';
has no effect. I am in lastest chrome browser. I want to be able to read and set height, however set does not work. I want to use vanilla js. Any ideas?

Demo:http://jsfiddle.net/YTmNz/
JS:
function ChangeHeight(){
var e1 = document.getElementById("content");
e1.style.height = "400px";
}
setTimeout(ChangeHeight, 2000);
Unfortunately you cannot retrieve height with .style.heightunless you have already set that property before.
You can use jQuery to retrieve .height()

This is just a guess, but depending on what element content is you may also need to add display:block; to allow it to be given a height.

try to use
document.getElementById('content').offsetHeight
document.getElementById('content').offsetWidth
it will give the height/width of element;

Use plain javascript rather then Jquery

I am attempting to code the game breakout in javascript. Currently I have it working using JQuery in several locations. My professor does not want the class to use Jquery so I have to change the areas I use jquery to javascript.
function windowsize() {
WIDTH = $("#canvas")[0].width = ($(window).width()-20.5);
HEIGHT = $("#canvas")[0].height = ($(window).height()-20.5);
}
windowsize();
I am using this function to get reference to the canvas element and subtracting from the sides to remove the scrollbar. (on a side note if anyone knows how to remove the scroll bar without subtracting let me know!)
I attemped the following code to get reference to the canvas, but cannot get it to work?
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
Here is my fiddle: http://jsfiddle.net/Kinetic915/kURvf/29/
Any help is appreciated!
Thanks!

Assuming Chrome, document.documentElement.clientWidth seems to do it for you. Or, find a 100% width element on the page and get the width of that.

Javascript - Get the width of an undefined element

I have a div element, that has no defined width or height. It holds other elements, and molds on their size.
I need to get the final size of the div, without being able to check the sizes of the elements inside of it (dynamic elements).
I tried parsing all the properties of the object, but found nothing, all were "undefined".
Any thoughts?
Many thanks
Later edit:
I have
<div id="xxx" style="position:relative;">
aaaa
</div>
I tried:
var a = mydiv.style.width;
But it did not work.
I also tried:
var getKeys = function (obj) {
var keys = [];
for(var key in obj){
document.write(key+"="+obj.key+"<br>");
}
return keys;
}
getKeys(mydiv.style);
To show all the properties, but none had any info.
The jQuery solution works perfectly, but getComputedStyle was what I was looking for, as I can't use jquery here.
Sorry for the short information.

Based on no information whatsoever about what you were doing, I'd suggest that you should (if possible) use the window.getComputedStyle() approach, which finds the properties of an object as rendered by the browser:
var elem = document.getElementById('elemId'),
properties = window.getComputedStyle(elem, null),
height = properties.height,
width = properties.width;
If you have jQuery available, then you can simply use the width() and height() (or outerWidth()/outerHeight()) methods:
var height = $('#elem').height(),
width = $('#elem').width();

You don't give a whole lot of information. I'd suggest you edit your post with the actual code you tried using.
However, with JQuery:
$(DOMElement).width() //-- Element width.
$(DOMElement).innerWidth() //-- Element width + padding.
$(DOMElement).outerWidth() //-- Element width + padding & border.
$(DOMElement).outerWidth(true) //-- Element width + padding, border, and margin.

$('div').width() will return the width...