CSS - Sticky div on horizontal scroll? - javascript

I have a div containing a form like this:
The results table below is very wide, so horizontal scroll is needed.
How can I make the form div sticky so that when I horizontally scoll
over the results the form stays on the top?
Only found documentation on vertical scroll with position:sticky, but nothing about horizontal scroll. Any advice will be welcome.

try to wrap the table in the div with class name wrapper or any name you want and add these styles:
.wrapper {
width: 100vw;
overflow-x: scroll;
}

Related

Bottom div with horizontally sliding content

I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!
If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/
This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.

Issue with position:fixed and hash tags (details in body)

I have a position:fixed; navigation bar. Whenever I go to mypage.html#myid, the navigation bar overlaps some of the content of myid. How can I move the entire page down a bit so that the navigation bar isn't covering the content?
P.S. I tried body{padding-top:50px;}
You can't use margin-top on the myid div? Your main content should be inside a div and this div should be inside the body then myid div can push down from the body to allow enough space for the fixed nav bar.
Some code would help...
There is a bit hacky solution needed.
#myID:before {
display: block;
content: " ";
margin-top: -285px; /* navigation height */
height: 285px; /* navigation height */
visibility: hidden;
}
The logic is to add hidden element before the #myID content so browser will give it a hidden space. Giving minus valie as margin-top will prevent it to give phsyical space.
Please have a look at here for detail: http://css-tricks.com/hash-tag-links-padding/

How to let content scroll without going over my header?

i'm new to webdesign and i have a little problem. I have a header(at the top), a navigation(at the left) and then the main content. I have set my header and navigation to position: abosulute so it won't scroll with the page. Now I wanna make it that the maincontent doesn't go over the header when you scroll. How can i do this?
image of the site
Here is the fiddle to get the desired layout... Header and sidebar position: absolute;
Fiddle: http://jsfiddle.net/FTtzc/1/
Demo: http://jsfiddle.net/FTtzc/1/embedded/result/
Put the main content in a container of its own and give that container a scrollbar.
Give your Header a Backgroundcolor and z-index: 2; and your content gets z-index: 1;
for further reference on z-index http://www.w3schools.com/cssref/pr_pos_z-index.asp
You can put your content in another absolutely positioned div, and then allow it to have a scrollbar with overflow: auto (scrollbar hidden when not necesssary) or overflow: scroll (scrollbar always visible).
Here is a fiddle to demonstrate: http://jsfiddle.net/YYmA9/1/

Force vertical scroll bar on animation

I have a div that animated from height: 0 to height: 80% (80% of the body) and sometimes the content in this appearing div will be bigger than the div, requiring a scroll bar.
Problem is the scroll bar isn't apparant when the animation is running, and it only appears when it needs to after the animation. (kinda a good thing really)
But I'm being picky because I'm adding the final touches to my site and when the scroll bar randomly appears, it shifts the content left and it just looks funny.
So I want the scroll bar to be there all the time regardless. Is this possible?
Your animation library must be setting overflow: hidden on the outer element, which is why the scrollbar disappears.
Try wrapping the content in one more div:
<!-- the outer element; pass this one to the animation lib -->
<div>
<!-- the scroll bar will appear on this element -->
<div style="overflow: scroll; height: 100%">
<!-- content here -->
</div>
</div>
Try it here: http://jsfiddle.net/e3BkK/
To always display a vertical scroll bar, you can use
#yourDivId {
overflow-y: scroll;
}
If your contained content has a smaller height than #yourDivId, then the vertical scroll bar appears disabled.
If it has a bigger height, then the vertical scroll bar becomes enabled.
Add overflow: scroll to the body element through CSS: http://jsfiddle.net/GMcdf/1/.
body {
overflow: scroll;
}

Weird HTML/JS/CSS scrollbar functionality puzzle

So, I have a particularly unique goal I wish to achieve with CSS, HTML and jQuery. Basically, I have a page element that when I mouse over it, I want scrolling to be disabled. I am currently achieving this by setting the body's overflow property to "hidden." However, the disappearing scrollbars means that content is shifting to the right to fill the void created by the disappearing vertical scroll bar. Is there away to make the page behave as overflow:hidden but still display scrollbar placeholders?
You could do it by having a div within a div, such that the outer div is scrollable (auto) and then resize the inner div on mouseover to be exactly the right size.
So by example...
HTML:
<div id="outerTest" >
<div id="innerTest" >
...content goes here...
</div>
</div>
CSS:
#outerTest {
width: 100px;
height: 100px;
overflow: scroll;
}
#innerTest {
overflow: hidden;
}
jQuery:
$("#outerTest").hover(function() {
$("#innerTest").css({width: "100%", height: "100%"});
}, function() {
$("#innerTest").css({width: "auto", height: "auto"});
});
Alternatively, you could also implement a jQuery-based scroll bar. jScrollPane

Categories