Yepnope & Modernizr screen.width Conditions

Question

I am trying to (locally) use Yepnope with Modernizr to load CSS & JS Files. So I can manage the files better, and code easily.

This is the currently layout:

Modernizr.load([
    {
        test: Modernizr.mq('all and (max-width: 1070px)'),
        yep: '/css/smartdevice.css','/js/smartdevice.js',
    }
    ,
    {
        test: Modernizr.mq('all and (min-width: 481px) and (max-width: 1069px)'),
        yep: '/css/tablet.css','/js/tablet.js',
    },
    {
        test: Modernizr.mq('all and (max-width: 1070px)'),
        yep: '/css/screen.css','/js/screen.js',
    }
]);

The I am fairly new to JS but I have used jQuery on may occasions. However they all load at once, is there anyway I can load the CSS files based on the px width? (ref above values). I am aware that you could do this server side, however in my position.

It has to be local side in js... I currently code in SCSS. Everything is fine that end, it is just a case of injecting the files/showing file on window width.

I presume that I need to add an if statement, but any help would be greatly provided!

-Neil

P.S I am running locally, on a new iMac using CodeKit & SCSS.

score 3 · Accepted Answer · answered Apr 29 '13 at 14:50

3

yep: '/css/smartdevice.css','/js/smartdevice.js', is illegal JS. If you want this to be an array, use yep: ['/css/smartdevice.css','/js/smartdevice.js'],. Anytime you see a comma inside a JavaScript object, pretend there's a newline, and you'll see what's going wrong here:

Modernizr.load([
{
    test: Modernizr.mq('all and (max-width: 1070px)'), // prop:val(=function)
    yep: '/css/smartdevice.css',                       // prop:val(=string)
    '/js/smartdevice.js',                              // ???
}
,...

answered Apr 29 '13 at 14:50

Mike 'Pomax' Kamermans

49,297
16
112
153

Thanks, would you know how to remove objects based on there media query above. I have still got issues with the code. It seems to load all the css files at once, not based on windows width... I also removed content (jquery .remove(); via complete) but that does not get invoked? – Neil Apr 30 '13 at 09:29
1

the code you showed will load several .css files at 1070, I don't know what you're testing on, or your full code, so I can't tell you why it does what it does. That said, loading files based on the browser width at load time is pretty bad, since people on desktop can resize their browser, and people on tablets/phones can change their screen orientation, changing the min/max width in effect. The whole point of media queries is to have several of them in one file, so that your site is responsive throughout, not just sized correctly once. – Mike 'Pomax' Kamermans Apr 30 '13 at 11:39
Yeah I know what you mean.. I initially wanted to load JS on media widths. Because I had jQuery FadeIn's and SlideDowns.. However and at a mobile css being used I had no need to invoke the js at that time... I suppose I got lazy and wanted to add the CSS at the same time. – Neil Apr 30 '13 at 15:25

score -1 · Answer 2 · edited Jun 11 '13 at 00:11

-1

Some suggestions:

Replace "all" with the label "only all"
Replace the "max-width: 1070px" in the first test with a mobile device width (320 etc)

edited Jun 11 '13 at 00:11

Linuxios

34,849
13
91
116

answered Jun 10 '13 at 23:51

Frank Krul

1
1

1

You don't need to write almostly everything in big font size. – gustavohenke Jun 10 '13 at 23:56

Yepnope & Modernizr screen.width Conditions

2 Answers2

Linked