In my header i included
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css">
and whenever I use for example
data-role="page" the expected effect does not acquire.
why would that happen?
edit: https://jsfiddle.net/f0eurafv/1/ notice the text input in the login form
Best How To :
In reference to your fiddle-link (https://jsfiddle.net/f0eurafv/1/):
The problem is that you have bound a click-function to your
<h2>-tags in which you manually fadeIn/fadeOut your different pages. In this case jQuery-mobile will not do the work for you (switching to the other page) and as a side effect it will not render the elements in the page correctly (the inputs for example).
You can try to call the changePage()-function of jQuery-mobile in your click-function instead and find a way to change the transition-effect (http://demos.jquerymobile.com/1.4.5/transitions/):
Or you put
<a>-tags with an
href-attribute to the page-ID which should be opened around your links:
<div id="sliderA" data-role="content"><h2 id="loginA"><a href="#loginform">Login</a></h2></div>