1–6

getComputedStyle in IE

From: CHYRON (DSMITHHFX)17 Jan 2013 15:07
To: ALL1 of 6
40245.1
I'm trying to getComputedStyle pixel values for a couple of nested elements, for position depending on browser width. Works great in IE9+, FF, Safari, Chrome.

Not in IE8.

The alleged equivalent is currentStyle.
http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml

But it is just returning the pre-defined css attributes, rather than computed actual dimensions, e.g. in Firefox: "n px". In IE8: "100%" and "auto". Applying parseInt returns "100" and "NaN".

This gets the same result (see getStyleValue):
http://digitalvariants.blogspot.ca/2011/02/pixel-perfect-positioning-of-elements.html

I'm thinking there's an easier way to do this in jquery (which I already have loaded in this project anyway). -- but, is there a better equivalent for getComputedStyle than currentStyle ?
Reply
0/0
From: CHYRON (DSMITHHFX)17 Jan 2013 16:15
To: ALL2 of 6
40245.2
Here's the script:

 

---
function contentpadding()   {
   var content = document.getElementById("content");
   var contentw = parseInt(window.getComputedStyle(content, null).width);
   var container = document.getElementById("container");
   var containerw = parseInt(window.getComputedStyle(container, null).width);
   //alert(contentw);
   var contentpadding = (containerw - contentw) / 2;
   if (containerw > 1040)   {
      document.getElementById("content").style.paddingLeft = contentpadding + 'px';
      document.getElementById("content").style.paddingRight = contentpadding + 'px';
   } else {
      document.getElementById("content").style.width = (contentw - 72) + 'px';      
   }   
}
---

I worked out to get the values in jquery:

$("#content").css({
   width: function(index, value) {
   alert(parseInt(value));
   }
});

Problem is, I suck at jquery.

T_T

 

Reply
0/0
From: CHYRON (DSMITHHFX)17 Jan 2013 18:33
To: ALL3 of 6
40245.3
I was getting all hung up on elaborate jquery syntax structures when the answer turned out to be dead simple. 2.5-hours later (drum roll)...

---
function contentpadding()   {
   var contentw = $("#content").css("width");
   var containerw = $("#container").css("width");
   var contentpadding = (parseInt(containerw) - parseInt(contentw)) / 2;
   if (parseInt(containerw) > 1040)   {
      document.getElementById("content").style.paddingLeft = contentpadding + 'px';
      document.getElementById("content").style.paddingRight = contentpadding + 'px';
   } else {
      document.getElementById("content").style.width = (contentw - 72) + 'px';      
   }
}
---
Reply
0/0
From: af (CAER)17 Jan 2013 23:16
To: CHYRON (DSMITHHFX) 4 of 6
40245.4 In reply to 40245.3
Do you know about box-sizing: border-box; ? I didn't read your code all that carefully but I have a feeling that might come in handy.

Oh and you should always specify the base parameter for parseInt() otherwise you'll get unexpected values if the strings you're parsing have leading zeroes.
EDITED: 17 Jan 2013 23:18 by CAER
Reply
0/0
From: CHYRON (DSMITHHFX)18 Jan 2013 01:48
To: af (CAER) 5 of 6
40245.5 In reply to 40245.4
I wasn't aware of it (border-box). It looks like it could be very useful. Haven't had any problems with parseInt in my very limited use of it.
Reply
0/0
From: af (CAER)18 Jan 2013 10:16
To: CHYRON (DSMITHHFX) 6 of 6
40245.6 In reply to 40245.5
it was just a heads-up really – if you do
code:
parseInt("0034")
for example, you'll get 28 as a result, whereas if you do
code:
parseInt("0089")
you'll get either 0 or NaN.

In browsers which support ECMAScript 5, which is basically just Chrome at the moment,  this silly behaviour is removed and parseInt works how you'd expect. Still, best to be on the safe side.
EDITED: 18 Jan 2013 10:19 by CAER
Reply
0/0