i have a website that uses screen.css as main CSS file. I added this for monitors with a 1024+ resolution.
$(document).ready(function(){
if(screen.width > 1024) {
$('link').attr('href','hi-res.css');
}
});
The problem is that hi-res.css is replacing screen.css... i don't want to replace it, i just want to load an additional css in that case. Any ideas? Thanks.
Append it to your head:
$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");
You want to .append :o)
$(document).ready(function(){
if(screen.width > 1024) {
$('head').append('<link href='hi-res.css' type='text/css' rel='stylesheet' />')
}
});
Try this.. instead of replacing append one.
$('head').append($('<link>').attr('href','hi-res.css'));
You might want to check out the following link:
