Prevent JQuery-Mobile add div element automatically

Question

I have div element originally like this..

<body>
    <canvas id="pageflip-canvas"></canvas>
    <div id="pages">
        <section>

        </section>
    </div>
<script type="text/javascript" src="index.js"></script>
</body>

but when I run with JQuery-Mobile It become like this

<body class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-url="/C:/AppServ/www/guiBook2/index.html"
 tabindex="0"  class="ui-page ui-body-c ui-page-active" style="min-height: 681px;">
    <canvas id="pageflip-canvas" width="1366" height="681"></canvas>
    <div id="pages">
        <section style="z-index: 1;">

        </section>
    </div>
<script type="text/javascript" src="index.js"></script>

</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body>

How to prevent it create these DIV I'm ok with class css

but additional div make content width change.

Thank In Advance

You can't control this because JQM converts it into a page via Ajax, to become accessible. You can wrap your canvas with `data-role=content` and adjust your canvas CSS. — Omar, Jun 20 '13 at 07:58

score 5 · Answer 1 · edited May 23 '17 at 10:28

This can't be done. If jQuery Mobile is used it will take over the web application. This is to be expected because jQuery Mobile is not a classic framework. Because everything is done via ajax every content MUST be wrapped into DIV with an attribut data-role="page". If this DIV dont exist like in this question it will be created automatically and it cant be prevented.

There are several methods that will prevent content been styled with jQuery Mobile CSS but nothing can prevent content been wrapped into data-role="page" DIV.

If you want to learn more about these methods take a look at my ARTICLE, to be transparent it is my personal blog. Or find it HERE. Everything is described in chapter called: Methods of markup enhancement prevention.

Bottom DIV-s are also needed because they are used too indicate page/content loading, basically it is a necessary jQuery Mobile component. But it can be removed if AJAX is turned off. But what is the point of jQuery Mobile if AJAX is turned off.

There's one last thing to consider, if only some jQuery Mobile functionalities are needed then it is possible to rebuild framework so it can included only needed functionalities. This link can be found HERE, don't forget to select needed jQuery Mobile version.

Prevent JQuery-Mobile add div element automatically

1 Answers1