Question

Regarding the browser version, the player height should change

if older then ie9 
  //height is fixed
else 
  //height is auto

The above code is working but, it’s the worst thing I’ve seen, because I do repeat myself again and again, when only one line changes on this conditional.

<script type="text/javascript"> 
    $(document).ready(function() {

        if ($.browser.msie && $.browser.version.substr(0,1)<9) {
            $("#jquery_jplayer_1").jPlayer({
            ready: function () 
            {
                $(this).jPlayer("setMedia", 
                {
                    m4v: "/video/videoK.mp4",
                    ogv: "/video/videoK.ogg"
                }).jPlayer("play");

                $('article.about-k').hide();
                olark('api.box.hide');
            },
            swfPath: "/scripts/",
            supplied: "m4v, ogv",
            size: {
                width: "100%",
                height: "400px" // THE ONLY CHANGE IS HERE
            },
            backgroundColor: "#fff",
            click: function() {
                $(this).jPlayer("play");
            },
            ended: function() {
                $('.jplayer-k').hide();
                $('article.about-k').show();
            }
        })
      } else {
        $("#jquery_jplayer_1").jPlayer({
            ready: function () 
            {
                $(this).jPlayer("setMedia", 
                {
                    m4v: "/video/videoK.mp4",
                    ogv: "/video/videoK.ogg"
                }).jPlayer("play");

                $('article.about-k').hide();
                olark('api.box.hide');
            },
            swfPath: "/scripts/",
            supplied: "m4v, ogv",
            size: {
                width: "100%",
                height: "auto" // THE ONLY CHANGE IS HERE
            },
            backgroundColor: "#fff",
            click: function() {
                $(this).jPlayer("play");
            },
            ended: function() {
                $('.jplayer-k').hide();
                $('article.about-k').show();
            }
        })
      }

    });
</script>

As noted by the comments, the only change is on ONE single line.
How can I remake this, without stupidly repeating myself ?

 height: "auto" //THIS IS THE ONLY DIFFERENCE!

Please advice

Answer 1

That’s quite simple with a ternary operator:

$("#jquery_jplayer_1").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4v: "/video/videoK.mp4",
            ogv: "/video/videoK.ogg"
        }).jPlayer("play");

        $('article.about-k').hide();
        olark('api.box.hide');
    },
    swfPath: "/scripts/",
    supplied: "m4v, ogv",
    size: {
        width: "100%",
        height: ($.browser.msie && $.browser.version.substr(0, 1) < 9)
          ? "400px"
          : "auto"
    },
    backgroundColor: "#fff",
    click: function () {
        $(this).jPlayer("play");
    },
    ended: function () {
        $('.jplayer-k').hide();
        $('article.about-k').show();
    }
})

If you don’t like that (e.g. because of a more complex condition), you still can use a simple variable:

var height = "auto";
if (/* IE too old */)
    height = "400px";
$…({
      … // huge config object
      height: height,
      …
});