I created a sample web app using Spring Roo and embedded jQuery Mobile 1.1 sample code into a empty jspx page. Below i pasted in the code i used.
This does display just fine.
The problem is that I am unable to scroll up or down.
Does anybody have an idea of what could be preventing the ability of the page to be scrolled or down?
<div>
<div data-role="page" id="mylist" data-cache="never">
<div data-role="header">
<h1>Persons</h1>
</div><!-- /header -->
<div data-role="content">
<h2>News</h2>
<ul>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
<li>Test code.</li>
</ul>
<div class="clear" style="height:20px;"></div>
</div><!-- /content -->
</div><!-- /page -->
I am updating this so the question can be flagged as answered. Thanks to bhagyas .
As I commented in the original question to bhagyas I was able to fix this problem by eliminating conflicting js files.
Related
I wanna add flip switch at right side of header using jquery mobile. I tried this but it goes to next line.
<div data-role="header" >
<a href="#main-panel" class="ui-btn ui-btn-c ui-btn-corner-all ui-alt-icon ui-nodisc-icon ui-btn-icon-notext ui-icon-bars" ></a>
<h1>Flowers</h1>
<fieldset>
<div data-role="fieldcontain" class="">
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch" data-on-text="True" data-off-text="False">
</div>
</fieldset>
</div>
All you need to do is to place your flipswitch inside of a "control-group" element.
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch" data-on-text="True" data-off-text="False">
</fieldset>
I want to create a mobile page for mobiles and tablets. When the user uses a tablet (larger screen), the left panel-navigation should stay open all time. When the user uses a mobile phone (smaller screen) there should be only a button top-left to open the panel.
Jquery has a demo, but obviously it is not working:
http://demos.jquerymobile.com/1.4.5/panel-responsive/
I tried the demo on JSfiddle but it also did not work:
<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page">
<div data-role="header">
<h1>Panel responsive</h1>
Menu
Add
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Panel responsive</h1>
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
<div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->
<br>
<br>
<br>
<br>
<br>
Back
</div><!-- /content -->
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel">
<ul data-role="listview">
<li data-icon="delete">Close menu</li>
<li>Accordion</li>
<li>Ajax Navigation</li>
<li>Autocomplete</li>
<li>Buttons</li>
<li>Checkboxes</li>
<li>Collapsibles</li>
<li>Controlgroup</li>
<li>Dialogs</li>
<li>Fixed toolbars</li>
<li>Flip switch toggle</li>
<li>Footer toolbar</li>
<li>Form elements</li>
<li>Grids</li>
<li>Header toolbar</li>
<li>Icons</li>
<li>Links</li>
<li>Listviews</li>
<li>Loader overlay</li>
<li>Navbar</li>
<li>Navbar, persistent</li>
<li>Pages</li>
<li>New</li>
<li>Popup</li>
<li>Radio buttons</li>
<li>Select</li>
<li>Slider, single</li>
<li>New</li>
<li>New</li>
<li>New</li>
<li>Text inputs & textarea</li>
<li>Transitions</li>
</ul>
</div><!-- /panel -->
<div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
<form class="userform">
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="ui-grid-a">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b">Save</div>
</div>
</form>
</div><!-- /panel -->
</div><!-- /page -->
<div data-role="page" id="panel-responsive-page2">
<div data-role="header">
<h1>Landing page</h1>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
<p>This is just a landing page.</p>
Back
</div><!-- /content -->
</div><!-- /page -->
http://jsfiddle.net/84m0b2au/
I searched a long time, found a half-working JS solution, but the panel does not stay open when i change the pages, only when i reload the page. I found some similar questions, obviousl it is an issue, but nowhere is a (for me) working solution.
So my question is, how can i solve the problem. The best way is to find a CSS-only solution.
Thank you very much for your tips.
I have a simple page with a select menu (long dialog), an href dialog call and a tabbed content.
When I select an option the page came back and the header goes into a loop showing a new row for each autorefresh, while the page shows the tabs don't tabbed.
I use the same header on various pages but I get the problem only with this tabbed page.
Any tips?
<div data-role="page" > <!-- start header -->
<div data-role="header" data-theme="b" data-position="fixed">
Menu
Help
<h1 style="margin:0;padding:0">
<form action="" name="selectloc" method="post" data-ajax="false">
<input type="hidden" name="setssid" value="1">
<select name="formname" data-mini="true" id = "selectlocation" data-native-menu="false" data-force-dialog="true" >
<option value="n1" >label1</option>
<option value="n20" >label20</option>
</select>
</form>
<script>$('select').change(function() {
$(this).parents('form').submit();
});</script>
</h1>
</div>
<!-- /header -->
<div data-role="content" id="container" data-content-theme="d" >
label
</div>
<div id="tabs" data-role="tabs" style="max-width:600px;margin:auto;" >
<div data-role="navbar">
<ul>
<li>Weekly</li>
<li>Montly</li>
<li>Yearly</li>
</ul>
</div>
<div class="ui-body-a ui-content" id="weekly" > ...... </div>
<div class="ui-body-a ui-content" id="montly" > ...... </div>
<div class="ui-body-a ui-content" id="yearly"> ...... </div>
</div><!-- //end tabs -->
<!--- start footer -->
<div data-role="footer" data-position="fixed" data-theme="b"> .... </div>
<!-- /footer -->
<!-- panels-->
<div data-role="panel" id="nav-panelmenusx" data-display="overlay"> .... </div>
<div data-role="panel" id="nav-panelinfodx" data-position="right" data-display="overlay">...</div>
</div> <!-- // end page -->
</body>
</html>
I am creating a simple page with a number of tabs, and inside each tab there will be 3 sections which I am using an accordion for as this is the best solution for what I want. Everything works perfectly on the first tab, the accordion operates as it should and the content is rendered fine.
When I click on tab2 the content is rendered as just text with no accordion applied. I have used the dev tools and the accordion class is not being applied to the accordion div in tab2 for some reason. It may be that I am missing something really fundamental here but I would appreciate any help.
Excuse the basic code layout here but for demonstration purpose this is what the html might look like.
<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
<ul>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div id="tabs-1"><!-- Start of tabs-1 -->
<div id="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-1 -->
<div id="tabs-2"><!-- Start of tabs-2 -->
<div id="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>
You have multiple divs with the same id, namely accordion. Either name them seperately, or use a class with your selector. For example:
<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
<ul>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div id="tabs-1">
<div class="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-1 -->
<div id="tabs-2"><!-- Start of tabs-2 -->
<div class="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>
And then:
$( ".accordion" ).accordion();
You have two <div>s with the same ID ("accordion"). I would recommend changing them to use a class of "accordion" rather than an ID, then change your jQuery to apply the accordion effect to <div.accordion>.
whenever my list is small the jquery leave some white space after few theme space it happens only in portrait orientation in the IPAD and works fine in landscape and portrait mode in browser and landscape mode in IPAD
here is a sample of one page-role my portrait resolution is 768 X 1024
<div data-role="page" id="videos" data-theme="e">
<link rel="stylesheet" href="videos.css" /><!-- my custom css -->
<div data-role="header" data-position="fixed" data-theme="e"><!-- header -->
<div class="ui-grid-b center-align">
<div class="ui-block-a classBlock pad" data-class="1">
<a data-rel="external" data-ajax="false" href="./FingerTips/index.html" data-role="button" class="revise-menus">Collection</a>
</div>
<div class="ui-block-b classBlock" data-class="2">
<div class="titles">Store</div>
<div data-role="controlgroup" data-type="horizontal" >
<a href="#booksnsubjects" data-role="button" >Books</a>
<a href="#appview" data-role="button" >Apps</a>
Video
</div>
</div>
<div class="ui-block-c classBlock" data-class="1">
<img src="images/cart.png" id="linkcart">
<div id="cart-item"></div>
</div>
</div><!-- /grid-b -->
</div>
<div data-role="content"><!-- content -->
<ul data-role="listview" data-theme="c" id="class-lists">
<li><a data-class="IV" href="#subjects" data-transition="slide">VI</a></li>
<li><a data-class="IIV" href="#subjects" data-transition="slide">VII</a></li>
<li><a data-class="IIIV" href="#subjects" data-transition="slide">VIII</a></li>
<li><a data-class="IX" href="#subjects" data-transition="slide">IX</a></li>
<li><a data-class="X" href="#subjects" data-transition="slide">X</a></li>
<li><a data-class="XI" href="#subjects" data-transition="slide">XI</a></li>
<li><a data-class="XII" href="#subjects" data-transition="slide">XII</a></li>
</ul>
</div><!-- content -->
</div><!-- /page -->
please help me out of it is i am doing something wrong
i found solution: using new version of jquery mobile JS solves the issue