I realise that 1.3 is still a beta realise but was wondering if anyone is having the same issue as myself and solved it.
For the panels to work the page content must be contained within the data-role="content" container.
However, I am using some API's like twitter which call up content into data-role="content" container, and I also have ad tags in the container. Both of these use javascript and both disable the jQuery mobile platform. I can only get either of these features running in the platform with panels enabled from the first data-role="header" container.
Here is an example of my code that is failing. Thanks.
<div data-role="page" class="ui-responsive-panel">
<div data-role="header">
<h1>Title</h1>
</div><!-- /header -->
<div data-role="content">
<script language="javascript">
<!--
document.write('<scr'+'ipt language="#"></scri'+'pt>');
//-->
</script>
</div><!-- /content -->
<div data-role="footer">
footer text
</div><!-- /footer -->
<div data-role="panel" data-display="reveal" id="nav-panel">
<ul data-role="listview">
<li>link</li>
<li>link</li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
A panel should appear just after the page div, like this
<div data-role="page">
<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->
<!-- header -->
<!-- content -->
<!-- footer -->
</div><!-- page -->
You should place the panel code above the header directly under the page div..
Related
I have a jQuery Mobile page (Fiddle here) which loads an external footer like so:
<!-- Start of universal footer -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div>
<!-- /End of universal footer -->
<!-- Start of first page -->
<div data-role="page" id="tabOne">
<div data-role="header">Page 1</div>
<div role="main" class="ui-content">Content</div>
</div>
<!-- /End of first page -->
<!-- Start of second page -->
<div data-role="page" id="tabTwo">
<div data-role="header">Page 2</div>
<div role="main" class="ui-content">Content</div>
</div>
<!-- /End of second page -->
With some js:
$(function() {
$("[data-role='navbar']").navbar();
$("[data-role='footer']").toolbar({theme: "a"});
});
This is all working perfectly, but I'd like to have another page (a login page which displays first) which doesn't show the footer (or shows an alternate one) but I can't seem to make that happen. Any ideas?
Based on Bootstrap 3..... all I want is, the tab switch to 2nd tab after some time interval and stays.
I need jquery/javascript code fix this issue... kindly help me as I'm a newbie, many thanks...!!!
Here is the code of tab section:
<!-- Nav Tabs -->
<ul id="tabsnav" class="nav nav-tabs">
<li class="active">Daily</li>
<li>Weekly</li>
</ul>
<!-- Tab Panels -->
<div style="min-height:400px;" class="tab-content">
<!-- Tab Content 1 -->
<div class="tab-pane fade in active" id="tab-4">
<p>Report Goes Here</p>
</div>
<!-- Tab Content 2 -->
<div class="tab-pane fade" id="tab-5">
<p>2 Report Goes Here</p>
</div>
</div>
<!-- End Tab Panels -->
</div>
</div>
<!-- End Page Content -->
I have a jQuery mobile site with 2 pages loaded into one html file that use the same panel, which is also in the file, just outside of all the data-rol="page" divs. The problem is when you reload the second page, as in visit before using the first page, the jQuery mobile styling on the ul in the panel is gone.
I've tried adding enhanceWithin() to the code after creating the panel but I must be missing something, it's loading the same panel, how is the style lost if reloaded from another page?
Source
<div data-role="page" class="ui-responsive-panel" data-theme="b" id="page">
<div data-role="header" data-position="fixed">
<h1>Alpha</h1>
Menu
</div><!-- /header -->
<div data-role="content">
<h1>News and Features</h1>
<a href="#page2"><p>Lorem ipsum</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<p>Content TBD</p>
</div>
</div>
<div data-role="page" class="ui-responsive-panel" data-theme="b" id="page2">
<div data-role="header" data-position="fixed">
<h1>Alpha</h1>
Menu
</div><!-- /header -->
<div data-role="content">
<h1>News and Features</h1>
<a href="#page"><p>Lorem ipsum</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<p>Content TBD</p>
</div>
</div>
and script:
<script type="text/javascript">
var panel = '<div data-role="panel" id="left-panel" data-position="right" data-display="push"><h1>Panel</h1><ul data-role="listview" data-theme="b"><li>test</li><li>test2</li></ul></div>';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel);
$("#left-panel").panel();
});
</script>
Edit: This is weird to explain, so if you visit the first page, id=page the menu loads up with the traditional jQuery mobile styling. If you navigate to the second page(id=page") after starting on that first page, the styling is fine. IF you, now on id="page2" hit the 'reload' button on your browser the style for the panel is gone, and it remains gone if you navigate back to id="page". So unless the first page is the starting point, the style is never applied, does that make sense?
On load of the second page use:
.trigger('create');
Use this to recreate panel on page 2.
More Here:
Reference
I'm trying to pop up a very simple "are you sure?" popup in jQuery Mobile. But if I use the data-rel="popup" on the button, nothing happens. If I remove the data-rel it opens - but as a full window. The logic works well, but still, I'd like to see a popup.
Here's the code (simplified - I removed the other pages, the header, html etc. - the app works well other than this issue, so no need to debug those). The 2 elements to look at are the button "clearHistory" and the popup itself "history":
<!-- history page -->
<div data-role="page" id="history">
<div data-role="header" data-position="fixed">
Back
<h1>History</h1>
Delete
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" id="historyList" data-inset="true" data-theme="f"></ul>
<h4 id="historyEmpty">History is empty</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4><a class="ttg" href="http://www.TravelingTechGuy.com" rel="external" target="_blank">Traveling Tech Guy</a></h4>
</div><!-- /footer -->
</div>
<!-- end history page -->
<!-- delete history popup -->
<div data-role="popup" id="deletePopup" data-overlay-theme="a" data-theme="c" data-dismissible="false">
<div data-role="header" data-theme="a">
<h1>Delete History?</h1>
</div>
<div data-role="content" data-theme="d">
<h3>Delete all items in history?</h3>
Cancel
Delete
</div>
</div>
<!-- delete history popup -->
Any idea what am I missing here?
Place popup inside <div data-role=page> and that div should be the direct parent of popup div. I placed before <div data-role=content> in the below demo.
Demo
Dialog should be placed outside <div data-role=page> because they are treated as a page.
I pulled very small snippets from my code to show a very simple example of my problem. I put it in JSFiddle -> http://jsfiddle.net/hollycoffee/LjLMU/
I have researched and found others with the same issue and they either tried addClass or refresh jQuery methods, so I tried both in a few different places in my code and nothing worked, so I'm hoping that by making the simple example in JSFiddle, someone can point me to exactly what I am missing and where.
The example is random and won't make sense, but the part that I am stuck on is the fact that only the dynamic portion of the menu loses style, the Skills list.
The menu portion markup looks like this:
<header data-role="header" data-position="absolute" data-theme="a">
<h1>View Skills</h1>
Menu
</header>
<!-- Starting our left side menu panel -->
<div data-role="panel" id="left-panel" data-theme="a">
<ul data-role="listview" data-theme="a">
<li data-icon="back">Back Home</li>
</ul><br />
<div class="ui-header ui-bar-a" data-theme="a">Settings</div>
<div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<h3>Optimization Settings</h3>
<div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<ul data-role="listview">
<li>Colors</li>
<li>Preferences</li>
</ul>
</div><!-- /collapsible-set -->
</div><!-- /collapsible -->
<div class="ui-header ui-bar-a" data-theme="a">Skills Menu</div>
<div id="skillsList"></div>
<div class="ui-header ui-bar-a" data-theme="a">Saved</div>
<div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<h3>Saved Searches</h3>
<div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<ul data-role="listview">
<li>Angry Birds</li>
<li>Professional Events</li>
</ul>
</div><!-- /collapsible-set -->
</div><!-- /collapsible -->
</div><!-- / Menu panel -->
Everything looks good except for the skillsDiv, which is filled by this javascript:
function CreateSkillsList(skills){
var skillsDiv = $('#skillsList');
var html = "<div data-content-theme=\"a\" data-theme=\"a\" data-iconpos=\"right\" data-inset=\"false\" data-role=\"collapsible\"><h3>Skills</h3><div data-role=\"collapsible-set\" data-inset=\"false\" data-iconpos=\"right\" data-theme=\"a\" data-content-theme=\"a\">";
html += "<ul data-role='listview'>";
var size = skills.length;
for (i=0; i<size; i++) {
html += "<li><div id='Skill" + i + "'></div> </li>";
}
html += "</ul></div></div>";
skillsDiv.html(html);
}
Each skill does show as a list item, but has no CSS.
Here is the JSFiddle so you can use the top left Menu button to see the skills list with no style:
http://jsfiddle.net/hollycoffee/LjLMU/
Thank you so much for the help, you StackOverflow geniuses help me every time!
-Holly
(Quick note update - In my real application, I don't use the $(document).ready() - I just put it into this example to fill my array for me. My real application gets the array filled by an external API, so I thought this was the simplest way to re-create it.)
Edit: Add this at the end of your function
$('[data-role=page]').trigger('pagecreate');
Just add $('[data-role=panel]').trigger('updatelayout'); after injecting items dynamically to panel.
Demo
Use:
$('#panel-id').html(yourHtmlHere);
$('#panel-id').trigger('create');
$('#panel-id').trigger('updatelayout');
Standard CSS for styling.