I'm rendering a video progress bar with the following:
<div class="video-timeline">
{{#isolate}}
<div style="width: {{progressBarWidth}}" class="video-progress-bar"></div>
{{/isolate}}
</div>
The progress bar fits inside the timeline and extends to the right as the video's time advances (based on a session variable). The goal is to observe clicks on the timeline so I can change the play location.
Click events on the timeline to the right of the progress bar are observed correctly. However, while the video is playing (and the progress bar is being continually rendered) a click on the progress bar itself will infrequently bubble up to the timeline click handler.
How can I observe these events, or is there a better way to do this altogether?
Update: Using an overlay (as suggested by datacarl) is probably best if you absolutely need to have an element which is updated multiple times a second and controlled by meteor. This worked for me but, I ended up reverting to a jQuery-based solution for that particular part of the template. As much as I dislike mixing jQuery events and meteor events, jQuery was provided a more responsive and less error-prone way to update the progress bar.
I think the simplest way to handle this is to absolute position a div.progress-bar-overlay on top of div.video-progress-bar and observe the clicks on .progress-bar-overlay instead. Give it the same height and width as .video-timeline. That way you do not have to handle whether the user clicks on the .video-timeline or on the .video-progress-bar.
Related
I'm working on a bookshelf project. I'm still new to programming, but i managed to make the Google Books API work so far, but when I receive the search results, my side drawer (side menu) doesn't expand.
Also, if I want to make a "load more results", what would be the best approach?
Video of the problem: https://www.loom.com/share/12ab331cf37f41038f6da294f5e5ea29
Vercel: https://academicshelf.vercel.app/discover
Best regards,
Frederik
So rather than "expanding" the side bar, make it's height: 100vh and position: fixed. That way, as the user scrolls, the side bar scrolls with them.
As for the "load more results" bit, this is dependent upon your implementation. You're either going to want to paginate or do "infinite scrolling". Pagination can take on the look of a bar at the bottom with total results and different pages, or a simplified version of it would literally just add an element to the bottom that says "load more..." and will load the next set of elements by expanding upon the current list. This prevents the client from downloading a lot of content for items they will never see. For performance, I would recommend lazily loading the next set of results so that when the user clicks the button, it loads the next set instantaneously.
I am making a multiple choice quiz app in xamarin forms as like attached image[https://i.stack.imgur.com/s3A5d.jpg]. when i click next button then next question and answer is coming but i want to put animation on that. I want when i clicked on "next" button four option will come from bottom in fly in effect.any effect is acceptable, no issue. But my actual issue is when i used await TranslateTo or ScaleTo in all button it will happen but the effect is coming one by one. After first button effect complete then second is starting, But i need same effect in all 4 button in same time. if any body suggest it can be helpful to me.
You can add Animations to a parent Animation and then execute all of them togethers.
Here your ask is already answered:
How to execute multiple animation at same time
Our goal is to have two button-like views in our React Native game. They will each consist of a View wrapping around some animated image or alike. The views should be touchable at the same time.
This means: We want to trigger some action on the onTouchStart (like add a symbol to a text) and change the state of the view while it is pressed (for example to change the image in the background or something like that).
Using onTouchStart did not work, since on Android (and only there) we had a Problem: When keeping the first button pressed, pressing the second button with a second finger caused the first callback to trigger, not the second one.
How should we implement this correctly without messing with native code?
So I am having this issue with using Google VR reticle where I cannot click a button. I have an image attached showing the heirarchy and the PlayButton is what I am trying to click. The Canvas has a Graphic Raycaster, the button has an Event Trigger that calls the method to navigate to the next scene. The UpScrollPanel, and DownScrollPanel work just fine. The EventSystem has the Gaze Input Module, as well as Event System, and Touch Input Module.
Any ideas on how to get this working? I have watched a few videos from NurFACEGAMES and while they helped a little, I haven't gotten the click to work yet.
Oh, and I am using Unity 5.3.4f
Sometimes things can get in the way of the button, make sure that no other UI elements overlap it, for example text borders (which are actually larger than they appear). You can also fix this by moving the button up the hierarchy among its siblings, I believe the first child is top.
Also try moving the button up the hierarchy if possible, sometimes UI having certain parents makes them not work
The canvas object should have a graphic raycaster
I found the issue to be unrelated to anything I thought it was. The menu I was using is a prefab I also use in another view that isn't VR. The scrollrect was loading that prefab, instead of the modified one I was using in the VR menu, and therefore the triggers I had added to the button were no being used when the app loaded.
I have a bit of doubt regarding my application which is being created using Mate framework. The first thing user has to do is to log in, so I created Login.mxml view. After a successful login I need to display the main view with applicationControlBar at the top and a workspace below. At the moment I have two separate views, so if I understand correctly it makes sense using ViewStack.
Thing is, I'd like also to display some kind of panel with buttons on top of the workspace after login - here is screenshot. After clicking on a button the panel should dissapear. To complicate things a little bit more, there is a possibility for this panel to change state. Clicking on a specific button may result in showing progress bar at the bottom of panel.
I feel I should create separate view, MenuDialog.mxml and put there buttons, progress bar and states, but how to display it on the top of the workspace? I hope my problem is clear enough :)
I would make the panel a popUp, with the main application (or the ViewStack's parent container) as the parent of the popUp. You can use the PopUpManager Class to close it based on user actions within the Panel.
Assuming that perhaps you do not want a modal login style panel (which many apps these days eschew) then you should absolutely use states rather than ViewStacks.
States are a much cleaner way to distinguish the various, uh, states that your UI can be in -LOGGED_IN, LOGGED_OUT, etc.
It may take a little to get used to working with states, but once you do, you'll never go back. :-)