I am using Semantic UI 2.1. I have a modal which displays pictures. The pictures are varying sizes. I then have nav buttons to move back and forth between the pictures. The modal wants to keep resizing/recentering itself as I move through the photos. What that means is the navigation buttons keep moving up and down so a user can't just click, click, click to move through the photos. They have to click, move mouse, click, move mouse, etc.
Is it possible to have the modal fixed to the top? I am happy for it to resize but at a fixed top position. That way the nav buttons will stay under the user's mouse cursor.
Related
I am creating a navbar with dropdown menus for both desktop and mobile users. On desktop, the dropdown menus are displayed when the user hovers over the top-level elements and disappear when they mouse away from it. This is the expected behavior. However, on mobile, when I open the navbar and try to focus on each top-level menu item to reveal the dropdown content inside, I am running into an issue.
When I try to jump, for example, from the first dropdown to the 3rd dropdown, my tap appears to be in the correct place, but the instantaneous collapse back to hidden must happen before the next tap is registered. This leads to all of the menus collapsing back down. I have noticed that if I start at the lowest dropdown option and work my way upward, the issue does not occur because I am tapping on coordinates that are not reflowed when the content changes. I am looking for a solution that allows me to jump between any two navbar items, no matter the order or length of dropdown options without having the menu collapse down completely.
This is a link to what I'm working with. Content reflows to mobile layout at about 750px viewport.
LINK TO EXAMPLE
I have tried adding a delay to the transition property but it did not prevent the jumping of elements in my CSS dropdown menu when jumping between items in mobile navigation. I was expecting a solution that would prevent the jumping of elements and allow for smooth navigation between items in the mobile navbar.
I'm using react-beautiful-dnd in a project and when I'm dragging a draggable, the page auto scrolls if I drag it near the top, bottom or sides of the page. I could theoretically fix this problem by placing the drag and drop container in the middle of the page so that the user probably wouldn't trigger the auto scroll as the draggable wouldn't be dragged to the edges of the page, but I'd prefer not to alter the layout in that way. Is there any way to disable the auto scrolling?
My app uses a frameless window and I made a custom title bar along with it, I set the entire titlebar area to be draggable with -webkit-app-region: drag; so you can position the window on the desktop, but now I can't resize the app from those corners, is there any way to keep both?
Edit: I added -webkit-app-region: drag; to the buttons and the left title area because I lost control of the buttons and I can resize from corners and those edges, but the top edge is still inactive
I want to create a start experience like button on my A-Frame design. My experience needs to hide until you press a button and then it appears
Two approaches:
1) Hide the a-frame scene until a html button is pressed
This one is simple. Bring a white <div> up front (by setting up a high z-index), and hide it (display: none) when a button is clicked.
Fiddle here.
2) Hide the experience content "in-game"
This one is a bit harder. Hide the a-camera within a white sphere with a button, and hide the sphere, when the button is clicked.
Fiddle here
I'm building an app using foundation 5. I'm using foundation's topbar, which collapses to the (menu) hamburger button on small screens.
I want to add a button, that will be visible next to that button only on small displays.
I've tried adding the button outside of the top-bar-section, but that places the button outside of the entire topbar. I also tried putting it inside the title area but than it doesn't even render.
I know I can use show-for-small-only class to display the button only on small devices, but what I don't know is how force it to stay presented when the topbar collapses on small displays.