I am developing a mobile application using PhoneGap. The application has a single page with a jQuery Mobile navbar as a footer. The problem I am facing is that when I tap on any area of the screen, the navbar shifts upwards a distance equivalent to its height, leaving a whitespace in the original position. if I tap it again, it goes back to normal.
My code for the navbar:
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="left">
<ul>
<li>
<a onClick="navRegister();" data-role="button" data-transition="fade" data-theme="e" data-icon="gear">
<h5> Register </h5>
</a>
</li>
<li>
<a onClick="exitFromApp();" data-role="button" data-transition="fade" data-theme="e" data-icon="back">
<h5> Exit </h5>
</a>
</li>
</ul>
</div>
</div>
What may be the reason for this?
Related
A user can click tabs, filtering the jobs on my page by category.
When a user clicks the tab, the page hits a search (I use the pg_search gem).
Problem: when clicking the tab, the page reloads and scrolls to the top. This is very bad for my UX. How do I prevent scrolling to top and keep on the height of the tabs-banner instead?
Here is my html.erb file:
<div class="tabs-banner">
<div class="tabs">
<a class="tab active" href="/vacancies?utf8=✓&query=">
<h2 style="color:white;"><br>All Jobs</h2>
</a>
<a class="tab" href="/vacancies?utf8=✓&query=developer">
<h2><br>Developer</h2>
</a>
<a class="tab" href="/vacancies?utf8=✓&query=marketing">
<h2><br>Marketing</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=design">
<h2><br>Design</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=finance">
<h2><br>Finance</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=internships">
<h2><br>Internships</h2>
</a>
</div>
</div>
As max said, you can use anchors as a quick fix. Add id to tabs-banner div and use it in the links
<div class="tabs-banner" id="category-tabs">
<div class="tabs">
<a class="tab active" href="/vacancies?utf8=✓&query=#category-tabs"">
<h2 style="color:white;"><br>All Jobs</h2>
</a>
# all other tabs
</div>
</div>
I'm working on mobile app.I want pop-up to appear on click of icon(carat-r). Actually i'm not gettin where to link. Below is my code. Thanks in advance
<div data-role="page" data-theme="a" data-content-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>weekdays</h1>
</div>
<div data-role="tabs" id="tabs">
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true">
<li ><a href="#">
<h2>Sunday</h2>
</a></li>
<li><a href="#">
<h2>monday</h2>
</a></li>
</ul>
</div>
</div>
If you want to launch a popup when the icon is clicked, but still have the rest of the listitem be a regular link, you should use the split button option on the listview:
http://demos.jquerymobile.com/1.4.4/listview/#Splitbuttons
You can set the icon to carat-r using the data-split-icon attribute.
In your markup:
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true" data-split-icon="carat-r">
<li>
<h2>Sunday</h2>
</li>
</ul>
DEMO
I am Using cordova-2.1.0, JQueryMobile-1.3.0 for iOS app. Some of the pages in my app has very small content still that pages scrolls. I am testing it on iOS 6. How to stop scrolling of the pages having small content. I dont want to use the preventDefault.
It's just looks normal when I tried in the fiddle http://jsfiddle.net/JEqKh/
this is the HTML I used. Try import the libraries in the <head></head> tag
<div data-role="page" id="menu">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>Header</h3>
</div>
<div data-role="content">
<ul data-role="listview" id="mainMenu">
<li style="height:50px"><img src="a.png" class="ui-li-icon"/>Menu1
</li>
<li style="height:50px"><img src="b.jpg" class="ui-li-icon"/>Menu2
</li>
</ul>
</div>
</div>
I am searching a plugin in jQuery mobile for tab implementation. tabs must be in content of the page. This is wat I have...
<div data-role="page" id="nav">
<div data-role="page" id="nav">
<div data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
</ul>
</div>
<div data-role="page" id="one" data-transition="slide">
<div data-role="content" style="background-color:#ff0;">
<h1>One</h1>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h3>
Footer
</h3>
</div>
</div>
When i click on page id "one". it is not displaying its respective content.
Can anyone pls help me.
Or you can use my tabview plugin. Based on JQM collapsbile set, you just need to replace JQMs collapsible and collapsible set widget with my versions. Old collapsibles will continue working as normal. When you add data-type="horizontal" to a collapsible set, it becomes ... tabs...
Demo here, Repo on Github.
I like the other solution, too.
I modified jQuery.mobile-tabs to allow the tab bar to be placed anywhere within the page. Is this what you had in mind?
I'm new to jquery mobile and need some help to move further in my application
I used NAVBAR with two buttons view and two buttons are navigating fine and displaying different list views & when I click on list view item the page is navigating to another HTML page and displaying related data but the problem is I'm not able to view navbar in next page...
I want the navbar to be constant for all pages like tabgroup activity in android.
anyone please help me with good example and application or show me some good links to achieve this...
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" id="nav1">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
<div class="ui-grid-but" id="list">
<div class="ui-block-a">
<a href="#lv1" data-role="button" id="button1" >
<img src="task.png" alt="Tasks" /></a>
</div>
<div class="ui-block-b">
<a href="#lv2" data-role="button" id="button2">
<img src="reminder.png" alt="Reminders" /></a>
</div>
</div>
<div class="def_content_div" id="dashboard">
<ul data-role="listview" data-inset="true">
<li>List View 1 </li>
<li><a href="#lv2" >List View 2</a> </li>
<li><a href="#lv3" >List View 3</a> </li>
<li><a href="#lv4" >List View 4</a> </li>
</ul>
</div>
<div class="content_div" id="deals">
<ul data-role="listview"data-inset="true">
<li> List View 5</li>
<li> List View 6</li>
<li>List View 7</li>
<li>List View 8</li>
</ul>
</div>
</div>
The best way to achieve this is to put your navbar inside a JQM header and use the same data-id for every header. i.e.
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
You have to include the above code snippet in every listview page. That will give the appearance of a constant fixed nav menu.
Here is an example as requested http://jsfiddle.net/codaniel/z5VYF/1/
I got the solution from http://jquerymobile.com/demos
According to codaniel's answer, we need to include the code snippet in every listview page.
And then, we need to add the following class to the "current" nav-button of every page.
class="ui-btn-active ui-state-persist"
For the first front page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
And the second page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>