CODEWITHSUNDEEP
jquerycssmobilejquery-mobile
Constantino
Constantino

Reputation: 31

How to ignore all CSS elements in jquery mobile

I want to use my own CSS on a mobile webpage, but also use jQuery mobile for a menu slide.

How can I ignore ALL their CSS elements?

I know data-role="none" attribute would work, but can't apply it to all my elements.

I also tried including my CSS after jQuery CSS, but it didn't work.

Upvotes: 2

Views: 810

Answers (2)

Jasper
Jasper

Reputation: 76003

You can set the autoInitializePage option to false in a mobileinit event handler so jQuery Mobile won't automatically initialize anything. You can then initialize a single widget or set of widgets by calling .trigger("create") on their parent elements.

Documentation: http://jquerymobile.com/demos/1.1.1/docs/api/globalconfig.html

Here is a demo: http://jsfiddle.net/bBTtN/1/

Note that you need to bind to the mobileinit event in the proper place, after jQuery core has been included but before jQuery Mobile has been included.

For example:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).on("mobileinit", function () {
    $.mobile.autoInitializePage = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

Also note that by default, jQuery Mobile sets visibility : hidden on the <body> element, so you'll need a CSS rule to overwrite that:

body {
    visibility : visible !important;
}​

Upvotes: 2

Michal Klouda
Michal Klouda

Reputation: 14521

Don't include their css.

Upvotes: 1

Related Questions