Convert CSS calc() function to jQuery for expanded browser support

Question

I have the following code used to solve this problem I had. It works in IE9/Chrome:

    $(document).ready(function () {
        var legendWidth = $('#titleInner').outerWidth();
        var margin = 'calc((100% - ' + legendWidth + 'px) / 2)';
        $('#titleInner').css('margin-left', margin);
        $('#titleInner').css('margin-right', margin);
    });

However, I would like to get rid of the CSS calc() function so that it works in IE7/8.

I had seen this question/answer using jQuery to do the calculations which seems like a good solution.

Problem is I can't get the syntax/chaining working.

Here is what I have tried:

    $(document).ready(function () {
        var legendWidth = $('#titleInner').outerWidth();
        $('#titleInner').css('margin-left', '100%').css('margin-left', '-' + legendWidth + 'px').css('margin-left', '/2');
        $('#titleInner').css('margin-right', '100%').css('margin-right', '-' + legendWidth + 'px').css('margin-right', '/2');
    });

I have tried a few variations (removing the 'px', etc) but no luck. I also couldn't figure out how to add parens to scope the '/2' across multiple chain elements.

So, can anyone please help with the jQuery equivalent to var margin = 'calc((100% - ' + legendWidth + 'px) / 2)'; ?

Simon M · Answer 1 · 2013-05-27T06:32:39.980

0

This might work:

$(document).ready(function () {
    var legendWidth = $('#titleInner').outerWidth();
    var legendParentWidth = $('#titleInner').parent().outerWidth();
    var margin = (legendParentWidth - legendWidth) / 2;
    $('#titleInner').css('margin-left', margin + 'px');
    $('#titleInner').css('margin-right', margin + 'px');
});

Or with chaining:

$(document).ready(function () {
    var legendWidth = $('#titleInner').outerWidth();
    $('#titleInner').css('margin-left', '100%').css('margin-left', function(){
        return (($('#titleInner').css('margin-left') - legendWidth) / 2) + 'px';
    });
    $('#titleInner').css('margin-right', '100%').css('margin-right', function(){
        return (($('#titleInner').css('margin-right') - legendWidth) / 2) + 'px';
    });
});

edited May 27 '13 at 06:32

answered May 27 '13 at 06:23

Simon M

2,931
2
22
37

Good idea. Works in IE9 but not IE7/8 unfortunately. – Dhaust May 27 '13 at 06:29
@DavidHAust Quick question: Are you using the 2.x release of jQuery? – Simon M May 27 '13 at 06:34
No, the 1.8.1 release. You think that would make a difference? – Dhaust May 27 '13 at 06:37
Yes, the 2.x release doesn't work on IE6/7/8 at all... So if you were using that, it would explain why my code didn't work ;) – Simon M May 27 '13 at 06:39
Your chaining version doesn't work either. Forces content off the right side of page. Does the chaining get evaluated left-to-right? – Dhaust May 27 '13 at 06:40
re: 2.x. hehe. Wish that was my problem ; ) – Dhaust May 27 '13 at 06:40
@DavidHAust What margin values are given to `#titleInner` after this code is run? (Also, chaining should be evaluated left-to-right...) – Simon M May 27 '13 at 06:43
When run with your chaining, left and right are both 100% according to IE9 DevTools. – Dhaust May 27 '13 at 06:46
It's like the function in the second chain element returns zero, or it's not being evaluated correctly. – Dhaust May 27 '13 at 06:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30670/discussion-between-david-haust-and-simon-m) – Dhaust May 27 '13 at 06:47

Convert CSS calc() function to jQuery for expanded browser support

1 Answers1