2

I'm trying to achieve a cross-browser if/else statement. The issue is I'm checking the 'top' property on an element, and Chrome & safari return the css value, while Opera & Firefox always return it in pixels no matter what. Is there any way I can read the CSS directly and use jQuery or javascript to return the value of 'top' on an element as it's entered in the .css file?

I need a unified value returned in terms of a %. The problem is that Firefox converts it to pixels.

Here's my code:

if ($('#wrapper').position().top == '-100%') {
        // Do Stuff
}

This works in chrome since chrome returns -100% in the instance. But firefox returns something like '-720px'. It converts that percentage into pixels.

8
  • Can you explain your use case? Why do you need the source value?
    – casablanca
    Feb 22, 2012 at 4:39
  • Because Firefox returns pixels & chrome/safari returns whatever is in the code. I just need a unified return from both browsers. It doesn't matter what it is, as long as they give the same thing.
    – alt
    Feb 22, 2012 at 4:40
  • I'll edit my question...
    – alt
    Feb 22, 2012 at 4:40
  • Can you not parse the units (px, em, % etc.) and convert it to a standard unit?
    – casablanca
    Feb 22, 2012 at 4:42
  • How would I convert it to a standard unit? My top is a percentage, so you'd have to know how tall the browser window was at all times. That can really slow down a site if you're constantly checking for that on window resize.
    – alt
    Feb 22, 2012 at 4:54

3 Answers 3

2

afaik, you can't get back the %, but you might be able to figure it out by dividing the pixels returned from the css divided by the height.

var top = parseInt($('#ID').css('top')) / $('#ID').parent().height() * 100;
1
  • Thanks! This works perfectly. It's sad you have to fetch and convert pixels though. Firefox & Chrome should both return the same value, right?
    – alt
    Feb 22, 2012 at 5:23
0

You can't get what's entered in the CSS file, but you can simply do some parsing of the return value. The below should standardize the values for you and you can then do whatever comparison you need to make (uses JQuery).

parseInt($("#elementId").css("top").replace("px", ""))

1
  • I don't really understand. Check out my code in my question (just updated) and see if this still works.
    – alt
    Feb 22, 2012 at 4:44
0

You can use the parseInt() method to return a numeric value from the CSS attribute.

var top = parseInt($("#someElement").css("top"));
3
  • 1
    This wouldn't help as 100% would get parsed as 100, and 720px as 720. OP wants the returned value to be in the same units, irrespective of browser
    – Ayush
    Feb 22, 2012 at 4:51
  • What version of jQuery are you using @JacksonGariety? Feb 22, 2012 at 4:54
  • It would be helpful if you opened up a jsFiddle Feb 22, 2012 at 5:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.