Can I get height of an elem whose width has been set in %ge?

I was wondering if there’s any way to do this…

I need to place a div on top of a photo, and I would like this div to have the same height as the photo (this div, which will contain just plain text, I will show/hide dyncamically…) but I don’t know how to determine the height of the photo, as the photo width is set in %ge, and the %ge depends on whether device is being held portrait or landscape, whether it’s a phone or tablet… and not only that, but also depending on whether photo itself is lanscape or portrait…

is there a way for CSS (or jQuery) to detect the height of an element whose width has been set in %ge?

thank you…

I think it may be possible in JavaScript (I expect the experts there will let you know more), so you may get more help in that forum (moved from HTML/CSS).

I was thinking on the lines of css, but this came up at the wrong time of day (and week) for me, so will have to wait. :frowning:

OK, something along these lines…

1 Like

That’s a neat trick, @SamA74. I didn’t realize that could be done with CSS.

That’s the sort of thing I would have suggested but there is an issue if the image width is not 100% because it would then be smaller than the container. The image container needs to to be the element that controls the size of the image (as in your example) rather than setting any percentage widths on the image (apart from 100%).

2 Likes

thank you all for yr responses… that “pen” thing is neat, I had never seen that…

first off, it was silly of me to ask if CSS can “detect” and element’s height… of course it can’t… yes I should have posted this on this JS forum…

actually the div on top of the photo will have a bg color (and be semi-transparent, so you can still see the photo through it… having the text on top of photo w/no bg color doesn’t work, since all photos are different color, and as you can imagine, whatever font color I choose wouldn’t work for all photos… so: I need this div to be the exact same height as the photo…)

and, actually I did in jQuery:

    phHeight = $('#photoImg').height();
    console.log(phHeight);

and it works, actually; gives you img height in px (even though I set photo width (not height) in %ge…)

problem is, it doesn’t always work… i.e., sometimes it gives you “0” and I have to reload to get the correct value for the height… the eternal problem in trying to get properties for elements client-side… it doesn’t always work… sooooooooo… have to figure something else out… bummer…

thank you again…

edit: adding screenshot of what I want:

and actually: I set overflow:hidden here, and don’t see scrollbar!! (another problem…:grin: is this a mobile device issue? yikes…)

I changed max-width to width.

Added a background colour.

So it needs to scroll. The screen shot make things clearer.

1 Like

Css can detect the height of an element if as shown in Sam’s demo you make the overlay position absolute and place it at top, right, bottom, left with values of zero inside a parent with position relative.

This will work well as long as the with of this parent container is used to control the image size. It all depends on your exact setup.

I would not use js to do this because you would need to tie it to the resize event which likely means also using a debounce script to stop throttling the browser.

3 Likes

SamA74,

tell me something, this screenshot (i.e., your “pen”) that shows the scrollbar on the right for the element with the text, is that on a computer browser or a mobile device? I don’t see a scrollbar on mine on the phone…

thank you…

:confused: It’s on whatever you are viewing it on.

It’s not a screen shot, if you click on it, it’s a live example where you can tinker with the code and experiment. :slight_smile:

Do you have overflow set to scroll?

overflow: scroll;

actually I had made a mistake… correct setting is overflow:auto, not overflow:hidden (duh…)

however, don’t see scroll on iPhone with overflow:auto either… and it looks like I won’t get one:frowning:
(apparently, according to this, overflow:scrolll won’t do it either… well, will have to test, can’t test right now…)

thank you…

Hi,

You won’t see a scrollbar on desktop mac systems either as the scrollbars are invisible until you start to scroll and then they appear.

On webkit mobile the element will scroll if you just touch inside and drag as usual although you won’t see the scrollbar (I don’t believe 2 finger scrolling is needed these days).

You can make the scrollbars appear with some webkit css but is seldom done and not the norm.

http://www.pmob.co.uk/temp2/scrollbar-ipad.html

It would probably be best to do that for a device media query rather than a max-width media query.

2 Likes

actually on my MacBook Pro I do see a scroll, on Chrome & other browsers too, when I have overflow:auto set on an element (and the content (plain text) is taller than the height of the element…) have fiddle here:

thank you all very much for your help…

Yes a macbook pro shows scrollbars when required but the imac desktop does not show any scrollbars until you start to scroll and then they appear. Iphones also do not show scroll bars or indicators until you start to slide and then the bar appears when you scroll the main screen but if you scroll inner elements then they will still scroll ok but probably not show a scrollbar as such. Although as I mentioned above you could force the issue if required with some css.

Are you still having problems as your fidddle is working ok and Sams example should have no problems.

hi Paul,

iMac desktop also doesn’t show a scrollbar? yikes…

yes I know about iPhones (& presumably iPads…)
(& how about Android devices?)

well, am not doing overflow:auto anymore… too complicated in today’s world…:wink:

thank you very much for your help, Paul… and to everyone else too…

Generally, for mobile/touch it is a bad idea to have inner scrolling elements as that gets confusing on touch devices. Indeed if the element fills the viewport then a user can’t scroll to another element easily as they are stuck inside a scrolling box.

So yes avoid them where possible.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.