Question

I am trying to have jQuery append a Wide.css stylesheet to the page whenever the browser window is over 1360px and remove the file whenever it is less then that.

Currently, the main stylesheet only has wrapper defined with gray background and 900px width and the other, Wide.css, has background red and wrapper width 1300px.

The problem I am facing is that it works fine with refreshing the page, however, whenever the window is simply resized, the function does not get called(or there is some other issue with the code).

The script:

$(document).ready(function () {
    stylesheetToggle();
    $(window).resize(stylesheetToggle);
});

function stylesheetToggle() {
    if ($('body').width() > 1360) {
        $('<link rel="stylesheet" href="Content/Stylesheets/Wide.css" type="text/css" />').appendTo('head');
    } else {
        $('link[href=Content/Stylesheets/Wide.css]').remove();
    }
}

Answer 1

You have a syntax error, caused by the / characters in your selector. You need to put quotes around the href attribute value in your selector:

$('link[href="Content/Stylesheets/Wide.css"]').remove();