SitePoint Sponsor

User Tag List

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

    getting margin value from chrome

    I've set my margin as a % and am trying to get the value via jquery. It's being returned as a pixel value from safari and firefox, chrome is returning the percentage.

    outerWidth returns an incorrect value (reporting as 1px more than innerWidth and I know it's 4px). Anyone else run into this problem?
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by downtroden View Post
    I've set my margin as a % and am trying to get the value via jquery. It's being returned as a pixel value from safari and firefox, chrome is returning the percentage.

    outerWidth returns an incorrect value (reporting as 1px more than innerWidth and I know it's 4px). Anyone else run into this problem?
    There are many ways to get the value via jQuery.
    Which way are you using in particular?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    script is a little more involved, but here's where the margin part comes in.
    Code JavaScript:
    var donor_box = $(this).parent('dt');
    var margin = parseInt(donor_box.css("margin-right"));

    So…*if I dump the margin variable to the console, firefox and safari report back a pixel value, chrome is reporting the percentage set in my css file.
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by downtroden View Post
    script is a little more involved, but here's where the margin part comes in.
    Code JavaScript:
    var donor_box = $(this).parent('dt');
    var margin = parseInt(donor_box.css("margin-right"));

    So…*if I dump the margin variable to the console, firefox and safari report back a pixel value, chrome is reporting the percentage set in my css file.
    Apparently there's no automatic way that's available.
    This post though provides a way to calculate the percentage:
    get CSS rule's percentage value in jQuery
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so… is there no way to do this in chrome then?

    Code JavaScript:
    console.log('width: ' + donor_box.width());
    console.log('innerWidth: ' + donor_box.innerWidth());
    console.log('outerWidth: ' + donor_box.outerWidth());

    are all reporting the same value. Kind of blows my mind how google has this set up.

    I appreciate the stackoverflow link, but unfortunately doesn't apply to my case.
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by downtroden View Post
    are all reporting the same value. Kind of blows my mind how google has this set up.
    As in, you set a percentage and Chrome reports back to you the correct percentage value that you set, whereas other browsers force it to pixels instead? Yeah, that''s a problem.

    Using the javascript style property to set and retrieve the value works in all browsers that I've tested (chrome, firefox, internet explorer, opera, safari).

    Code html4strict:
    <html>
    <head>
    <style type="text/css">
    #container {
        border: 1px solid black;
    }
    #mysection {
        border: 1px solid blue;
        height: 500px;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="section">
        </div>
    </div>
    <script>
    window.onload = function () {
        var container = document.getElementById('container');
        var section = document.getElementById('section');
        section.style.marginRight = '50%';
     
        var marginRight = section.style.marginRight;
        container.appendChild(document.createTextNode('Right margin: ' + marginRight));
    };
    </script>
    </body>
    <html>

    so the problem seems to be specific to jQuery itself.

    Can the forum specifically for jQuery issues be of any help?
    jQuery forum
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •