I have html structure like this
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>header</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
next pagey
</div><!-- /content -->
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
<div id="p2" data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>header</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h1>Content</h1>
</div><!-- /content -->
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>Content</h1>
</div><!-- /footer -->
</div><!-- /page -->
But when i click on next page and next page comes in with auto-added back btn in header, when I click on back button previous page appears but footer dissappears..
in FF working ok, but not in ipad simulator
Getting fixed footers to work is a pain for the JQM team. I think it's just another little bug that is caused by unforseen circumstances. Well, nevermind...
A bit of insight:
Those darn mobile browsers have no support of fixed CSS positioning, so this is done with javascript and absolute position (and a ton of hacks - I bet)
This should already give you a clue...
If the behaviour isn't specific just to the emulator (quite possible!) and the problem remains after you fill the page with contents (I mean - finish writing the application) then all you need to do is to kickstart the code that repositions the footer. I'd do it like that:
$('div').live('pageshow',function(){ $(window).trigger('orientationchange') });
The orientationchange event should work. You can also try resize if orientationchange causes any new problems.
Related
The multipage is working, but I want to inject the footer code in every page container.
Page Code:
<div data-role="content">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
<div class="upage" id="uberpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
</div>
And the I just inject the footer code with some buttons (When device is ready):
$(".upage-outer").append('<div data-role="footer">Copyright + Buttons</div>');
This is the full footer code:
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_4" data-uib="jquery_mobile/footer" data-ver="0">
<div data-role="controlgroup" data-type="horizontal" class="brideButtonGroup">
<a class="widget uib_w_6" data-role="button" href="#mainpage" rel="external">Wetter</a>
<a class="widget uib_w_7" data-role="button" onclick="intel.xdk.device.launchExternal('http://wetter2.mt-labor.it.hs-worms.de/plot');">Mehr</a>
<a class="widget uib_w_8" data-role="button" href="#uberpage" rel="external">Über</a>
</div>
</div>
The code gets injected, but on the mainpage, the Buttons are not displayed; instead, there are plain text links. On the second page, everything is displayed very well. I can switch between the pages.
What did I do wrong?
edit: I used enhanceWhithin(), and its working. But when I click somewhere on the document, strange colors appear, which are caused by the class ".ui-fixed-hidden". Where does this come from?
edit2: https://jsfiddle.net/564f1fkf/ It's not exactly the same, but if you go to site 2 and then back to site 1 and click somewhere on the page, you should see the problem.
PS: See pictures
You have to call the enhanceWithin() method on data-role="content" element. This will enhance the newly added HTML into jQuery mobile format.
$("[data-role='content']").enhanceWithin();
I have an html file in my WEB-INF folder which can only be accessed by a servlet. Here is how my servlet forwards the request to that html page
ServletContext context= getServletContext();
RequestDispatcher rd= context.getRequestDispatcher("/WEB-INF/file.html");
rd.forward(req, resp);
My file.html has 2 data-role="page" but only the 1st data-role="page" is being rendered. Do you guys have any idea as to why only 1 of the 2 pages is being rendered by jquery-mobile. Here is a template of my file.html.
<div data-role="page" id="profile-page" data-dialog="true">
...
</div>
<div data-role="page" id="main-page">
...
</div>
So basically my servlet forwards the user to the file.html, could that be one of the reasons why the page is not being created.
In jQuery Mobile we can show only one page at a time, as each page occupies full visible height.
There is multipage template option available, but even there we can show only one page at a time, but we can link to other pages with help of navigation.
The sample code for multipage template from jQuery Docs
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p>Back to foo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
multipage demo
NOTE:
What you are trying to do is not possible with multiple pages. You
have to use single page and show/hide the specific divs as per your
requirement. You have to write your own logic, jQuery Mobile can't help in this scenario.
Reference:
jquery mobile official reference
I have a PhoneGap application wich uses a jQuery Mobile multipage layout. On every page (page A and page B) I have a navbar for switching between pages. No custom code involved. I also have a panel on every page which opens by clicking the 'new' button in the header.
Sometimes it happens that I hit the button (maybe to soft? or to fast?) to open to panel but the buttons just changes it state to "active" and the panel does not open. I cannot click the button anymore. When I change the page and go back (all by using the navbar) page A appears again and now the panel is opened. This is a strange behaviour but could be plausible. But trying to close it now is just impossible. Clicking one of the buttons in the panel is as inactive as clicking on the page itself. The whole thing seems to be froozen.
<div data-role="page" id="one">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_one">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#one" data-transition="none" class="ui-btn-active" >A</a></li>
<li><a href="#two" data-transition="none" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page One-->
<div data-role="page" id="two">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_two">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li>A</li>
<li><a href="#two" data-transition="none" class="ui-btn-active" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page Two-->
menu() creates the content of the Menu which is not shown in the example. Another method (loadPanel()) is boud to the pageshow-event and will populate the sidebar with the buttons. every button will execute
var pageId = $.mobile.activePage.attr("id");
$("#panel_" + pageId).panel('close');
before anything else is executed. However, all of this works most of the time and I would just like to know if some observed a similar behaviour.
As per jQuery mobile documentation
A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between.
Maybe you should move up your panel because it may be the cause of the strange behaviour
I've been googling this for days and although there are many similar threads the answer still eludes me. I have pared the problem down to this:
<div data-role="header" data-id="myHeader" data-theme="none" data-position="fixed">
<img src="images/my1200x150logo.jpg"/>
</div><!-- /header -->
<div data-role="content">
<p>Content line 1</p>
<p>Content line 2</p>
<p>Content line 3</p>
<p>Content line 4</p>
<p>Content line 5</p>
</div><!-- /content -->
<div data-role="footer" data-id="myFooter" data-theme="c" data-position="fixed">
<h4>My footer</h4>
</div><!-- /footer -->
I am trying to achieve a RWD effect with the logo image resizing to fit the page. This all works perfectly except for the initial page load, which sets padding-top to zero in the jqm updatePagePadding routine causing the content to flow up under the image.
I understand that images load hours after the js is run and this is a common issue. Any event such as a page resize causes the padding to be updated correctly.
So my question is, how can I force JQM to call updatePagePadding after my image(s) have finished loading ?
Jquery pageshow event ? link to the API
Basically jquery will fire an event after the page is loaded, and the elements are ready you can wait for that event and then call you function, example:
$("#pageID").on("pageshow",function(){
updatePagePadding();
});
Also check this for complete reference on what events are binded to every jquery mobile page, page widget API
I have the following jQuery Mobile HTML code, the navbar's content is set using javascript. jQuery mobile styles the navbar when it's set statically, but when you set the content of it (html) later using javascript, you have to do some extra work to make it work:
<div data-role="header">
<h1 id="title">App</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<p>Loading...</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" id="navbar">
<ul id="menu">
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
trigger('create'); is generally used to solve the problem of unstyled markup when set using javascript/ajax. However, it seems only to work within data-role="content" and not for #navbar. The script below should work but leaves the menu unstyled...
$(function(){
$("#menu").html("<li><a href='#'>Test Styling</a></li>").trigger('create');
});
Any ideas how to solve this? I have tried page(); and .listview('refresh'); with no results.
Try calling the navbar method after appending the list item:
$(function(){
$("#menu").html("<li><a href='#'>Test Styling</a></li>");
$("#navbar").navbar();
});
Edit:
You could also try creating the navbar dynamically :
var footer = $("#footer-id");
var navBar = $("div", {
"data-role":"navbar",
"html":"<ul><li><a href='#'>Test Styling</a></li></ul>"
}).appendTo(footer).navbar();