I would like to know if you can use calc() or something else to calculate the size of an element based on another DOM element size.
You can use .offset
something like this
var width = document.getElementById('element').offsetWidth;
var height = document.getElementById('element').offsetheight;
requires js of course.
Related
I am using angular 5 where in a component I have one method
onFullScreen : function (event){ console.log(event[0]) }
Here, when I do console.log(event[0]), this will return this
This returns a HTMLDivElement, now I want to get the height property in my onFullScreen() method. How to get it?
The best way to get the height of an element (and lots of other layout-related properties) is to use getBoundingClientRect (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
So you can do this:
const height = event[0].getBoundingClientRect().height;
You can try this:
var height = document.getElementById('element').style.height;
Since the height is defined in inline styles for this element, this would work.
Warning: this does not work if height is not explicitly defined in css but calculated based on content or outer box.
I've designed one web site from asp.net & in that i designed the html pages with the help of css. In that css all the measurement that i've taken are in pixel. I want to convert all from pixel to percentage?
Is there any conversion formula for this?
how to do this?
thanks.
To change the width of a block element to a percentage value, you'll have to know the width of its container in the same units.
var widthChildPercent = widthChildPixels / widthParentPixels;
Obviously, you'll likely want to format that to an integer value when you update the style, but that will be the general formula.
You Can use THIS to convert your pixel values to percentage
I use the following formula when converting for a flexible layout from a static layout:
result = 100 * target / context
where
target is what you want to change
context is (usually) the page width you want to work with.
For example, if you have a block element <section> that currently has a width of 330px and you are working in a wrapper of 1024px, you could use 330/1024*100 which gives you a result of 32.23% for your width. However, as a rule, for fonts you want to convert to em rather than percentages.
I've written a function which takes a <select> ID, and replaces all the options with new ones (using jQuery's html()). However, on IE the width of the dropdown remains the original one which has a size way bigger than what I need to display, because is based on the original <option>'s that had long strings captions.
Is there a way to force the <select> to recalculate it's width?
I am using IE 8.
I think the pragmatic solution would be to replace the whole <select> element. This way, the newly inserted one will have the correct width for its <option> elements (disregarding any other styling that may be applied).
The thing to bear in mind if replacing the whole select is that any references to the replaced element will need to cleaned up prior to removing it from the DOM (to avoid any potential memory leaks) and event handlers attached to the newly inserted element.
It's possible to set its width through css.
In your case I would approach it using this method:
If you are using em's or ex's as font size units, then since it is a value based on height, you can assume using a certain ratio that it is almost near the equivalent of a character's width. Based on that, you can actually calculate how wide your select element would be by:
1st: get the number of characters of the smallest string from the select options.
2nd: multiply that by the em value.
3rd: set this value as the select's width.
using jquery that would be achieved through:
var em = 1em; //assign here a value, that corresponds to your layout's font size
var shortest = 6500;
$('mySelect').each(function(i, selected){
temp = $(selected).text().length();
shortest = (temp < shortest) ? temp : shortest;
});
$('mySelect').css('width',(shortest*em + 1) + 'em'); //add 1em for the scrollbar
If I have a div that expands to its contents, how can I ensure that its height is always a multiple of a given value, say, 50 pixels? Is there any way to do this with CSS, or would I need to resort to JavaScript?
Since CSS is not aware of the actual computed element dimensions, it cannot achieve what you ask. JavaScript can do this easily.
You'll need JavaScript. In case the content doesn't change inline (with ajax or jquery or anything) you can use an onload event to start a script that checks the height and fixes it:
<body onload="javascript:fixHeight()">
<div id="thediv">
content
</div>
</body>
script:
function fixHeight() {
var thediv = document.getElementById('thediv');
thediv.style.height = ceil(thediv.offsetHeight / 50) * 50 + 'px';
}
(not tested)
I have a table that is dynamically created using DIVs. Each row of the table has two images. I want to set the height for the div (that represents a particular row) to the height of image that is greater of the two images being displayed in that particular row. The images to displayed will always change, and they are from an external server.
How do I set the height for my div so that I can fit images?
If you are trying to dynamically resize a couple of divs in a row within a table, you maybe better off using a html table instead and having each image within a td tag. This will make tr tag resize accordingly for the image in each cell.
this.img = new Image();
this.img.src = url;
alert(this.img.width);
gives the width while
var img = new Image();
img.src = url;
alert(img.width);
doesnt..
dunno why.
You can:
Not specify the height of the div, and let it expand automatically
Once the image is loaded do:
document.getElementById("myDiv").height = document.getElementById("myImage").height
We'll need a little more info to be very useful. You can get the height & width of an image after the page loads via Javascript (info), then you could resize the height of the div after loading. Otherwise, you're really out of luck since HTML itself doesn't have anything.
If you're using PHP, there's getimagesize(), which you can use if you're building the site dynamically with PHP. There are similar functions for other languages, but we'd need a little more info.
If you want the browser to do layout based on the height of an image, before it fetches the image, you need to send that height to the browser somewhere. This will require something server-side. The fastest thing would be to insert in into the html directly. Slower but more elegant would be to fetch it image by image with <script src=> statements that get instructions from a special bit of javascript-generating cgi. (The speed difference comes from network round trips.)
If you're willing to resize after the data arrives, it's much simpler. Either slap an onload handler on the images or stick them in normal dom (e.g. an actual table, though you can do it with divs and css) and let the layout engine do the work.
This question has been answered in multiple ways, and you asked the additional question "Won't this make the UI look bad?"
The answer to that question is Yes. The best thing for you to do in most cases will be to set the height of your div to something that looks good, then scale the images down to fit. This will make the rendering faster, and the final product will look better and more professional.
But that's just my own opinion, though. I have no empirical data to back that up.
Pre-load them into javascript image objects then just reference the height and width.
Might take some clever devilry to work in all browsers...
function getSize(imgSrc){
var aImg = new Image();
aImg.src = imgSrc;
aHeight = newImg.height;
aWidth = newImg.width;
}