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.
Related
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'm putting together a horizontally scrolling layout to display nested content (think files within folders within folders ad infinitum). For purposes of graceful degradation, is there any way whatsoever to load the page initially scrolled all the way to the right, without JavaScript? It's easy to scroll it all the way to the bottom by adding <a id="foo"></a> to the end of the page and appeding #foo to the URL, but that doesn't seem to work horizontally.
Yep! Check out this fiddle. You can see that I'm using an anchor to reference an element way on the right of the page (the yellow div), and the browser is scrolling that element into view just as it would scroll downward to bring an element into view that was below the window's edge.
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
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'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right