1

I have been tasked to alter the design of a web application build around/utilizing jQuery Mobile, so that it fits a desktop browser better. I don't want to just remove all jQuery Mobile right away, but rather do the transition over time. The whole web application is using one page with a bunch of subpages, so I've made a new page using the same subpages for the desktop version, since this allows me to use different css files for the page.
My problem is that all the css I apply to the 'non-mobile' pages, gets overridden by jQuery Mobile (a bunch of css files). As I said I don't actually want to just remove these css files all at once, since I would be left with a raw html page without pagetransitions between subpages etc. - I might even want to keep some of the jQuery css in the long run, like the header for instance.
The main problem I see right now, is that a lot of the elements gets given class attributes like ui-btn, ui-select etc. without me actually declaring that in the html. This means that even thought I have a css file that defines how a button should look, jQuery Mobile somehow adds ui-btn and a bunch of other things to the class attribute at runtime - ultimately overriding my .button class or ending up with some sort of mix.

My question is quite generic, as I have a LOT of code and have no idea what to reference; how do I make sure my elements only gets styled by the classes I specifically assign?

Essentially I want to keep my jQuery Mobile, but have stuff like ui-btn as a standard css class selector (instead of this magical thing that ALL buttons apparently inherit from by default), so I would have to actually declare class="ui-btn" for the element to inherit that styling.

Let me know if this is unanswerable without some code references, I was just hoping for some general and generic tips :)

Rasmus Eskesen
  • 236
  • 1
  • 15
  • I am not much of a designer, but it seems to me that what you actually need is a page that works well in both desktop and mobile environment, rather than two pages. One idea I get is to get the HTML generated in the end for your page and then merge that design with the original HTML, remove jQuery Mobile and use regular jQuery and then compare how the jQuery Mobile version compares with the new one. Then work on the page so that it works best on desktops, too. – Siderite Zackwehdex Apr 11 '16 at 07:54
  • After reading bunch of your lines, only one suggestion : use custom class where both css are overriding and if needed then use !important. – Leo the lion Apr 11 '16 at 07:54

2 Answers2

2

link you css files after JQuery mobile files and use !important on your css to force the browser to use them like:

color: red !important;
A7S
  • 141
  • 1
  • 8
  • Interesting... Modifying the order in which the css files are linked might actually not be a bad idea. Currently I just link to a bundle containing ALL the css files at once. And I guess I _could_ add `!important` to all my custom classes that I want higher priority than jqm. – Rasmus Eskesen Apr 11 '16 at 08:03
  • 1
    I hope it works for u .. and for the order I noticed that the latest css file rule overrides what is before ... maybe that is why it is called cascading style sheet! – A7S Apr 11 '16 at 08:05
  • Cascading is basically referring to cascading user-agent, user and web-author style sheets. – sabithpocker Apr 11 '16 at 08:58
  • found this [http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css] – A7S Apr 11 '16 at 09:14
2

Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the document.ready event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.

When jQuery Mobile starts, it triggers a mobileinit event on the document object.
Try finding out where that happens in your code, and possibly stop it from happening in the case where you're in a desktop browser.

EDIT: It is most likely done in your jquery-mobile.js file, and usually scripts are linked as follows: 

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Try altering this order, so your custom scripts are loaded after jquery-mobile.

Alexander93
  • 36
  • 3