I have a list of items that appears inside a modal on my page. I want to be able to access extra options (i.e. delete, rename) on each element by swiping the list element to the left to reveal the options underneath.
I have created a working simple swiping animation using javascript and the css translate attribute, but the element goes off the edge of the modal when I swipe it, which I don't think looks good. I want it to stay inside the modal and go under the edge whenever it is swiped to the left.
Here is a diagram of what I want:
My first thought was to add a colored box just outside the edge of the modal, but that would obviously show a big square beside the modal. Perhaps there is a way to "chop off" part of an element somehow. How would I do this?
I can't really understand what you want, like I have no idea what those green boxes are for. But to my understanding, it seems like you just need so that the swiped element don't go outside the modal right? if so, you just need to add overflow: hidden to the modal/container class. That way, anything that goes off will be hidden. If you still want the modal to have a vertical scroll capabilities, then use overflow-x: hidden
Related
This is for a Chrome Extension I'm working on.
The scrollbar isn't coded into the HTML/CSS/Javascript anywhere in its present form. When enough elements get added to the Extension memory, and a button is clicked to reveal a user's saved items, the default browser scrollbar simply appears there.
When it does appear, it pushes all previously visible content left, shifting it all from its previous position, and it's pretty visually clunky and unattractive.
How could I instead make this scrollbar appear to the right of the pop-up div container -- with everything inside of there remaining in their original position?
Thanks!
I am trying to have images appear on click of a button. I have that process working, but I'd like for the users/players to not see the buttons I will be clicking.
Is there a way to set a space where the button 'still lives' but isn't visible?
I'm pretty sure I'm going to need to get cute and hide the buttons on screen. However, if i can set them to specific spots and have them invisible, but clickable, that would be ideal.
Thanks in advance for the help.
I'm using HTML, CSS and Java. There's no JQuery in the code (for context)
The question itself is not clear but from what I understand you can do something like that in a various ways:
-- If the case is making them visible before click, you can set their z-index to "-1" and when you need to click them, change it to "1"
-- If the case is buttons are going to stay on the page and clickable but no one can visually see them, you can set their opacity to 0. Even they are invisible you can still click them via this method.
--> To position them on a specific area on your page you can use your CSS as the way you want. No need to worry about opacity change.
I want a panel with a start button in the middle of the page. When the button is clicked the panel should move up and disappear. The content of the page should start loading after the button is pressed. Something like a start button for a game.
Currently I use two html pages. The first is the panel(index.html) and the second is the content. When I press the button it moves the panel up, removes it and loads the second page. It feel a bit clunky so I wonder is there a better way to do this?
I'm not sure if this works for canvas. As I said in the comments I suggest doing a text-align:center;. This works for text and buttons. To center other elements such as divs try margin: auto;. Good luck with canvas :-)
I would also suggest expanding your css knowledge because text-align is very common to use as well as margin:auto;.
Using the jQuery popbox library (http://gristmill.github.io/jquery-popbox/index.html) I encountered the following problem:
I have a huge div which has it's overflow set to auto. It is actually a tournament grid displaying a lot of matches to be played. Each match (separate divs) has a small info icon and upon clicking, I'm using the Popbox to display additional information in the window that comes up.
This is all working correctly, however, whenever I press the info icon on a div that's close to the bottom side or the left side of the parent div which has it's overflow set to auto, part of the popbox window is not visible as it ends up outside of the parent div. I'm looking for a user-friendly way to solve this issues.
Setting the parent's div overflow to visible is not an option as I need the scroll bars to appear if it gets too large. It would be nice though if I could make the Popbox window go outside of the parent div and be completely visible.
The other idea that I can think of right now is to set special classes to the info icons close to the edges and adjust the popbox window to the right/top so it is visible in the parent div regardless of its overflow.
I suggest you to use some special classes and make the popover "pop" on top/right.
You can see an example here: http://getbootstrap.com/javascript/#popovers
If you want to use Bootstrap you can make a custom build here: http://getbootstrap.com/customize/?id=6493526
Popover css+js is only additional ~ 10k min+gzip
Here is my current situation:
I have a web page containing a couple scrollable divs. Each of those divs contains a number of objects. I am using YUI to display popup menus of actions that can be performed on each object. Each object has its own menu associated with it that is constructed and displayed dynamically. The popup menus can be large and can overlap the bounds of the scrollable div.
From what I believe are issues with focus (the menus must be accessible), when I hover the mouse over an action that lies on top of an edge of the scrollable div, the div automatically scrolls, moving the content but leaving the menu stationary. Trying to move the menu dynamically when this happens is not something I want to do as I believe it would provide a poor user experience.
So I need to prevent this focused menu from scrolling the div. My idea for providing the best user interface is to prevent these inner divs from scrolling when a menu is open. This leaves the menu positioned in the optimal location to show the user which item is being acted upon. If the user wants to scroll the box, they can click to close the menu and then scroll normally.
How can I do this? I need a solution that works across the major browsers.
My first thought was to listen to the onscroll event for that particular element. Unfortunately, there does not seem to be an easy way from there to just prevent the scrolling from happening. For one, my JavaScript event code appears to execute after the actual scrolling has occurred.
Then, I thought that since my code is being run after the object has scrolled, I could just reset obj.scrollTop and obj.scrollLeft. Sure enough, this appears to work, though I am worried that on slow browsers the user will see the content inside the div "jump around". Also, it would be really nice if the amount the element scrolls is part of the event object. Is it stuck in there somewhere? I'm looking for an alternative to having to store the scrollTop and scrollLeft variables for this element and then using them while the scrolling is temporarily disabled.
What is the best way to solve this entire problem?
I agree with Anthony regarding the presentation of the functionality you're trying to disallow. If you're going to disable scrolling, then you should make that part of the page visually disabled or removed.
To that end, you can position a semi-transparent div on top of the scrollable div in question, which would capture the mouse events and visually show that the scrollable div is inactive for now. It would be hard to make cross-browser compatible and wouldn't be perfect, but then again very few client-side tricks like this are.
The simple answer is no you can't do this. Its doubly no if you want a cross-browser solution.
Providing the user with the clear affordance that something can be scrolled then denying them that is just plain poor UI design.
Ok so after your edit it turns out you are not actually trying to prevent the user from scrolling.
The main answer remains true though. It sounds as though the focus is going to rectangle (probably an anchor?) that is not fully in view and causes a scroll. Is there a reason this rectangle must get the focus? For accessibility?
What if you didn't have overflow: scroll and instead you used overflow: hidden and provided scroll up/down buttons that allowed the user to scroll when necessary? These buttons could of course be disabled easily.
Though it may not be the answer you are looking for, if you are to set the display value of the div to 'none' while the page loads (from the server) and then have an event wired to the page load (either pageLoad in ajax.net or attach it to the onload event via javascript) that will make the div display set to 'block' .. that would ensure that slower browsers wouldn't see the div 'jumping around' (could even put a 'loading' image in the div to show users it's doing something and not just invisible)
sorry i couldn't provide a more complex/fluent solution.
I found a way to work around this issue. By removing the menu element from the scrollable div and then appending it directly to document.body, the browsers all stop trying to scroll the div to reveal the focused element (even though the element is already completely visible).
Thanks to all for your time and your answers!