I have a div that has the "overflow" property set to "overlay". I have modified the scrollbar track to be transparent.
I'm able to view the background elements of the web page just fine, however, I'm encountering an issue when viewing elements inside of the div with the scrollbar. When an element goes behind the scrollbar, it doesn't render the part of the element that goes behind the scrollbar. This would make sense for a scrollbar that's not transparent (why bother wasting time rendering something that will just be covered?). However, because the scrollbar track is transparent, it should make sense to still be able to see the elements behind it.
Related
I put a box-shadow under a main content part. This works fine. However when scrolling, the main content is hidden behind the top parts (which have the same width as the main content parts) but the drop shadow is not. Is it somehow possible to show the shado only at thos parts where the element with the box-shadow is visible?
For illustration, here is an image
Even tho there is Code missing, I would suggest stretching the overlapping element over the window width. As the shadow is obviously not set to inset, and therefore rendered outside of the container boundaries.
As stated in the title. When you start tabbing it doesn't respect the fact that there is a nav overlay at the bottom of the screen. So certain links and buttons that are hidden behind the overlay will be tabbed to without being in view of the user.
Is there a way for me to override this functionality and force tabbed items into view?
Trying to intercept tab etc. and adjust the scroll position yourself is one possibility as you have stated but that could potentially lead to unexpected behaviour.
A better way to handle this is to adjust your layout to account for the overlay at the bottom.
In essence all of your main content would sit in a container (this may be the <main> element if your overlay at the bottom is an <aside> otherwise just use a <div>).
Make that container the page height minus the height of the overlay.
That way no content will ever be behind the overlay (which technically is no longer an overlay as nothing goes behind it).
The beauty of this is when you get to the very bottom of the page everything will be visible, with an overlay you may end up with something partially obscured if you don't give it enough margin / padding at the bottom.
I have found two things:
DocumentOrShadowRoot.activeElement this would one way we could capture the currently focused button or link.
Element.scrollIntoView() this would be how we force the focused element to the center of the viewport.
I have a problem with my website, i have created a css menu that is a dropdown menu on some elements. I use an image as a full cover. When i put my mouse over an element of the dropdown menu, the cover changes position. My test site is http://unibenefits.gr/test2/tripoli .
When you set a background-image to cover, it will fill the entirety of the element (usually HTML or Body) that you assign it to. This will change if the size of the element changes - e.g. if you resize your browser window, the background-image will resize to fit it.
Something in your dropdown menu is causing your site design to overflow horizontally (i.e. the design changes slightly on certain rollovers, so the design goes very slightly wider than the browser window). This, in turn, creates a horizontal scrollbar. The horizontal scrollbar takes up room in your browser window, effectivley resizing it. This is why your cover background-image is resizing - it's not actually changing position, though they look similar.
If you can identify what in your menu is causing the horizontal scrollbar to appear, you'll fix the problem.
Situation:
Mobile phone equipped with jquery, jquery mobile, jquery-ui.touch and jquery.ui.touch-punch, the latter to make quite some things like drag/drop etc available for touch screens.
Two div blocks from which to drag bullets from one sortable div block into other sortable div block.
On the screen those two blocks are visually adjacent to one another to make things work although suboptimal, because bullet disappears when dragged into the other div block. Nevertheless it can be dropped somehow because afterwards bullets appear indeed in target div block and disappear in original div block.
With help of css option overflow: auto, one can make scrolling appear in both blocks to scroll through the list of bullets.
Problem:
These scrolling sometimes work and sometimes not because in the latter case either the whole page starts scrolling or (after clicking on local div scrollbar) it starts zooming-in to such a level/depth that the whole page becomes useless.
In Firefox Mobile div scrollbars not visible but scrolling sometimes possible; in Opera Mobile div scrollbars visible but at random "deeply" zooms in after clicking a div scrollbar.
Tried out different solutions given on the Internet to block page scrolling or zooming-in, but to no avail. Some "solutions" make page scroll is locked, but then either all scrolling is locked and/or dragging is also locked.
Question:
Anybody any experience with above situation or could give some hint? I know this is bleeding edge because even JQ/JQM (or any other framework?) has not reach this point at the moment, though they are working on it.
jquery.ui.touch-punch is a plugin, although experimental, itś the only way I know so far who make drag/drop etc available for mobiles/touchscreens.
Thank you very much in advance!
I have a background that is a set of fairly complex gradients (done with CSS, not images). In the middle of the page is a fixed frame, and the content sits inside this frame. I can set overflow-y: auto on this frame to scroll the content, but I would like to be able to use the window to scroll instead.
Here is what the page looks like now:
I would like the scroll bar to be on the window instead. I can take the content outside of the frame and add margins as necessary, but the problem is that then the content will appear outside the frame. I could then cover it up on the top and bottom, but this is difficult/impossible because the background is not an image and is not solid.
Is there any way to have a transparent element at the top/bottom block text that scrolls under it? Can you somehow apply styles to content that overlaps?
Even the fanciest single-browser only solution that requires JavaScript is perfectly acceptable.
if all you're aiming at is hiding the scrollbar (and assuming you're ok with jQuery), i'd suggest to use something like slimScroll.
what's going on under the hood is simple: the designated container is assigned with overflow: hidden;, and attached with a hover handler - with the sole purpose of simulating a custom scrollbar in response to mouse-over events.
Try to explore jScrollPane features.
It's powerfull flexible JQuery plugin for working with scrollbars, possibly you will find solution with it.