current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 11 down vote favorite
4

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.

share|improve this question

4 Answers 4

up vote 23 down vote accepted

Append it to your head:

$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");
share|improve this answer
    
worked fine! thanks! –  andufo Jul 2 '10 at 20:29
up vote 1 down vote

Try this.. instead of replacing append one.

$('head').append($('<link>').attr('href','hi-res.css'));
share|improve this answer
up vote 1 down vote

You want to .append :o)

$(document).ready(function(){
    if(screen.width > 1024) {
       $('head').append('<link href='hi-res.css' type='text/css' rel='stylesheet' />')
    }
 });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.