Question

I’m having a problem and I can’t seem to find the reason for the issue I’m a little new to both JavaScript and jQuery.

but by using the below and then resize the page instead of simply adding the size of the image to the image src is is added repeatedly e.g responsive_Course_2_2_large_large_large_large_large_large.png instead of Responsive_Course_2_2_large.png

$(window).resize(function () {

    if ($(window).width() < 600) {

        if (ImageSize != 'stand') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
                $('#' + value).attr('src', Image);
                $('#' + value).attr("ImageSize", 'stand');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
        }
    }
    else if ($(window).width() > 960 && $(window).width() < 1280) {
        if (ImageSize != 'large') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');
                $('#' + value).attr('src', ImageLarge);
                $('#' + value).attr("ImageSize", 'large');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back_Large.png)');
        }
    }
   else {
        $.each(imgIds, function (index, value) {
            Image_src = $('#' + value).attr('src');
            Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
            $('#' + value).attr('src', Image);
            $('#' + value).attr("ImageSize", 'stand');
        });
        $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
    }
});

Answer 1

This is a slightly alternative approach, but have you considered instead setting a class on the body when the window is resized, and then having multiple CSS classes for the appropriate sizes? I think it would be slightly neater, and would also mean the JavaScript and CSS are less-tightly coupled together. It would also mean that you could use the size to determine other aspects of elements on the page.

1. Page resize
2. Width is less than 600
   • Set the body class to small
3. Width is between 960 and 1280
   • Set the body class to medium
4. Width is greater than 1280
   • Set the body class to large

This would then mean that within your CSS you could do:

body.small #PageContentRow
{
    background-image: url('/my-image_small.png');
}
body.medium #PageContentRow
{
    background-image: url('/my-image_medium.png');
}
body.large #PageContentRow
{
    background-image: url('/my-image_large.png');
}