Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Matt Campbell
Matt Campbell
9,767 Points

Getting a scaled images scaled height - jQuery

Here's the link to what I'm working on. http://ultimatewebdevs.co.uk/testspace3/

As you can see, the images are vertically stretched. This is because for the life of me I can not get hold of the images scaled height. The width of the images is determined using jQuery to calculate 20% of the container's width. What you can see is this times 3. However, I am not trying to set the margin dynamically.

Inspecting the element says the image is 408px high, as it currently is in the link. I've set the height of the image for this instance but, if I remove it, the image goes back to the correct RATIO as in it is not stretched but inspecting it as an element shows it is still 408px depsite actually being 304px or something.

As you can see, this makes my margin calculation wrong and the margin is too small etc.

How on earth do I get jQuery to recognise the smaller scaled image height and not the original image height? Can you help Andrew Chalkley . It would be great to hear from you.

I've looked at client height, offset height, using get element and so on. Or, am I just buggered and this is actually impossible?

3 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Why does 

console.log($('.slide').height());

give me the correct height of 343px, at the resolution I'm taking this info from, while

slideheight = $('.slide').height()

give me the images natural height of 408px?

I need it to take the height of 343px.

Maybe I should put this dynamic height thing in its own function? Separate it from other variables and functions?

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Appears where I wrote my variable declaration mattered sufficiently to cause the code not to work properly. Think its all sorted now.

Declaring the variable outside the block of other variable using height() means we're now cooking with gas. :)

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Edit: I replied before checking your script.js, but I'll leave the below in case it is relevant to you or others that are reading.

If the height of .slide-runner is static, as in 343px, then set a height of .slide to be the same either directly in CSS or with jQuery. If it is static and to reduce duplication in your CSS you could create a new class of .slide-height (for example) and set the height there then add that class to the owners of the .slide-runner and .slide elements.

Matt Campbell
Matt Campbell
9,767 Points

Hi Sean T. Unwin . Everything must be dynamic for a few reasons. If the images that are used are different to what I'm using here. If the amount of space the slider is put in is different, we want the margins to be dynamic to keep it in the middle. To keep the slider responsive to resolution, and keep the margins keeping the slides in the middle.

I've got jquery getting the right height now so I'm all good. All depends on where I write the variable. Needs to be outside the main block of other variables. Now I can have everything dynamic and set the margins to adjust automatically. :)