CODEWITHSUNDEEP
jquerycss
trapper
trapper

Reputation: 11993

jQuery to only run when mobile CSS has loaded?

I am loading my mobile only CSS using a media query such as

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" />

but in addition to these CSS changes I also need to reorder part of the HTML such as

$('#moveOne').after($('#theOther');

I only want this move to be actioned if the browser has definitely loaded the mobile.css. So I thought of adding some odd CSS value inside mobile.css and then checking the value of it like so

if($'#notVisible').css('color') == 'red') {
    $('#moveOne').after($('#theOther');
}

Is there a better way of doing this?

Upvotes: 2

Views: 235

Answers (2)

Jashwant
Jashwant

Reputation: 29005

I think, what you are doing is absolutely good.

But a more logical way would be setting width instead of color.

if($'#notVisible').width() == '500px') {
    $('#moveOne').after($('#theOther');
}

Also, you can try matchMedia.js

Look here Using_media_queries_from_code too.

Upvotes: 1

Phil
Phil

Reputation: 164813

You could always use the same logic as your media query

if (document.documentElement.clientWidth <= 480) {
    $('#moveOne').after($('#theOther');
}

Upvotes: 1

Related Questions