Now
after the page is displayed with footer, when I click on the
empty page area(on brown area in the content, refer screenshot),
three footer items get disappeared. When I click again, they
again reappear. This continues.
I
dont know where I have done mistake? Could please someone help?
Please refer the screenshots to get better idea of the issue.
Thanks in advance.
Is
updating to jquery mobile 1.4.3 can help in this issue?
<li><img src="../../images/abc.png><h2>Some Name</h2><p>Some Description</p><p>Generated On: 01-02-2013</p><p>Valid Till: 01-02-2014</p></li>
</ul>
Code to append <li> to <ul> is written in jquery in a loop in pagebeforecreate event. At max 100 <li> can be added. Now when Page is displayed and I scroll down, lay out distorts. It seems that page is not able to draw the list fast enough. If I scroll slowly, it works better. Once the entire page is scrolled, if I scroll again, it works better(not best).
Am I doing something wrong. Please advise. I have attached screen shots for reference.
But Now This code never executes. What may be the issue? It is the same code I just changed the event name. Here 'viewChartPage' is the class for JQM page like:
I generated themes using themeroller, but not able to figure out that which text color and text-shadow color is being applied to the watermark text in text inputs. I am refering to the watermark, generated using placeholder attribute. Could someone help?
Now I created a new JQM 1.4.2 theme using themeroller. In the downloaded zip file I don't have all these css files(jquery.mobile.inline-svg-1.4.2.min.css, jquery.mobile.inline-png-1.4.2.min.css, jquery.mobile.external-png-1.4.2.min). So how to apply the downloaded theme using grunticon loader.
The downloaded zip file contains following files: customTheme.css customTheme.min.css jquery.mobile.icons.min.css images folder
One more doubt is, In my solution(The code snippet I have given above) I didn't include 'jquery.mobile.icons.min.css' and 'jquery.mobile.structure-1.4.2.css'. But while downloading the theme from themeroller, it guided me to include it. Should I include it? Which place should I include it in my solution. Is the sequence of css files and their inclusion incorrect in my solution.
Now when I submit the form, I am able to get the image in my servlet code and process it. But when the response is send back, I am shown a blank page with "http://localhost:8080/JQMProject/mobile/uploadServlet" URL, which is obvious.
This is my issue. I want to show a meaningful JQM page with server response. As I am using data-ajax="false"(to make file upload work), I don't know where to handle server response and navigate to a meaningful page.
I might be missing some feature of jquery mobile. Please help.
This hyperlink text 'Notifications' gets truncated on the mobile screen(I observed in chrome emulator). After reviewing css found out that css "display: block;" was causing this truncated text.
I do not want this truncation. I tried to set different values for ".ui-navbar li .ui-btn" class, but with no help.
Please suggest what value should I set to avoid truncation in my css:
.ui-navbar li .ui-btn { display: <What value???>; }
Now In my multiplePage.html when I click on a link having internal references, it does not navigate. Nothing happens.
multiplePage.html:
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Multi-page</h1>
</div><!-- /header -->
<div role="main" class="ui-content" >
<h2>One</h2>
<p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.</p>
<p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
<p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
<p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<h2>Popup</h2>
<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
I am using jquery.mobile-1.3.2.js and jquery-1.10.2.js. I needed much flexibility in my application like 1. Be able to change the theme at runtime (from server) 2. any component inside the body might change as per the user logged in. 3. different ads at different locations on the page as per user's profile.
Due to these(and some other reasons), I ended up in following design: I create the complete html page(except the main <div> in html body) using the server response through javascript in pagebeforecreate listener(using $(pageSelector).append(html_string)).
Every thing works fine. But I face some unexpected behavior when i press browser's back button many times(some times a blank page occurs or some times a not enhanced page occurs). For each generated html tag I have a separate id as well(implemented using a counter in javascript). I created these IDs because I read in some post that having same IDs might also be an issue. I read in https://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help that using IDs is not good. So I am confused here as well.
Could u suggest that is my design has a loophole or there is something extra as well which I should be taking care of.
I am using jquery mobile 1.3.2 for a native mobile application. It interacts with a server side component which is written in java ee. when I press "cntrl + f5" (to refresh the javascripts on the login page) sometimes my first page(Login page) first loads(appears) and then gets disappeared automatically, leaving a blank page.
I am not able to find the reason for the same. In chrome developer tools it does not show any error. Could any one help me to find the reason for this strange issue?
Please let me know if any additional detail is required. I am afraid if my users would struggle to get the login page itself