so i'm working on a project in html and css, and I want my toolbar to stay on the page as the viewer scrolls down, but when the window is too skinny to display my full toolbar, I want to be able to scroll horizontally to see the rest of it
btw if it helps, I used a table element to make the toolbar
thanks,
bye
Not that hard..
You just need:
position: fixed;
To make it able to scroll horizontally when the window is narrow, just set some arbitrary pixel length (however wide you intend the toolbar to be).
Related
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
Situation: I've got an HTML page with multiple canvas elements on it. The canvas elements stretch the entire page (both vertically and horizontally), and there's no spacing between them.
Now I've got a problem on mobile devices, because if I touch-scroll over these canvas elements, the browser does not recognise this as a regular scroll event, leaving me unable to scroll the viewport at all.
Because the HTML page is taller than my viewport, I still want to be able to scroll to the bottom of the page, which I've now disabled. Any ideas to mitigate this effect are more than welcome.
You can see a demo of what I'm talking about # http://www.manuals.epaper-system.com/Tutorials/BXSLT4IndV6_220440/BXen/2014/20141115/BXEPen_v6_20141115_V220440.htm
Click on an article, then zoom in (to make the page taller than your viewport), close the article and try to scroll the page on your mobile browser while pinching on the PDF contents.
is any chance to have a scroll bar element that I can move where I want on the page but to link with my scroll box? I have created my scroll box ready but I need a scroll bar that should to be moved on other place on page.
Try jQuery Scrollbar - look at Advanced Scrollbars Demo page - External scrollbar.
If you want to use native browser scrollbar (or do not like custom scrollbars), you will have to use two containers - one with your scrollable content and the second one - with scrollbar that attached to first container. Look at question Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window
I have centered a div on a page for a group project and while the div itself is centered, the websites contents are centered with the scroll bar in mind. What I mean by this is that the web page contents are centered so that the width of the screen is measured without the scroll bars width. So if the monitor was originally 100px wide, it gets read as 100-(scroll bar width) px wide. Unfortunately, this has caused my fixed position div to be a scroll bars width off center from the rest of the site and it looks pretty funky. Any way to fix that? Can't use jquery, can potentially use a little bit of JS.
Here's the link to my site so you can see what I'm talking about. http://51713941.nhd.weebly.com/index.html
Lets see some code.
This can normally be sorted out with css. Margin:auto
You should use the box model concept in css to style and place the content on the site
Again, the question seems rather vague.
I have an overlay that I created with a width of 700px and height of 500px.
The contents of it will be quite long though and so the user will have to be able to scroll up/down within the overlay.
Could I get a suggestion on how to set this up taking into consideration the fact that scroll bars vary in width in each browser?
For example if I add 15px of padding-right to the overlay wrapper, it displays great in Firefox.
The contents will fit perfectly within the div and a horizontal bar will not appear.
However in another browser, the vertical scroll bar may be 20px wide, this would cause the contents to be forced to scroll horizontally, or, if I disable overflow-x, they would be cut off by 5px on the right.
How can I get it so that, no matter the browser, when the vertical scroll bar appears, the width of the overlay wrapper adjusts so that its contents can be displayed perfectly with no horizontal scroll bar?
Overflow property sounds like what you need: overflow:scroll;? But I guess I'm not sure what your concern of the different width of scrollbars is. How is it setup that this is variable?
Or a different look at your problem, put the div with your overlay wrapper inside another div and have the new div have the scroll property, thus making it so the first directly has nothing to do with scroll bars. Ex: [link]
EDIT: Looking at example you provided, do you want something like this? Trick is like I said above putting div around everything, but instead not giving it a width and having it display:inline-block; (display) so it fits the child (but the scroll wheel stays outside of the child).
EDIT 2: Note if you need it to center on screen, you must have another parent div surrounding the inline-block, and have the inline-block text-align:center;. (example)
use max-width and jquery scrollbar plugin jscrollpane.
You can define the scrollbar width and styles for each browser, if the need it.
http://jscrollpane.kelvinluck.com/