SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rounding returned value from jquery.css

    So just found out the problem I was having, and came up with a solution (bandaid really) but would like to know if anyone else has run into this and what they did.

    Code JavaScript:
    var left_margin = $(this).css('margin-left').replace(/\D/g,'');

    So the above, get the left margin of the object, strip all but numbers and store into a variable. Easy, right?

    Here's what happened. Inserted the object into the DOM, Chrome returned 212px, which was converted to 212*fine. Firefox on the other hand returned 212.5px, which was converted to 2125 not fine.

    I'm centering the element on the screen based on this number, so the additional 2000ish pixels is WAY off. My solution was to increase one of my initial values a single pixel in which both browsers return 213px*but like I said this is only a bandaid solution.

    Not really understanding the value of .5 pixel, but looking into that. Is there a rounding function in jquery? Javascript I would have to strip the px from the string, convert to integer and THEN round.

    Anyone have a hint?

    Thanks
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm surprised a fraction was returned for a pixel quantity.

    Try:
    Code:
    var left_margin = $(this).css('margin-left').replace( /^(\d+).*/g, '$1' );
    Tab-indentation is a crime against humanity.

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali
    I'm surprised a fraction was returned for a pixel quantity.
    Some browsers are a little bit more precise :P

    But seriously, this usually happens when the result of an equation with fractions has set the value in question. It's quite often moot though because AFAIK most browsers either ignore the fraction or round it internally.

    If you wanted to get the whole number, rather than doing a regex, try the parseInt() method

    Code JavaScript:
    var left_margin = parseInt($(this).css('margin-left'));

    Alternatively, you could just remove the "px" string from the end.
    Code JavaScript:
    var left_margin = $(this).css('margin-left').replace("px","");
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    went with the parseInt(). Seems like the right tool for the job in this case.

    Still find it odd how a browser can return a half a pixel as a value (no matter how precise it may be).

    Thanks.
    your brain reacts in the same way whether you are
    looking at something or thinking about it...


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
  •