I have a header and nav bar on top of the page, I want to add 3 different pages below the nav bar so, when clicked on a button of nav bar the respective page should appear with transition.
I am trying to do this but page transitions are applied to the whole page including the header and nav bar.
Is it possible to do with jquery mobile, or Is there any workaround for this problem ?
here is my code
<div data-role="header" data-theme="b">
<h1>title</h1>
Logout
</div>
<div data-role="navbar" >
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div><!-- /navbar -->
<div data-role="header" data-theme="b" data-position="fixed">
You just need the data-position attribute. More info here:
http://jquerymobile.com/demos/1.2.1/docs/toolbars/bars-fixed.html
EDIT
Okay, the trick is that you also have to give the headers on all the pages the same data-id. Here's a working example:
http://jsbin.com/ibukoz/1/
Related
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.
I've converted my app to the new jQuery mobile 1.4.
But now, there is a small border at my footer button on the left side.
How can I remove this border?
My code:
<div data-role="page" id="home">
<div data-role="content">
</div>
<div data-theme="b" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Test</li>
</ul>
</div>
</div>
</div>
http://jsfiddle.net/rTFmR/1/
Update:
Another fix, override .ui-block-a's margin-left, and keep data-role="nabvar" attribute. Because this issue occurs only when using one navbar button.
li.ui-block-a {
margin-left: 0;
}
Navbar widget is still not 100% ready and needs to be re-factored. Anyway, to fix your problem, remove data-role="navbar" and replace it with class="ui-navbar".
Also, not that data-role="button" will be removed on jQuery Mobile 1.5. You need to add classes manually to anchor tag. ui-btn class converts any anchor into a button. For icons and there positions, ui-icon-edit and ui-btn-icon-top respectively.
<div class="ui-navbar">
<ul>
<li>
Test
</li>
</ul>
</div>
Demo
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
Below is my psuedo-code for a Single page website I am doing. I need to be able to make a single page website that is not scroll-based (which is the typical). The idea here is that my site have a nav where user selects a menu and depending on the selected menu the correct page div is rendered on the content div.
The page divs are also in the HTML and should not be displayed unless the correct menu is selected (or if a better approach is to place the pages in Javascript file):
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1"> <!-- for menu1 -->
<div>the content</div>
</div>
<div id="page2"> <!-- for menu2 -->
<div>the content</div>
</div>
How can achieve this with jQuery?
Here is what you looking for
Html :-
<nav>
<ul>
<li class="nav active" data-id="1">menu1</li>
<li class="nav" data-id="2">menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
<div id="page1" class="page">
<!-- for menu1 -->
<div>the content from page 1</div>
</div>
<div id="page2" class="hide page">
<!-- for menu2 -->
<div>the content from page2</div>
</div>
</div>
Jquery :-
$(document).ready(function () {
$('.nav').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.page').hide();
var clickedId = $(this).data('id');
$('#page' + clickedId).show();
});
});
Working Demo
To display preloaded contents in different containers you can use anchor tag with some CSS
HTML
a
b
c
<div id="page1" class="page"> this is page1 id</div>
<div id="page2" class="page"> this is page2 id</div>
<div id="page3" class="page"> this is page3 id</div>
CSS
#page1, #page2, #page3{
display:none;
}
#page1:target{
display:block;
}
#page2:target{
display:block;
}
#page3:target{
display:block;
}
As another answer stated, you may want to take a look at AngularJS. Here is an excellent tutorial to get you started if you choose: http://www.youtube.com/watch?v=i9MHigUZKEM
However, since your question stated jQuery, the best way will probably be to have all the pages separate html pages that are loaded in via AJAX and replace your current html.
The other approach is to have everything on the page at once and hide and show the content based on the menu item the user clicked. However, this may make the page REALLY sluggish if you have a lot of content all on the page at once.
If you want the content to be embedded in the page but hidden, use jQuery's .hide() and .show()
If you want to keep the content in separate pages, use jQuery's .load()
use this code , make sure your #page1 and #page2 divs hidden initially
jQuery(document).ready(function(){
jQuery('li').click(function(){
var new_index = parseInt(jQuery(this).index())+1;
jQuery("div[id*='page']").hide();
jQuery('#page'+new_index).show();
});
});
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1" style="display:none";> <!-- for menu1 -->
<div>the content 1</div>
</div>
<div id="page2" style="display:none";> <!-- for menu2 -->
<div>the content 2</div>
</div>
Try this link, it will help you. you are having navigation bar on your right hand site from where you can navigate through out your website.
Single page website
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();