Question

I have been working on a site that requires cross browser compatibility (including earlier IEs) and I have a sidebar that uses gradients but it turned out that it is about a million times easier to use a set background image, I have the height of the image repeating properly by taking the height of it based off the main container but I want to do the same the width of it.

I am aware of how to stretch the div based on the size of others but I want to know how I can have a conditional statement that will repeat the image y until the end of the div so it doesn’t just move the set image!

I am achieving the height based repeating using this:

<script type="text/javascript">

var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);


</script>

I am attempting to use this code:

<script type="text/javascript">

var divWidth = $('#SecondaryContent').width() + 1;


if (divWidth.width() > 200) {
    alert('hello');
 $('#SecondaryContent').css('background', 'url(../images/background_slice.png)', 'repeat-x 18% 0%');
}


</script>

However it seems unable to find anything within the div.

Answer 1

Just thought I would update that I managed to get this working using this:

<script type="text/javascript">

$(document).ready(function () {
    divExpander();
    divLineExpander();
    divWindowLineExpander();
})

function divExpander() {
    var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);
}

    function divLineExpander() {
        var theWidth = $('#SecondaryContent').width() + 2;
        $('#Navigation').css('min-width', theWidth);
    }

$(window).bind("resize", divWindowLineExpander);
function divWindowLineExpander(e) {
    var theLineWidth = $('#SecondaryContent').width() + 1;
    $('#Navigation').css('min-width', theLineWidth);
    }

 </script>