Hi I’m a new developer that just graduated school so I’m working on a portfolio project. Sorry in advance if the question seems dumb.
I have a carousel showing a gallery of images at the top of my screen and a vertical flat list for the second (bottom) half.
How do I get the bottom half to take the full screen on swipe up and go back to half screen on swipe down? react-native-gesture-handler only offers swipeable left or right and not up and down.
You need to play around with flex. Apply flex on parent view with value in between 0-1 and change it accordingly on swipe. To detect swipe in react native, follow link below
https://dev-yakuza.posstree.com/en/react-native/react-native-swipe-gestures/
Related
Vue 3 and UI newbie here. Given this playground area with a code sample, I wanted
In the "collapse" animation of the menu, for the entire menu to slide out (but if you notice, the size of the menu changes first - making it occupy less than 100% of the height - and then it slides out)
If it is a smaller screen, I wanted the side menu to be collapsed by default and for it to be an overlay when sliding in (so the main contents are not pushed by it when sliding in)
As a Vue and UI beginner, I feel like I am going down the wrong paths when trying to explore solutions for these problems, and was hoping the community of experienced developers could help me with them.
I ended up using https://github.com/amirkian007/vue-awesome-sidebar. It is a pretty neat component.
Why some people make it duplicate? I I said that was my question...
First, I own this question and now I want to show a better example of my question. Honestly, I didn't try the answer yet because I'm curious is there anyway to solved this by code? Well, is it even possible? Besides, using an image as a background to solve this would be a problem, no? I mean, the user's phone is not always has the same screen size.
Here's an example of the idle state of my home screen. I got header with search bar and an horizontal scrollview of image banner. As you can see, if you notice, the banner is overlapping on the top of blue square and a curved blue view.
And what happen is user scrolled down? Here:
The curved view and banner is scrolled up. So, how do I achieve this? Thank you
You can create a png file, with transparent background and this curved border.
Then, set this file as ImageBackground of your header.
I am new to Xamarin and i want to know how the below said feature can be done in Xamarin.Forms ( Target devices android, windows phone and iphone)
POC Feature:
App should be able to display a stack of 10 card in the center of the screen. At a time only one card will be shown and other cards are hidden behind the top card. We need to show that the other cards are hidden in the back.
Every card contains one image to the right corner, one text description beside the image and one text description to the bottom of the card.
User should be able to drag the top card to the left corner to skip and drag to the right corner to accept/approve the card.
while dragging the card, card background will change the color and it will tilt to left and right (say -25 deg left and then immediately +25 deg right)when user catches and drags it a bit either to left or right.
Please find the links below:
IPhone: https://itunes.apple.com/in/app/tinder/id547702041?mt=8
I have seen the same Tinder code for ios in Xamarin.ios native, but i want to know how to do it with Xamarin.Forms which will run in all the three platforms without issues.
Xamarin.ios example:https://components.xamarin.com/view/xcardview
Thanks
Venkat M
If u want your answer in binary(yes/no) for all the points ,
1.Yes
2.Yes
3.Yes with a condition,There is no straight forward way to achieve it , you will have to deep dive in custom renderer for each platform to achieve it.(limited support for gestures in forms without custom renderer)
4. Yes ,Again may require writing custom platform oriented code .
I am trying to build my first website with bootstrap. However, when I view it on iPad and Mobil device. And I touch slide the webpage to the left side of the screen, it will not fall back to center position. However, when sliding to the right side if falls back to center as it should.
I should also say, i don`t use any bootstrap media queries. dont know how yet.
I made a picture to illustrated the problem
picture link
Link to my website
Kind Regards
Thomas
its because of your line class, width: 1140px. it should bee 100% or auto depending on what you want
How would one include an image on a website that behaves like the twitter users banner image which when you scroll one pixel it scrolls the page 2 pixels, moves the top of the image up one pixel and covers one pixel from the bottom of the image?
I don't know what to call this so I don't know how to search for it.
It is like the image moves up while the content behind it also slowly covers up the image like an extra layer of paper pushed up.
It's a form of parallax scrolling. There are plenty of good tutorials on parallax that I'm sure will help you achieve the effect you desire.