I am developing an ios app with phonegap. My app contains a page which displays a list of places.Right now i have not given any anchor link or Onclick event for the list items.But the problem is the header and footer is disappearing while clicking or tapping on any list item.My header contains the title of app and footer contains navigation bar.If I tapped again it will appear.But for next tap it will hide and so on. Is there any solution for this problem.?
Add this to your header and footer div
data-tap-toggle="false"
This will disable the toggle on header and footer so when you click on the page the footer and header will stay on.
I would guess you have a full screen mode turned on. It is done with this attribute:
data-fullscreen="true"
It must be placed/removed in page/header/footer div. Basically remove this attribute and everything will work just fine.
Official documentation can be found here: http://jquerymobile.com/demos/1.2.1/docs/toolbars/bars-fixed.html
Related
This happens only on iOS, in android the tabs are NON SCROLL-ABLE. the user can scroll the content, but also it scrolls the tabs and the header.
click here to see video LINK
meanwhile i have a menu that swipes from left to right side, it scrolls the content if i try two three times while if i catch the tabs it scrolls the TABS and if i try to scroll the CONTENT it keep SCROLLING THE TABS, HEADER TOO.
i have tried these two solutions, which it does not work for me:
solution 1
solution 2
on the Solution 2 i get the tabs non scroll-able but i dont get the content and nothing works, as i can see it can switch between the tabs but none of the contents does not work.
see second video of not showing content with ion-toolbar outside ion-content
i have made two ion-tab-bar, one for activated profile with buttons enabled, and the other for disabled buttons for non activated profile.
this is app.component.html code containing menu:
I also tried to add ion-split-pane, no success
this is tabs page with route:
SOMEHOW I COULD NOT PASTE CODE AS IT SHOULD, PLEASE CLICK HERE TO SEE THE CODES
put your tabs OUTSIDE the ion-content
I'm using this, Angular-UI Bootstrap Popover
And below is my code snnipt:
<a href=""
popover-placement="{{$index < 4 ? 'bottom' : 'left'}}"
popover-trigger="outsideClick"
uib-popover-template="'popover_table.html'">
Click me
</a>
When I click the link, it will show the popover_table.html content in page, it's a table which shows the data returned from backend. When there are too much data returned, The popover_table will show many records, and user need to scroll down inside the table. So They are asking if we can fixed the table header in the popover dialog top when scroll. Screenshot added below
So if there are more than 4 records, I need to add scroll-y and keep the table header fixed in the popover top so user can see it all the time when scrolling.
How to implement this feature? position fixed does not work in this case.
and also, if I add ng-click for <a>, then is there a way to execute the ng-click function after the popover shows? I tested and found that ng-click function execute first..
If you are using ng-click then it suppose to be worked if its still fails use $scope.$apply() inside click function
I was trying to simulate "tap to show/hide the fixed toolbar" when I found out that it's already the default function hahaha!
By default works charmly: it starts "show" and when it taps then "hide" and when taps again "shows" etc. PERFECT!
The problem is that I want it to start hidden and when the user taps shows and so on...
I used
$(".divBotoneraSimple").hide();
but then it doesn't show when tapped! I also tried:
$.mobile.fixedToolbars.hide(true);
$("[data-position='fixed']").fixedtoolbar('hide');
but both of them "stop my App" when triggered!
In order words I need to trigger those hides from javascript and still respond to tapping!
Use .toolbar() method with show, hide or toggle.
$(".ui-header, .ui-footer").toolbar("toggle");
Note that if you are at the top of the page, the header won't be hidden, only the footer, and vice versa.
I am building a responsive design and would like to use jquery mobile to provide just a menu. I was looking towards nested listviews (I know they are deprecated in 1.3.0). What I am after is a nested set of links in the footer. When an item with children is clicked, the sub menu will slide in, otherwise just navigate to the link that was clicked if it has no children.
This fiddle shows what I am after http://jsfiddle.net/QfyZd/6/
I thought that I would get the desired effect by marking up the footer with:
data-role="footer" data-position="fixed"
My question is though, how do I ensure the listview only affects the footer rather than the entire page? Or am using the wrong components to achieve what i'm after?
I am currently trying to add links to my footer so that they are displayed from left to right inside the footer. Currently they are being displayed in a list going down the page.
try ol instead of li. this should do it.