SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getAttribute() width + height problems

    Hey all,

    I am trying to get the height and width out of an image... like such..

    var height = document.getElementsByTagName('img').item(0).getAttribute('height');
    var width = document.getElementsByTagName('img').item(0).getAttribute('width');

    That works great, now, what i want to do is resize my popup window to the size of the dimentions of that image but I want then to add 50 px around the edge of the image IE:

    var height = (document.getElementsByTagName('img').item(0).getAttribute('height')+50);
    var width = (document.getElementsByTagName('img').item(0).getAttribute('width')+50);

    The problem I am being faced with here is that example I have a height of 300 and a width of 500 my totals in the Javascript now become 30050 and 50050 respectively, but I want it to end up as 350 and 550, how would I fix this problem?

    Thanks in advance
    Ox
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var height = (document.getElementsByTagName('img').item(0).getAttribute('height')-0+50);
    var width = (document.getElementsByTagName('img').item(0).getAttribute('width')-0+50);

  3. #3
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fantastic! Easy when you know how such a small thing, Jimfraser I know im sounding like a pest but I know now that is works! but I dont understand WHY?

    Not that I am moaning that it works, I just like to understand why
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  4. #4
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript uses the same operator + for addition and sting concatenation. If one of the operands has (or can be converted to) a string type, result is concatenation:

    "50" + 1 is "501"

    If both are (or are converted to) numbers, result is addition:

    50 + 1 = 51

    "-0" does string-to-number conversion and therefore forces engine to perform addition:

    ("50" - 0) + 1 = 51

    However, this trick (and the same like *1 etc) is considered "bad style". It's much cleaner to make an explicit cast:

    Number("50") + 1 = 51

    As to your snippet, you should realize that "getAttribute" simply returns what you've put in html code and generally doesn't reflect the real width of an object:
    Code:
    <img 
    	style="width:100px"
    	width="foo"
    	border=1
    	onclick="alert(
    		'\nattribute=' + this.getAttribute('width') +
    		'\nreal width=' + this.offsetWidth
    		)
    	"
    >
    To find real pixel dimensions of an element use "offsetWidth/height" property :
    Code:
    var img = document.getElementsByTagName('img').item(0);
    var width = img.offsetWidth + 50;
    var height = img.offsetHeight + 50;
    Note that no type conversion is needed here, because offsetXXX are numbers, not strings.

  5. #5
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stereofrog, thank you very much for the reply, that makes alot of sence! excellent, thanks again!
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "-0" does string-to-number conversion and therefore forces engine to perform addition:

    ("50" - 0) + 1 = 51

    However, this trick (and the same like *1 etc) is considered "bad style".
    The plus sign is problematic because it can represent addition of two numbers or 'concatenating' (joining) two strings. So, when javascript sees this:

    "100" + 50

    it doesn't know whether it should be adding two numbers or joining two strings, so by default, when it sees a number and a string, js automatically converts 50 to a string and then joins the two strings.

    In js, all values from input fields and attributes are strings--even if they look like numbers. So, what you are doing in your code in this line:

    getAttribute('height')+50)

    is this:

    "27" + 50

    and by default javascript converts 50 to a string and joins the two strings.

    However, there is no subtraction operator for strings, so when js sees a subtraction operator:

    "100" - 50

    the only logical conclusion is that you are trying to subtract two numbers, so js converts the string to a number, and performs the subtraction. So, to convert a string to a number, you can subtract 0 from it.

    ("100" - 0) + 50

    Similarly, you can convert a string to a number by multiplying by 1:

    ("100" * 1) + 50

    However, it is not always clear what you are doing, so it's better style to use parseInt(), parseFloat() or Number() to convert the string to a number. parseInt() and parseFloat() will try convert a string to number if it has trailing letters:

    parseInt("123abc") //123

    but will return NaN if there are leading letters:

    pareseInt("abc123") //NaN

    Number() returns NaN if there are any letters in the string. So, depending on what behaviour you want, you can use the appropriate function. In addition, it may prove useful to be able to test if the conversion to a number worked, and you have to use isNaN() for that:

    var value=document.getElementById("someId").value;
    var result = Number(value);
    if(isNaN(result)) alert("not a number--bad input")


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
  •