After I called carousel page from menu, I want to display a specified carousel item.
I tried to use method like that
myCarsouselContent.setActiveCarouselItemIndex(index);
The problem is, carousel will slide step by step until index.
I don't want to show slide in screen. I think the best way is set value for initial-index = index. But I don't know how to do this.
Can someone help me?
EDIT: Changed my answer since there is an initial-index attribute which is better. Sorry about that.
Use initial-index="2" (or whatever index you like) as an attribute for <ons-carousel>.
<ons-carousel initial-index="2">
...
</ons-carousel>
Here you can see it in action:
http://codepen.io/argelius/pen/MYaGLK
Related
I'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.
I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.
(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)
The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:
React Joyride: https://github.com/gilbarbara/react-joyride | Live Demo
reactour: https://github.com/elrumordelaluz/reactour | Live Demo
Both seem to have similar features:
Instruction modal that explains about an element on the page.
The modal is positioned next to the highlighted element.
The window will scroll down to the highlighted element if it's outside of the viewport.
The element is highlighted to bring more attention while the rest of the page is in the backdrop.
There are steppers on the modal to indicate which step you're on.
In bootstrap uib-collapse class animation behaviour hapeens only for vertical div.
But I need same animation/motion behaviour for table columns to show or hide upon click on icon.
For rightnow using ng-show and ng-hide but that doesnt seems animation behaviour not look good.
How can I achieve same behaviour for table colum wise NOT row
uib-collapse has a horizontal option and all you have to do is to add an additional attribute called 'horizontal' for the panel div as follows.
<div uib-collapse="isCollapsed" horizontal></div>
There is an issue recalling this problem and there is a workaround for it but as it's mentioned it's not recommended to use that.
Doing some further investigation, this appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. It seems that even when using vanilla Bootstrap JS, one has to hack around it too.
Here is a workaround that works - I am going to close this issue as not a fixable bug unfortunately. Thankfully, one can work around this, as my Plunker shows.
I want to create a button like this to my application.Please someone help me to do this
You can make it by using the <ons-speed-dial> element of Onsen UI: https://tutorial.onsen.io/?framework=vanilla&category=reference&module=speed-dial
If you want your buttons to be scattered like in the Debugger, then after choosing the direction of the <ons-speed-dial>, add a margin to each of the <ons-speed-dial-item> to place them where you want them to be.
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I have a question concerning scroll positions/behavior in AngularJS.
I have a fixed sidebar with div classes with text (three items no menu) and would like to achieve an opacity change on those classes based upon the current scroll position of the window.
For example, if I reach
<div class="example1">
My goal would be to have the opacity changed on the first item in the sidebar which for example would be called
<div class="sidebar1">
I've found plugins via github for this, but would like to achieve this purely with angular. Does anybody know how to approach this best to avoid messy code and a bloated application?
There's a module you can get via npm here: https://www.npmjs.com/package/ng-inview named ngInView. It will let you call an event whenever an item comes into view. This should get you going in the right direction.
Also on github at: https://github.com/iamssurya/angular-inview