Hi this is the extension of the question which i have ask earlier
stop the stackpanel items inside scroll viewer to be at the display left side when scroll to-be-at-the-display-left-side-wh
I can get the horizontal offset value but i need to compare two images offset, if the scroll stops in the middle i need to move the image to get the full view kindly help me
You can't stop the scroll.
By cons, you can display your image and detect the event Flick (gestures WP7) to change the displayed image and use an animation (use blend).
Related
i'm new to figma and i wanted to build something where there are paragraph on the left side and a photos on the right side. so i used the horizontal scrolling with overflow scroll and i wanted to change the paragraph on the left side every time he user lands on a different photo available. how do i do that?
May this photo helps :
Unfortunately, that is not possible in Figma at the moment. You will have to attach the text to the scrolling container for it to appear while the user scrolls.
You cannot efficiently and without glitches create the interaction you described.
Though, I have a proposed solution.
It's not exactly what you're looking for but it works.
Create a frame (let's call it frame 1)
Add your paragraph to the left
Create another frame (let's call it carousel) within frame 1
Add your images in carousel and make sure Clip content is enabled on the frame
Add an arrow (shortcut: Shift + L) to the right of the image (to indicate the user to tap/click)
Duplicate frame 1
Move the all the images in your carousel to the left till the next image appears
Add an arrow Shift + L to the left of the image (to indicate the user to tap/click)
Go to the Prototype tab while you have carousel selected and on Overflow scrolling select Horizontal scrolling
Add an interaction On click to the right arrow to Navigate to frame 2 and the left arrow to Navigate to frame 1 with Smart animate
Go to Step 6 to add another image.
Carousel Figma Example
This is my first question.
I'm wondering if there's a way to create a scroll indicator with an overview image on a website. Like if I had an oversized webpage and I wanted a window in the lower right corner showing my location as I scrolled through the x and y as a cutout of the entire page.
I'm not even sure if scroll indicator is the correct term. I don't need any percentages or show of how close the scroll is to the end, I want to make an interactive display of what the user would be seeing on their screen as a piece of the overall map of the page.
Thank you for any help!
Edit: sketch
I'm essentially making a 'shopping cart' UI and I want it so that when the user hits the 'Add' button, a little tiny box-label appears at the bottom of the screen that says 'Added Item' or something like that.
My question is how to do that with my current set up. I am currently using a nested Grid inside of a Scroll view for the main content of the page. I want the box-label to fade in at the bottom of the screen and stay located at the bottom of the screen ontop of everything else even if you scroll, until the animation fades.
Now i figure it doesn't make sense to add it into the grid since the grid's end will be out of view in the scrolling part of the scroll view, and same for the Scroll View. I am considering nesting the entire scroll view inside of a stack layout but i fear the button will just be located at the end of the stack layout under the scroll view instead of on TOP of the scroll view. How do you recommend I achieve this effect?
I prefer not to use a custom renderer if possible due to my lack of experience in the three separate platforms.
Thanks
Make vertically oriented stack layout. When you need to add you animation add it programmatically to the stack. When it finishes remove it from stack. Your scroll view will not affect animation
I'm trying to implement a counter view that shows items count in NSTableCellView.
The weird thing is it gets moved to right automatically after resizing window or scrolling the NSOutlineView which has the NSTableCellView.
Here is some screenshots of it. You will be able to see the counter view which shows "42" being moved to right after resize the window.
Following is the init state of the counter view.
Following is the state after resize window.
Following is difference between init position and the position after resize window.
Cell Autoresize Property
Count Button Autoresize Property
I'm guessing this is related to scrollview but I was not able to find more clues about this issue. BTW, official Mail App on Mac works as same with this but the difference is the counter of the Mail app is being changed right after launch so it does not being moved after resize window.
Anybody knows about this? Any thoughts would be appreciated.
Here is a link that allows you to download the sample project that apple provides and you can reproduce what I'm facing.
Sidebar Demo App that providing by Apple.
You just need to change Deployment target before you run it from Project -> Targets -> Deployment Info section.
If I interpret the autoresizing screenshots correctly, the '42' control is behaving as specified. You've pinned the right side of the '42' counter to right side of the cell. And that is where it stays, glued to the right side of the cell.
The cell is pinned to the left side of the tableview and that is where it stays, glued to the left side of the tableview. You have not pinned the right side of the cell to anything and so when you resize, the right side goes where it pleases, only maintaining the specified width of the cell. If you want to glue the right side of the cell to the width of the tableView or column (not sure which it is), pin it. Do specify a minimum width for the cell. If you don't specify a maximum width, or fixed width, the cell will stretch and shrink with resizing. If you fix the width, only the right view or column will stretch.
The only thing which I disklike whith highslide is the fact that when I click a thumbnail and it gets bigger I only can shrink it back when I click exactly in the image area.
Is it possible to shrink the image back when clicking outside the image area?
(and optional also shrink it back when I hover outside the image with the mouse cursor?)
Thanks
If you use a dimming background (hs.dimmingOpacity=0.7, for example), clicking outside the image area will close the expander. This requires highslide-full.js. If you don't want a dimming background, just set the opacity to a tiny value, like hs.dimmingOpacity=0.01.
It might be possible to include an onAfterExpand event to close the expander when you hover outside the image, but I think I can guarantee that you wouldn't like it. If a visitor clicked on a thumbnail, but didn't just happen to have his mouse over the image when it opened, it would immediately close again. That would be very frustrating behavior for the site visitor.