I have a list and I want to refresh the list when user pulls it down. I expect that only the list should move down when scrolled, and the rest of the components in the page will remain on their positions. But when I pull down the page, the whole page scrolls down, along with any other components on the screen. Any idea how it will work?
It will move everything in your ion-content tab.
<ion-header>
<!--Won't scroll -->
</ion-header>
<ion-content>
<!--Will scroll -->
</ion-content>
I guess move anything you don't want to scroll outside of the content.
Related
In my Ionic3 app, I have a slides component with a bunch of slides, and I want to be able to click on each of them. So code would look like:
<ion-slides>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
The problem I have is that very often, when I try to click on the slide, it actually does a swipe of the current slide and shows the next one, therefore the click never happens. This happens mostly using a tablet, as I guess my finger is less stable and if the click is not perfect then it will slide.
Is there any way to make the click less sensitive (so that even a small variation of distance between down and up event is recognized as click not swipe)?
You can just first get your swiper using querySelector:
let mySwiper = document.querySelector('yourSwiperSelector');
Then just change the treshold:
mySwiper.threshold = 100;
It worked for me. In my case it was ionic2-calendar and my selector looked like this:
let mySwiper = document.querySelector('.swiper-container')['swiper'];
There's a lot of options available that ionic don't list but you can see them here in the library that ionic slides uses:
http://idangero.us/swiper/api/
Setting the Touches threshold to a reasonable value should help.
If you have a reference to your slider, you can simply say this.slider.threshold = 100;
<ion-slides pager>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
In Ionic 2, I want to hide the back button and need to show the menu bar. So, I have written the following code:
<ion-navbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title><b>Board</b> Bullets</ion-title>
<button class="pull-right" ion-button clear>
<i class="icon dripicons-dots-3 r_90 submenu"></i>
</button>
</ion-navbar>
But, what's happening is the it hides both the back button and menu bar.
Can anyone tell me how to hide the back button only?
I think you should read Navigation documentation of Ionic 2. Here is a good start.
Basically, when you use this.navCtrl.push(Page), Page is pushed to the navigation stack. When you use this.navCtrl.setRoot(Page), Page is set to the root of navigation stack.
If you do not wish to go on back page (not even from hardware back button), you can use this.navCtrl.setRoot(Page) to set the page at the root. Here, you will have your menu button instead of back button.
All you need to know its how ionic 2 navigate to debug your error. Pay attention:
If you have a root page A and you navigate with push into page B, in page B you will have a back button. In page B if you navigate back with pop, in page A will have the menu button.
But if you are in page A and navigate with setRoot to page B, in page B you will have again the menu button.
And other thing to keep in mind its that ionic navigation works like a stash of views.
So the back button will appear only if you have some view in the stack to navigate, if there isn't a view, it means is a root view, the menu button will appears.
If you need to hide the backbutton keep this in mind and reorganize your navigation, maybe helps you and wont have to add extra logic, just navigation.
I have a set of two tabs. Each tab has a Google chart inside it. Both these charts should be identical in terms of size and position.
When the page is loaded, the position of the chart is how I want it (regardless of which tab you are initially on). When you then move to the other tab (initially hidden) the chart's position and sizing changes.
You can see this in the example here: http://cb.tortoise-dev.co.uk/
To simplify things I've added fixed widths and heights to the chart container, but this hasn't helped. I'm pretty sure that the problem is to do with the hidden container having no dimensions when the page is loaded and the chart being drawn to a sort of default size rather than filling the container (like it does in the initially visible tab). I'm not sure what the solution is though.
Any help would be greatly appreciated. Thanks in advance.
Your suspicion is correct: if the chart's container div (or a parent element) is hidden when the draw call is made, the Visualization API's dimensional measurements get messed up, and effects like the one you've noticed show up. There are a few different solutions you can go with:
draw the charts before you initialize your tabs, so all divs are visible at draw time
set up event handlers on your tabs to draw all charts within a tab when it is first opened
unhide all divs immediately prior to drawing the charts, then re-hide divs as necessary in "ready" event handlers for the charts
For Twitter Bootstrap users, I've found the following js snippet to be pretty useful. It's a way of using the second solution as provided by #asgallant and takes advantage of the built in Bootstrap Tab events documented at http://getbootstrap.com/javascript/#tabs-events.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if($(e.target).attr('id') == 'first-tab-trigger')
{
drawFirstChart();
}
if($(e.target).attr('id') == 'second-tab-trigger')
{
drawSecondChart();
}
})
The snippet requires that you add a unique class or id selector to your tab like so (e.g., class="first-tab-trigger" etc):
<ul class="nav nav-tabs">
<li class="active">
<a href="#section-one" id="first-tab-trigger" data-toggle="tab">
FIRST TAB
</a>
</li>
<li class="col-sm-3">
<a href="#section-two" id="second-tab-trigger" data-toggle="tab">
SECOND TAB
</a>
</li>
...
</ul>
Now, when a tab is clicked and the the tab's content is made visible, a drawing (or re-drawing) of the chart takes place. That solves the sizing problems you get when you have charts in hidden tabs.
You can also "re-size" your window whenever the content is visible again and it makes the trick of the chart redrawing :
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
});
I have been implementing the lists in jquery mobile.when i scroll the list,the page header is also scrolled.Is there any way to scroll only a particular div on touch event without scrolling all the div's in a page.
Thanks in advance.
If you just want your header to remain fixed, then you can apply the data-position="fixed" attribute to it.
<div data-role="header" data-position="fixed">
that will prevent it scrolling off the top as you scroll the page.
I have a list of links within a div with a scrollbar. When the user clicks on a link below the x-height of the div, the srollbar automatically goes back to the top. I would like the scrollbar to stay in position no matter what links the user clicks. Here is the site- try clicking on a painting from 2006 and you'll see what I mean.
Does anyone have any ideas of how I can make this scrollbar behave?
Thanks,
Brad
It looks like these links are just that, links to a new page... and thus it's not so much that the scrollbar is resetting but that a whole brand new page is coming up and the 'reset' scrollbar is just a byproduct.
The most elegant way would be to have those links pull in the new content without reloading the page, but this requires AJAX. If you aren't familiar with the intricacies of AJAX and how to implement that, then you could change the link to include an anchor to the link, like so:
http://siddharthparasnis.com/2006-01/#menu-item-377
The page would reload scrolled down to that item.