SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy JavaScript and JQuery brainfart

    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.
    Code:
    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. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may need to specify what unit of measurement you are setting (ie, pixels or ems). It avoids ambiguity to do this anyway.

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

  3. #3
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anthony.Barnes View Post
    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.

    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:


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •