Is there a way in Ionic 2 to be able to transition between pages as if we were in a Slides component? Meaning that as soon as I start swiping a little left or right I start seeing a piece of the next or previous page? If I continue swiping then I transition to the next/previous page, else I go back to seeing only my current page.
It's like having a dynamic slides component, where ion-slide are automatically added. A little bit like the way the infinite scroll works, we could have 2 to 3 ion-slide in the DOM and they'd be reused as we move forward/backward.
This feature will be available in beta 7 (we are in beta 6) for tabs in material design. The option to swipe back in the pages stack is already available but you must be running on a device to see it in action. Check out the Ionic2 road map to see whats up and coming: https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit
Related
I'd like to automate a video-player on a webpage using Selenium in Python.
I cannot locate the interactive parts of the player with driver.find_element_by_... I've decided to try and accomplish this by making browser specific logic that knows how to navigate the page and player via keyboard navigation (count tabs for Chrome, vs Safari, vs Firefox, etc.).
driver.find_element_by_tag_name('body').send_keys(Keys.TAB))
I am able to select each of the controls of the player with tab (play/pause, current position, mute-volume control, full-screen, and additional options) and have had moderate success manipulating the player's controls with ActionChains once selected with TAB navigation
actions = ActionChains(driver)
actions.send_keys(Keys.DOWN) # to reduce volume or
actions.send_keys(Keys.LEFT) # to rewind playback
An example of something that doesn't work as expected with this method is sending a Key.SPACE to the MUTE button when selected. Instead the space is applied as a page navigation action and scrolls down the page like pressing page down. I'm looking for a method that either makes the controls work as expected when manually navigating the page with a keyboard, ex. space on highlighted object interacts and would normally mute the video in this context, or a workaround that lets me accomplish the same thing. To that end I was thinking if I could get the windows coordinates of the TAB selected object within the video-player and simply perform a click that would at least let me interact with the control.
Also if I'm going about this all the wrong way let me know. Thanks!
What you're really looking for is how to navigate the Shadow DOM. Those are the web elements inside the video player.
I answered how to reach inside the Shadow DOM in an other question, albeit for Java. However the principle is the same.
You can read the whole thing at the link, but the basics are you create a "starting point" WebElement at the Shadow DOM via JavaScript, then all future look-ups reference it:
WebElement button = startingPoint.findElement(By.cssSelector("..."));
I have been struggling with this for a while now. I'm trying to navigate to one tab (let's say Home) to another (let's say About). I'm able to navigate that either the page get's added to nav stack, but then it's not changing active tab. That, or then we use select to set the active tab, which means that I lose the navigation stack. Here's the latter option code:
export class HomePage implements OnInit {
tab: Tabs;
constructor(public navCtrl: NavController) {
this.tab = this.navCtrl.parent;
}
navigate() {
this.tab.select(1);
}
But this means that as mentioned, I lose the nav stack and can't use the back button that would show if I use push. That brings us to the other option, when I use .push():
this.navCtrl.push(About)
The active tab won't change, but still shows Home as the active tab, even though we are successfully navigated to About tab.
So what I wish for, is to have both the 'Back' button and the active tab (About) selected when I'm clicking the button to go to About from Home. Here's a demo with the push option, as you can see the active tab does not change: https://plnkr.co/edit/6KIL8mxfTMCsvACpiD1K?p=preview
PS. I looked at this question, but it wasn't useful to me: Changing tabs dynamically in Ionic 2
I'm using Ionic 3
I don't think this is how the tabs component is intended to work. With tabbed navigation you kind of have n navigation stacks (where n is the number of different tabs you have) which means if you .push() a new page on the nav-stack you push it on the stack of the currently selected tab.
Switching to another tab kind of is the same as starting with a new root, you start with the initial page ([root]="yourFirstPage") and can then add new pages to this particular nav-stack (and you can pop them off the nav-stack with a back button).
In you particular example you are trying to .push() the About page on the stack of the Home page and expect the NavController to know that you intended to switch to another stack and to push a new page to the new stack.
One solution to your problem could be to always remember the previous tab when you use .select() and display back button manually in the navbar which uses .select(previousTab) on click.
I hope that makes things clearer for you.
It's the default behaviour to act like this. When you select a tab it clears the nav stack and set the root to another page. When you push your about page when in home page you're pushing a new page in your home nav stack, this is why it doesn't change and shoudn't change.
The reason to use tabs is that you can segment and divide stuff in they correct categories. When updating a product you don't whant the user the see, for example, billing information in the same stack of products since it doesn't belongs to that category.
The .select() method (whose you've implemented in your home.page.ts) is the closest you can have from beeing able to select a tab without clicking in a specific tab.
What you can do is simply remove about from beeing a tab and push it in home OR remove the button to go from the home to about page, since there's already a tab for this.
In any case what you want to do is an error that Ionic team removed the possibilities from people doing.
Hope this helps you.
I'm working on an application that has a listing of events and each event has its own detailed show page. Everything seems fine, but one complaint I've received is that we're not maintaining the scroll position when going from the detail page back to the index listing.
For an example of the ideal behavior, go to http://discuss.emberjs.com/, scroll down the page a ways, click a link, then click the back button. You're brought to same place you were previously at, somewhere further down the page.
With our app, if you try to do this, you're brought back to the top of the page while the results are reloaded from the API. Then when the results load, your position is lost.
Is there a way to achieve what Discourse does while using query params?
How can I disable the Previous button on the first slide and Next button on the last slide in jQuery Cycle2 Malsup plugin?
I know this question has been answered before for the Cycle "1" plugin (and that it's posted as a demo on malsup's page). But how do I go about implementing it for the Cycle 2 version? I can't seem to find a simple answer anywhere and I'm pathetically too newbie in Javascript to understand the Cycle 2 API page. Could someone help me by showing me a fiddle?
This is actually done automatically if you set the data-cycle-allow-wrap option set to false in the cycle HTML. It will add the class disabled to the prev/next control if it is at the beginning/end of the slideshow. Then you just use CSS to style it so it hidden, or grayed out. No extra Javascript needed.
Here is a fiddle example: http://jsfiddle.net/X3kYY/
I am having trouble stopping the first scrolling once the page loads. You can see it here http://foundation.zurb.com/docs/components/joyride.html . After loading the website, joyride window scrolls automatically page littlebit lower
See it better in the old demo http://zurb.com/playground/jquery-joyride-feature-tour-plugin
I need the website to load normally (with top bar) and then activate scrolling after "next" button is clicked.
I am using latest version of Foundation 4 and foundation.min
Currently I am trying the docs page and it does not scroll, so either they fixed it or it was not a problem at all initially.
http://foundation.zurb.com/docs/components/joyride.html
Either ways, I see the best solution for you is to have the first step way above in the page, so that even when it takes focus, there's no page scrolling needed.