I want to add show and hide button for fixed footer on jquerymobile.
I tried to add an close button but i did not do.
<div data-role="footer" data-position="fixed"></div>
Thanks...
I found the solution. I made a Collapsible Block. Like this:
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Related
I'm trying to create a slider component inside a page in an ionic 2 app. I've gotten it to work as intended with the exception that the pager dots don't show up. The documentation on how to use the pager isn't great. Any ideas where I'm going wrong here?
<div class="slider-container">
<ion-slides pager="true">
<ion-slide>
<div class="slide">
<img src='assets/image/scoping.png' />
<p class="slide-title">TITLE 1</p>
<p class="slide-text">Body text 1</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/projectmgmt.png' />
<p class="slide-title">TITLE 2</p>
<p class="slide-text">Body text 2</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/satisfaction.png' />
<p class="slide-title">TITLE 3</p>
<p class="slide-text">Body text 3</p>
</div>
</ion-slide>
</ion-slides>
</div>
I have also tried <ion-slides options="{pagination: true}"> and <ion-slides pager="true"> and neither of these have worked.
Edited: Upon inspection in the browser, I'm seeing the pager being rendered with a div container like this:
<div class="swiper-pager hide">
So I'm definitely not using the right parameters to unhide the pager. Or there's a bug. I'm using Ionic v2.0.0.
This work for me in Ionic 3:
<ion-content>
<ion-slides pager>
<ion-slide>
<h1>My Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
Finally got it to work with this as the opening tag of the slides:
<ion-slides [options]="{pagination: true}">
You can try adjusting your position of pager dots. Maybe it is appearing behind your image. Include in your .scss file:
.swiper-container-horizontal > .swiper-pagination
{
bottom : 50%; //Change accordingly
z-index : 99 !important;
}
I have tested out your code (minus the image), it is appearing on mine.
If you are using swiper to slide page, there are a lot of parameters to do the same as-
<div class="swiper-pagination"></div>
here is the code of paginatin-
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
});
Complete code can have a look here.
We have demo of slider as-
http://idangero.us/swiper/demos/#.WUJGrROGNp8
Hope this will also help you!
At the moment my mobile app looks similar to the one on the link below:
http://jsfiddle.net/TM6Dt/
with the following code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
Mail
Settings
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
What I'd like to do is have both of the circular buttons on the right side of the header bar. I've tried putting them in a controlgroup div but for some reason this changes them so they are no longer circular - I get square buttons with the icons in the middle. What's worse is they are not even aligned properly! You can see what I mean here:
http://jsfiddle.net/Gd8ZB/
and the code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
<div data-role="controlgroup" class="ui-btn-right">
Mail
Settings
</div>
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
How do I get around this problem? Any help would be appreciated!
I've done that as follows:
<div class="ui-btn-right">
Mail
Settings
</div>
Fiddle
http://jsfiddle.net/TM6Dt/1/
one way to do it is to change position of the first button in first example and move it to the right with following css
style="right: 40px; left: initial;"
I'm having a very strange issue...
When I click in a button that is disabled, the header scrolls up... (demo below)
Why this happen?
Demo
Here is the code:
<div data-role="page" data-theme="b" #TempData["DataUrl"]>
<div data-role="header" data-position="fixed">
MyApp
</div>
<div data-role="content">
<div style="height:300px">Content</div>
<div class="controlGroupButtons" data-role="controlgroup">
<a class="Button1" data-role="button">Marcar</a>
<a class="Button2" data-role="button">Desmarcar</a>
</div>
</div>
$(".Button1, .Button2").buttonMarkup().addClass("ui-disabled");
Just add data-tap-toggle="false" to the header div and the problem will vanish! Because when the buttons are disabled, the click will be trigger tap event. Once Tap event is triggered, it will show/hide header.
Anytime I put in a simple footer bar, instead of docking at the bottom of the screen, it floats in the middle, halfway up the screen. My code is as simple as is permitted:
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the search methods from the following table.</p>
</div>
<div data-role="content">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>
<div data-role="footer">
<h1>Hey guys!</h1>
</div>
</div>
</body>
This results in a nice header and three nice button links, followed immediately by a footer in the middle of the screen! Why would it appear there instead of attaching to the bottom of the viewport?
try this one
<div data-role="footer" data-position="fixed">
<h1>Hey guys!</h1>
</div>
As of JQM 1.3, you can use the data-position="fixed" in the footer div to achieve this:
<div data-role="footer" class="ui-bar" data-position="fixed">
<h4>I am a fixed footer!!</h4>
</div>
However, the footer seems to be floating on top of the content (like full screen background image) rather than being applied at the bottom of the image.
While #stay_hungry has a solution as well the problem is the content
<div data-role="content">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>
The footer is applied after the content and is not fixed to a position by default, so if your content does not fill the screen your footer will appear in what looks like the middle of the screen.
Example:
http://jsfiddle.net/ZLMQk/
Now add some content to push the footer down the page:
http://jsfiddle.net/ZLMQk/1/
And more content:
http://jsfiddle.net/ZLMQk/2/
Using the Fixed Position:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html
Or Persistent option:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-a.html
is also an option that might work for you
I've a div(phone-no) which need to be fixed and it is just above the footer. When we resize the window, user must be able to see the "phone-no" div. here is the image the blue bar which says "free trial" is the fixed bar and the bar below that is the footer.
When I tried data-position="fixed' on header and footer, it seems to work. but not on this. Any insight?? link to the page
Try put this code in your document ready and it will disable disappearing when clicking and scrolling
$("[data-role=header]").fixedtoolbar({ tapToggle: false });
$("[data-role=footer]").fixedtoolbar({ tapToggle: false });
Best of luck
Live Example:
http://jsfiddle.net/zD5RU/4/
http://jsfiddle.net/zD5RU/8/ (more content)
HTML:
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
Home
</div>
<div data-role="content">
<p>Content</p>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li>Footer</li>
<li></li>
<li>(888)444-8901</li>
</ul>
</div>
</div>
</div>