We Keep Coding

Make a p have the same width/height as an image that is placed in another div

I am trying to make a p always have the same width and height as an image that is placed next to it.
I set specific dimensions to both of the divs containing those elements, and then set the img width and height to 100% (as mentioned here). Unfortunately that led to images getting distorted even if I used the dimensions of the actual images being provided. Forgot to mention that I use Picturefill by the way, perhaps it has something to do with that..
I should mention that it is possible to somewhat control the amount of distortion, by adjusting the values in the sizes attribute of the picturefill HTML. However it turned out that I would have to add thousands of different values to that attribute to actually make it work this way. It just didn't really feel like the correct approach to something like this.
HTML
<div>
<img
sizes="(min-width: ...px) ...vw, (min-width: ...px) ...vw etc"
srcset="/images/img1.jpg 280w,
/images/img2.jpg 350w"
alt="...">
</div>
<div>
<p> ... </p>
</div>

Set the image width to 100% and height to auto. That way, the image will preserve its aspect ratio while still being resized.

When to retrieve height for element with image in it?

In my web app, I want to display popup element which has <img> element in it. Image source is usually bigger than I need it, so it get's resized in css. And before I display it, I need to know it's outerHeight.
The popup looks something like this:
<div class="popupContainer">
<div class="popupHeader">Header</div>
<img class="popupImage" src="source" />
<div class="popupMessage">message</div>
</div>
After I append it to another element, I'v tried retrieving it's height in two ways: simply popup.outerHeight(true) and using imagesLoaded library:
imagesLoaded(popup, function () {
popup.outerHeight(true)
})
In most caes, both options return the same and expected result (like how tall the element actually is in browser). But there are times when option #1 returns height that is too small, because the image source hasn't been loaded yet, whereas option #2 returns height that is way too big, because the css hasn't been applied yet. (I think that those are the reasons). So I wanted to know, which is the best time to retrieve it's height? When the image will be loaded and element will be formatted correctly accoring to css.

You should do when the image will be loaded.

jQuery scrolling doesn't show up

I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?

Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says

An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.

Fetch current height of iFrame and applying that height to parent div

I have an iFrame inside of a div. I need the position on the iFrame to be absolute (it's a really long story). When the position is absolute, the content lays over the content below it. How can I fetch the current height of the iFrame and set that number as the height of the parent div in order to push the other content down, creating the illusion that the iFrame content in no longer laying on top of the rest?
Have done a bunch of research and tried so many things in js. Please help and if you're feeling nice, please give me some good rep :)
Thanks.
<div <style="height:[want this to be height of iframe after loading content]">
<iframe src="mydoc.html" style="position:absolute"></iframe>
</div>
<div>Other content that is now displaying under iFrame content</div>

$(document).ready(function() {
var iframeHeight = $('iframe').height();
$('div').css('height', iframeHeight);
});
It would be trivial to do this in vanilla js if you had selectors on your elements.

jQuery image width not working

I am trying to get image width of image with class product-thumbnail. There are several images with this width but all of them have the same width. So this is my javascript:
$(document).ready(function() {
alert($('img').('.product-thumbnail').width());
});
and these are image tags
<img src="img/produkt1.png" title="Názov produktu" class="product-thumbnail">
<img src="img/produkt2.png" title="Názov produktu" class="product-thumbnail">
however it doesnt work and I am not getting any alerts. There should be no problem with the selectors (jquery is included) and I want to use this so I can set div width acording to image width but the image width changes with browser windows width. Do you know a solution for this? Maybe I have only som syntax error there.

alert($('img').('.product-thumbnail').width());
That is invalid jquery, the selector should all be inside the $(''), like a CSS selector, so it should be
alert($('img.product-thumbnail').width());
You also need to pick which image to get the width of, for the first one, you would do:
alert($('img.product-thumbnail')[0].width());

You should be doing:
alert($('img.product-thumbnail').width());
But even so, it's problematic since you will get an array back. In any case, the syntax you are using is wrong.