CODEWITHSUNDEEP
jquerycssjquery-mobilemaster-pagesmedia-queries
A_AR
A_AR

Reputation: 508

Making jQuery mobile work for only menu rather than the entire website

I am creating a responsive web design using media queries. For the mobile version I use a drop down menu using jquery mobile.

I have included required links to the CDN, including the jquery-mobile.css. The problem is that this CSS is getting automatically applied to all my tags for the entire website.

The menu bar is in the master page so the .js and.css source file links are in that page as well.

I want jquery mobile css to be applied only to the menu bar and not the entire website

I did a lot of research on this but no luck. I have been stuck here from past three days. Can someone please help me?

Edit:

    <head id="Head1" runat="server">


          <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script type="text/javascript">
    $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select, input, a, div, p";
    });    
</script>
<script src="../Scripts/jquery.mobile-1.2.0.js"></script>
        <link rel="stylesheet" href="../Styles/WebStyles.css" type="text/css" />

        <title>Management Software, Space Rental process for Antique Malls, POS Software</title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
</head>

This is the content in the head tag after Gajotres' suggestion.

Upvotes: 1

Views: 504

Answers (2)

A_AR
A_AR

Reputation: 508

In my circumstance, after a fair amount of research, I found that the best solution for my problem is to find out what style is affecting which element using firebug and then deleting it in the jQuery-mobile.css file (you have to download it instead of accessing the hosted file). It took me a while to do this.

Also IMHP it is better to use single framework to perform all your fancy jQuery work rather than many since finding the source of the conflict is very time consuming and tiring.

I am converting all my jquery plugins to work on jQuery mobile and so far things are going good. Although this takes time, jQuery mobile is awesome and worth converting I feel. The UI suits very well for the web site I am currently developing.

Finally, lesson learnt. Plan ahead.

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

This could be a problem, because you will not find a bullet proof solution.

  1. Tell jQuery Mobile not to apply styling to selected elements:

    $(document).bind('mobileinit',function(){
        $.mobile.page.prototype.options.keepNative = "select, a, input";
});

    Example: http://jsfiddle.net/Gajotres/jjETe/

    Note: mobileinit must be initialized in HEAD before jQuery Mobile library initialization, like this:

    <title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
    $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select, input";
    });    
</script>    
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

  2. Another solution is to use a data-role="none" attribute on all elements that you want to remain native. Here you can find more about this solution: http://jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html

  3. There is also a 3rd solution but I never managed to make it work. Customize jQuery Mobile framework and use only widgets you want to use: http://jquerymobile.com/download-builder/. Just select what you want.

So best solution is to use combine points 1. and 2. Prevent styling on all non drop down elements, and use data-role="none" on drop down elements that should look native.

Upvotes: 1

Related Questions