JavaScript and JQuery brainfart

JavaScript
1

So the idea is that I have a list of states (52 including DC and Puerto Rico) and I want them to be listed on the side of the main content. I’ve done that, but I also want make the height of the list equal to the content height (it changes depending on what it draws from the server).

In changing the height to match the content I now have the need to change the font-size and line-height to match increases and decreases in size of content. My way to change the state list height works and it changes to match the content but the font size and line height will not change… I can’t figure out what I’m doing wrong and at this point I’ve been staring at the code for so long I can’t seem to see any errors.

Note about the code. The function is called when the full height of the content has been determined (i.e. all images have loaded in the content portion of the page) so the height will remain accurate. I know it’s running because the stateList gets resized upon change of the content height.


function setListHeight()
        {
            var fullHeight = document.getElementById("infoWrap").offsetHeight + document.getElementById("footer").offsetHeight;
            document.getElementById("stateList").style.height = fullHeight + "px";
            var calcLineHeight = round((fullHeight/52) - 1);
            var calcFontSize = 0.7 + (calcLineHeight / 12);
            $("#stateList a").css("line-height", calcLineHeight);
            $("#stateList a").css("font-size", calcFontSize);
        }
2

You may need to specify what unit of measurement you are setting (ie, pixels or ems). It avoids ambiguity to do this anyway.


$("#stateList a").css("line-height", calcLineHeight + "px");
$("#stateList a").css("font-size", calcFontSize + "px");
3

Thank you for your response and suggestions Anthony.Barnes. I implemented those ideas however it still does not seem to be working. If viewing the site might help I will provide a link. Honestly the project is done but sometimes it’s those little things that make a site ‘that much more easy on the eyes’

4

I can’t find the state list on your link. I’m also a little unsure of the goal of the code. The HTML/CSS should automatically size the div to the amount of content (unless otherwise specified). It may be that you can find a solution that doesn’t require you to use javascript.

5

Hover over the “state list” grey area and a list will pop up… unless you don’t have javascript enabled.
You’re right the content already determines the height of the div but the image in the middle is not constant so I need a solution that resizes the list to the middle content… I didn’t think I could resize the div to ‘wrap div’ + ‘footer div’ using html/css. Is that possible? Becuase I’d rather not use JS D: