I am creating a generic myWindow extending Ext.window.Window component.
here I need to support one feature to auto adjust height and widht of window.
This height and width will depend on height/width of HTML content inside the Window.
Is there any way in EXT JS or javascrip that can provide me height and width of html content.
To get the height or width of an element in pixels (including padding and borders), use the offsetHeight and offsetWidth properties of the object. These values are readonly.
If you have set the style of the element, you can get the height and width (excluding padding and border) with the style property:
var el = document.getElementById('elementId');
var width = el.style.width;
var height = el.style.height;
You can also set the height or width of the element this way.
el.style.width = 40 + 'px';
'px' can be changed to any valid unit, e.g. em.
Related
How can we get height of sidebar in checkout using js
Is there any way to get the sidebar height?
first grab the element
const myEl = document.querySelector("#whatever-your-sidebar-id-is");
then you can either check the height with clientHeight or getBoundingClientRect().height :
myEl.getBoundingClientRect().height
You can get the height with offsetHeight and offsetWidth properties of the element.
elem = document.querySelector('#sidebar-id-or-class')
elem = document.querySelector('.cart-summary')
then check the height with offsetHeight
console.log(elem.offsetHeight)
The function will give you relatively with properties of the DOM element to get its the width and height.
How can I get an elements width without setting it's width property in CSS? If I set the width it works, but if I don't the width is just 0 even though I can see it's not after inspecting with debugger.
let width = this.htmlElement.clientWidth;
HTML
<label [model]="foobar">0</label>
Use offsetWidth instead
let width = this.htmlElement.offsetWidth;
The first line in the docs for clientWidth is
The Element.clientWidth property is zero for elements with no CSS or
inline layout boxes, otherwise it's the inner width of an element in
pixels
The offsetWidth on the other hand is a read-only property that returns the layout width of an element, regardless of wether or not the element is styled with a given width.
var el = document.getElementById('foobar');
console.log('clientWidth : '+ el.clientWidth );
console.log('offsetWidth : '+ el.offsetWidth );
<label id="foobar">This has width ..................</label>
So I want to change the width of an element as the page gets bigger.
However, if the page width doubles i dont want the elements width to increase by double. I want the element to increase with diminishing returns. Anyone know how to do this?
You can achieve this with jQuery, basically you would check the size of your page and by that you should set width of your elements, for example
If you are using jQuery, you can get the size of the window or the document using jQuery methods:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)
For screen size you can use the screen object in the following way:
screen.height;
screen.width;
There are methods you could use, and here is an example how you might set value of your element by depending of your page size:
var width = $(window).width();
$("#myElement").width(width) - 100;
I put a 100 there as a variable number, you can change it as you want to.
I mean you can put a number whichever you want to just to get width of your element as you want it to be.
I hope this helps to you
I am using an accordion which was written by somebody else. When the accordion is initially displayed, each rows' initial heights are persisted, and then their heights are set to 0. And then when the row becomes visible, its height is restored to its original value.
But in my case, the accordion's heights will change because I am asynchronously populating them with data. So, when the row becomes visible, I'd like to calculate the rows' height based on it's new constents. However, because its height was set to 0 with .css('height', 0), $(elem).height() gives 0.
Is there a way to calculate the height of the element, rather than just retrieve it's css height value?
Use jQuery's innerHeight function to get the calculated height of an element, sans border and margin.
var height = $('#myElement').innerHeight();
Edit:
Use jQuery's outerHeight function to get the calculated height of an element, including padding, border and optionally the margin.
//without margin
var height = $('#myElement').outerHeight();
//with margin
var height = $('#myElement').outerHeight(true);
Edit 2:
You may also compare these results with native Javascript.
var el = document.getElementById('myElement');
var height = el.offsetHeight;
You can also use the Javascript offsetHeight function.
var elementHeight = document.getElementById(id_attribute_value).offsetHeight;
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
I have a div. I've set the width of the div to auto. I want this div to be a square, so I've set the height of the div to 100%. Now if I set the width of the div to 100% it wouldn't be a square as most screens are rectangle, so I thought I could get the current height of the div in pixels and set the width as the height in landscape mode, and do the opposite in portrait mode, but I have no idea about how to go about this. Please assist me for the same. I'm using HTML and JavaScript
Without any extension like jQuery:
var div = document.getElementById("myDiv");
var height = div.clientHeight;
div.style.width = height + 'px';
I don't think JavaScript is necessary for that; if you are doing mobile/tablet design you could use media queries to change the width and height of your div; and if you want it to be square you could set the width and height to be the same with CSS. Experiment with percentages until you find which values produce equal width and height in web developer or firebug.