Andrew
Andrew

Reputation: 241

Using jQuery Mobile 1.4.4

Why is it when checking/adding jQuery Mobile 1.4.4 to the current code, the styling and contents outside of the body (used for a hidden slide out menu) change or don't display at all?

I am trying to become more familiar with touch features and incorporate those features into code/design.

An example of the current jsFiddle.

When excluding jQuery Mobile 1.4.4 the code functions and appears(design/styling) as it should. However, upon "checking" jQuery Mobile 1.4.4 the code functions but the styling is thrown off completely.

Ideally, I would like to add touchstart features, as well as swipe events to the code.

button.addEventListener('touchstart', function(event){
    e.preventDefault();
    menuOperation();
});

Upvotes: 0

Views: 50

Answers (1)

Kolban
Kolban

Reputation: 15256

The jQuery mobile framework is an environment for building applications that run on mobile devices. Since mobile devices have a dramatically different form factor and user interaction pattern than a classic desktop browser, the stylings of items on the screen have to change. Since a mobile device has no "mouse", buttons must be large enough for a finger to click. In addition, other current style practices come into play such as selectable lists items span the width of the display. Since these are such common practices, when one makes the choice to use jQuery Mobile, the complete "look and feel" of the web page being built changes to reflect these design selections.

When you include jQuery Mobile in your project that previously didn't include it, you will indeed find that your project's style has been radically altered to reflect the design intent of mobile apps. Have a look through the gallery of demos of how things look when using jQuery Mobile that can be found here:

http://demos.jquerymobile.com/1.4.5/

Hopefully looking at this will give you the belief that everything is actually running as it should.

Upvotes: 1

Related Questions