Ionic 3 coverflow implemention - javascript

Hi everybody i am working on ionic 3 application. I need to have a cover-flow like this: react coverflow
I have searched so many places but couldn't find one for ionic 2 or above. i also tried a "jquery coverflow" and "swiper" but i dont know how to call a function from the javascript file.
can any one help me to
1. import and use Swiper in ionic 2 or above.
2. import and use javascript files without using npm.
Thanks in advance.

You are able to use the ion-slides from Ionic themselves. And because it is build on top of Swiper, you are able to pass in every option found in their docs. You should take a look at it. More info about the use of ion-slides take a look at Slides documentation.

Joeri is correct, you can use ion-slides. Check inline documentation here in this code: https://github.com/ionic-team/ionic/blob/master/src/components/slides/slides.ts
Specifically lines: 137 and onwards.
What you need to implement (coverflow) can be configured through advanced options.
Check lines 221-225 - the setting you need is in there.
Refer to Ionic documentation on how to enable advanced features:
https://ionicframework.com/docs/api/components/slides/Slides/#advanced
Small hint:
Now once you will do the code in your component to be able to use those listed methods be aware that if your slides component is wrapped into directive such as ngIfetc - you may have issue with ChildView of slides being "undefined". You need to make sure the component is there to initialize the code. This is something that caused trouble in my case;/

Related

How to create pills input fields in react native?

I'm looking for a way to make "dynamic pills" like the ones below, but in React Native and Redux.
https://codepen.io/silkine/pen/pPxJOX
<div id="container"></div>
<div class="tim">this codepen is dedicated to
#twholman
</div>
1) Anyone know what they are called so it's easier to google tutorials?
2) I'm trying to convert the css with gulp and copy paste the JS into RN, but changing react syntax into RN. Getting a lot of errors. Is this a good path? Or do you know a simpler one? Maybe a tutorial somewhere?
Thanks!
It's called Badge.
You can use UI Kit like react-native-elements or you can check out code of this element in github repo. Use 'children' prop to pass TextInput.

EXTJS 6.x through 4.x view the layering of the components graphically or otherwise

In order to navigate through the elements/components hierarchy of EXTJS , I need to see what is up and what is down from any point like an element. Too often I go the wrong way and it takes me hours to figure out the path of a component/element (from to). Opening up the debugger and doing it through dom is abominable. Is there a nice utility or way in EXTJS to xray view the hierarchy in some way? And if you are sure that there is not, please let me know how you do it.
Let's say I start this way:
var panel = Ext.ComponentQuery.query('panel[itemId=dateOfDeathPanel]')[0];
And I need to get to a textfield or button, what is the pro's way of navigating the hierarchy, other than opening up the files and wasting precious time deducing how the components/elements are arrayed?
Many thanks for your help.
DK
Well, this question is quite big and not easy to answer because it depends on the architecture / pattern you choose as well, mvc, mvvm, etc..
I really like to use viewcontrollers to access the components using the reference config object or itemId, described here:
http://docs.sencha.com/extjs/6.0/application_architecture/view_controllers.html
Beside that you can install in Chrome the AppInspector plugin from Senchalabs, this can help you navigating through the component tree, stores and more.
Repo:
https://github.com/senchalabs/AppInspector/
Chrome store:
https://chrome.google.com/webstore/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae
Can you use beside that the .up and .down selector in extjs:
extjs using up and down methods

SliderIOS – custom moveable image

I'm using react-native and for a component I need to replace the default image of the SliderIOS component with a custom one. Is there any way of accomplishing this or should I create a custom slider component? (I don't have any experience in this.)
I have already tried embedding an image as a child of the slider as well as the vice-versa approach, however non of them have worked.
Looking at the source code for RCTSliderManager, we can see that it only exposes value, maximumValue, minimumValue, minimumTrackTintColor and maximumTrackTintColor. That means like it looks like you're out of luck. You could use the RCTSlider and RCTSliderManager files as a starting point for a custom component, or you could create a pull request to expose setThumbImage on UISlider.
I have created a pull request fixing this issue which hopefully gets accepted.

Is there a way to use Filtrify that has outdated jquery with bootstrap that needs higher versions of jquery?

I really like the Filtrify plugin with the multiple search categories like on this link http://luis-almeida.github.io/filtrify/movies.html by Luis. It is perfect for my project but I'm using bootstrap as a framework and this plugin uses version 1.7.1 of jquery and bootstrap needs 1.9.+. Is there a way so I can use both or is not possible? If not, do you guys know of similar plugin that I can use ? I need to be able to search multiple items and filter content by those items. My first try was to use the instafilta but then I can only search for one item at a time, unless I don't know how to configure it.
So to be exact, the Filtrify demo that I posted is exactly what I need.
This is the content of my project. I want to be able to search for for example Javascript and C++ and filter the users that have that in their list.
http://i.imgur.com/NlWP0oO.jpg
This is my first post so I hope this is specific enough.
Thanks in advance.
Maybe take a look at "http://isotope.metafizzy.co/". It has a filter function, too.
filtrify.js line 99: change the if statment with this
field = this._order[f];
This is an old problem, but I was able to fix the jQuery conflict of using newer jQuery with Filtrify by using method 1 on this page: https://www.sitepoint.com/fix-jquery-browser-function/

Use Bootstrap 3 as well as Bootstrap 2

I have downloaded a html5 template named Codester. It works on top of Bootstrap 2.
But as of now the current version of Bootstrap is 3. And I am quite familiar with that so I want a method with which I would be able to work in bootstrap 3 but have that template run in bootstrap 2.
Or is there any simple process which will convert that template to bootstrap 3?
You can do this yourself. Download the template, and update it using this information:
http://getbootstrap.com/migration
http://www.bootply.com/bootstrap-3-migration-guide
There are tools that can help:
http://upgrade-bootstrap.bootply.com
http://code.divshot.com/bootstrap3_upgrader
http://twitterbootstrapmigrator.w3masters.nl
But given that you need a template, I don't think this is what you want. It's probably not easy enough, as there are always problems that need a deeper level of knowledge to solve.
Tip: Ask the author of the template! (I cannot find contact details)

Categories

Resources