www.webdeveloper.com
Results 1 to 3 of 3

Thread: Get height of an element /if/ set to auto

  1. #1
    Join Date
    Nov 2010
    Posts
    53

    Get height of an element /if/ set to auto

    Hey all,

    So I am making a nav for a mobile webapp and I found an awesome guide that I have picked apart then changed.
    http://designshack.net/articles/css/...alaccordionav/
    He says in there that if using css you cannot have the height change animation while changing the height from 0px to auto, it has to have a numerical value for some reason.
    What I want to do is get the value of the height if it was auto then use that height with the animation - this will let me have an arbitrary number of sub links without having to manually change the height each time I add/remove a sublink.

    Apologies if this is hard to make sense of - it's a little odd but I'm sure there is a way!

    Thanks!

  2. #2
    Join Date
    Aug 2012
    Location
    UK
    Posts
    10

    Thumbs up

    Hello.

    I once made a site that relied heavily on the repositioning of dynamically sized elements on the page, so it was important for me to have some code that could work our the browser computed width and height and position (x,y coordinates) of any element on the page. And we came up with this code, which was a mixture of things we found on the web:

    Code:
    // Functions to work out computed width, height, and absolute position on the page
    function getComputedHeight(o){
        return navigator.appName=="Microsoft Internet Explorer"?parseInt(o.offsetHeight):parseInt(document.defaultView.getComputedStyle(o,"").getPropertyValue("height").split("px")[0]);
    }
    function getComputedWidth(o){
        return navigator.appName=="Microsoft Internet Explorer"?parseInt(o.offsetWidth):parseInt(document.defaultView.getComputedStyle(o,"").getPropertyValue("width").split("px")[0]);
    }
    function getPos(o){
        var l=t=0;
        if(o.offsetParent){
            do{ l+=o.offsetLeft; t+=o.offsetTop; } while(o=o.offsetParent);
            return [parseInt(l),parseInt(t)];
        }
    }
    It should be quite simple to understand - you basically pass the element's DOM object to the function, and it will return what you need... I hope!

  3. #3
    Join Date
    Nov 2010
    Posts
    53
    Sweet, I may look into it! thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles