1

This fiddle provides a stripped-down example of what I'm trying to achieve. A lot is missing, but all relevant code is there.

Take a look at this fiddle. The goal is that the pink box fills up the space that's available in width (with a gap defined in CSS by margin-left) and that it has the same height as the yellow part. Unfortunately only the first property (min-height) is applied.

$(".banana + .strawberry").css({
    "minHeight": function () {
        var $this = $(this),
            banana = $this.prev(".banana"),
            bh = banana.outerHeight();
        return bh;
    },
    "width": function () {
        // Many variables, but they allow a highly
        // customized CSS file
        var $this = $(this),
            margin_l = parseInt($this.css("marginLeft"), 10),
            margin_r = parseInt($this.css("marginRight"), 10),
            padding_l = parseInt($this.css("paddingLeft"), 10),
            padding_r = parseInt($this.css("paddingRight"), 10),
            border_l = parseInt($this.css("borderLeftWidth"), 10),
            border_r = parseInt($this.css("borderRightWidth"), 10),
            parent = $(this).parent(),
            pw = parent.width(),
            banana = $this.prev(".banana"),
            bw = banana.outerWidth();

        console.log(margin_l);
        return (pw - bw - margin_l - margin_r - padding_l - padding_r - border_l - border_r);
    }
});

For some reason all browsers accept this code, however IE8 doesn't. On my website I'm using jQuery 1.11.2. I tested IE8 in emulation mode. I also tried alerting some text inside the function that ought to return the right value for width, but even that doesn't work. Can't you stack CSS properties in jQuery with IE8 that all depend on a function to return a value?

10

1 Answer 1

0

IE8 and lower return "auto" (default value) on $this.css("marginRight") and "medium" on $this.css("borderRightWidth") and $this.css("borderLeftWidth") so parseInt("auto") and parseInt("medium") will return NaN
you can set the default value of those properties on CSS to 0 like this

.strawberry {
    background: #FC5A8D;
    margin-left: 10px;
    padding: 8px;
    margin:0;
    border:0;
}     

or you can add || 0 after each parseInt() so each var defaults to 0 instead of NaN like this

$(".banana + .strawberry").css({
    "minHeight": function () {
        var $this = $(this),
            banana = $this.prev(".banana"),
            bh = banana.outerHeight();
        return bh;
    },
    "width": function () {
        var $this = $(this),
            margin_l = parseInt($this.css("marginLeft"), 10)||0,
            margin_r = parseInt($this.css("marginRight"), 10)||0,
            padding_l = parseInt($this.css("paddingLeft"), 10)||0,
            padding_r = parseInt($this.css("paddingRight"), 10)||0,
            border_l = parseInt($this.css("borderLeftWidth"), 10)||0,
            border_r = parseInt($this.css("borderRightWidth"), 10)||0,
            parent = $(this).parent(),
            pw = parent.width(),
            banana = $this.prev(".banana"),
            tw = banana.outerWidth();        
            return (pw - tw - margin_l - margin_r - padding_l - padding_r - border_l - border_r);
    }
});

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.