I have run into a problem that a fixed div will swallow the scrolling for the parent div, however the scrolling for the page overall still works.
This can be seen in the following plunkr:
https://plnkr.co/edit/V1gbkrbhQduRFijlsrYz
The smaller sections can all be scrolled, but when they are clicked a fixed div is added that overlays that section. This stops the scrolling within that div, however there is also a small absolutely positioned paragraph at the bottom of each section.
Even when the fixed div is applied then scrolling on the absolute position paragraph still causes the inner div to scroll.
Does anyone know of a way to get the fixed div to pass the scroll to its parent container?
As a bit of background this is related to a modal that can have content go outside the modal and require scroll, however when a menu is opened in the modal then the scrolling breaks unless your mouse is directly over the menu. The plunkr was just to demonstrate the issue.
Code in plunkr:
Html:
<div class="container">
<p tabindex="1">
Lorem ipsum...
</p>
<div class="fixedOverlay"></div>
<p class="scrollableContent">I will let you scroll..</p>
</div>
CSS:
.container {
position: relative;
border: 1px solid;
margin: 10px;
width: 400px;
max-height: 300px;
overflow: auto;
}
p:focus + .fixedOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:10;
}
p:focus {
color: red;
}
.scrollableContent{
position:absolute;
margin: 10px;
width: 100px;
height: 100px;
border: 1px solid;
z-index:11;
}
Edit
Just to clarify, I want to be able to scroll even when the mouse is over the main paragraph text, however as this will be an angular directive I only have control of the styling in the fixedOverlay and scrollableContent.
To give more insight into the reason for this the fixed overlay is used to capture when a user clicks off the menu so the menu can close
Related
On my site, I have a tutorial that appears in a modal. The wrapper is a translucent gray that covers the entire site (including the parts that you must scroll down to see).
I am trying to center the modal vertically, but since the div covers below the fold (it goes where you must scroll down), the modal appears half cut off on the bottom of the page because it is placed in the center of the modal wrapper div. I'd appreciate it if someone could look at my code below and tell me how can I change the CSS so that the modal box will always appear in the center of the screen (vertically), even if the parent div moves below visibility.
Here's my code:
.modal-wrapper {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: #000000;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: absolute;
background-color: #fefefe;
border: 1px solid #888;
border-radius: 12px;
margin: 15% auto;
padding: 20px;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
You may be wondering what happens when the screen's width is smaller. As the browser size shrinks, the div slowly moves further up the page, but it is never fully revealed. I would like this modal to be centered similarly to the Wordle Help Modal. If you play around with it, you'll see that it always stays in the same spot no matter how small or large the browser's width is. Thanks in advance for any answers!
I've a long table that needs horizantal scroll. On it's last column I've buttons that show absolute positioned tooltips on hover. When the table itself doesn't initially create scrollbar, hovering the button, and showing it's tooltip, does.
<div style="width: 400px; height: 200px; border: 1px solid red; padding: 20px; overflow-x: auto">
<div style="background-color: red; width: 100%; height: 100%; position: relative">
My table that needs a scrolling parent div, but often times fits into the screen while it's buttons are not on hover
<div style="position: absolute; width: 100px; height: 100px; background-color: green; top: 50px; left: 350px">
My table button's tooltip that appear on hover.
</div>
</div>
</div>
In the above example. It makes sense for overflow-x to do it's thing and show the absolute element for visibilty. But it doesn't make sense, when I think that an absolute element is out of normal flow therefore overflow shouldn't take account of it.
Without going down the road of toggling overflow-x visible and scroll based on the table's width, What can I do in my case? Is there any CSS solutions for an absolute element to be not accountable in an overflow scroll?
Remove left: 350px; and add right: 0;
I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:
<a href="https://github.com/Nurdok/htmlify">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
It looks great, but some of the divs on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the page, not the window. This is how it looks right now:
Scrolled all the way to the left:
Scrolled all the way to the right:
It seems that the ribbon is placed on the top-right side of the initial window, and stays static.
What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).
Edit: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (not the browser view), and only be seen if I scroll to where its position is.
You can do a little trick and put your image into a div which has minimal-width.
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
and put that div at the beginning of <body> section.
position:relative makes that all children of that elements that have position:absolute are positioned absolute according to that div, not whole page. When viewport is bigger than min-width, the div is the same width as the viewport. When the viewport is smaller, the div will have the min-width and the image stays at the corner of the div.
Two alternatives
Sticking to the Viewport: To stick it to the viewport you should position your element "fixed" instead of "absolute"
<img style="position: fixed; top: 0; right: 0; border: 0;"
Sticking to a Container: And if you want it to be sticked to a container (so youn dont see it when you browse left) use absolute but do that container position:relative so its containing block is targeted
If you dont want to see the image when scrolling left then use a explicit width for this container I am talking about
Here is a JSFiddle example.
I used a squared div instead of an image. CSS code as follows:
#container {
width: 700px;
height: 700px;
background: #55ff90;
position: relative;
}
#image {
width: 70px;
height: 60px;
background: #ffff90;
position: absolute;
top: 0px;
right: 0px;
}
In case it's supposed to stick to the right top on horizontal scroll only, you can't accomplish this with basic CSS. Your requirement is stick to the right top for horizontal scroll but not vertical scroll. The first part of the requirement can be accomplished using position: fixed; though this breaks the second part.
How about always sticking to the right top of the website using a relative float: Fiddle
<div id='container'>
<div id='sticky'>x</div>
</div>
#sticky {
width: 100px;
height: 100px;
background: red;
float: right;
}
#container {
width: 100%;
height: 200px;
background: blue;
}
You should use float:right, adjusting margin if you need, e.g.: margin-right: 5px. Cheers :)
If I understand what you want correctly, you'd like for the image to stick to the top corner of the window UNTIL the window gets to a certain size (horizontally) and then stick.
If so, here is a plausible solution:
body{
min-width:1000px; /* or whatever you need it to be */
}
#ribbon{
position:relative;
float:right;
}
DEMO FIDDLE
DEMO FULLSCREEN
You can also use a container div with min-width, your choice.
Change position: absolute; to position: fixed.
As side note, put the style on the a instead of the image and add some z-index to make sure it stays on top of everything else:
<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
I have a div that has a footer image taking up 26px of space. The CSS is set to display a vertical scrollbar when needed, however I need to make sure the scrollbar doesn't overlap into my footer area, so I use bottom:26px; to bring it up. When that happens though the scrollbar is shifted upwards and I can't see the top of the content or the top arrow of the scrollbar. I am not sure what to change for the css to fix it so the scrollbar is at the very top, and leaves a 26px spacing at the bottom for my image. Any help is appreciated.
HTML
<div id="channel-container">
<div id="channel">
</div></div>
CSS
#channel {
color: #FFFFFF;
text-align: left;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
bottom: 26px;
}
#channel-container {
float: right;
width: 31%;
height: 100%;
}
Think about restructuring your html. If the div is supposed to scroll, but the footer is not then I wouldn't group them together. Set margin/padding to 0 on footer and same for bottom of scrollablediv. They should seamlessly mash together. Also obviates the need for using position absolute and a bottom value.
Here is a fiddle of what I think you are after. http://jsfiddle.net/vdZ6R/
<div id="container">
<div id="scrollablediv"></div>
<div id="footer"><img src="" /></div>
</div>
I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.
Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)
Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)
I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?
Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.
So you want:
A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.
See this demonstration fiddle which does all that.
The style sheet:
html, body, * {
padding: 0;
margin: 0;
}
.wrapper {
min-width: 500px;
max-width: 700px;
margin: 0 auto;
}
#content {
margin-right: 260px; /* = sidebar width + some white space */
}
#overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#overlay .wrapper {
height: 100%;
}
#sidebar {
width: 250px;
float: right;
max-height: 100%;
}
#sidebar:hover {
overflow-y: auto;
}
#sidebar>* {
max-width: 225px; /* leave some space for vertical scrollbar */
}
And the markup:
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.
Update
If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
I think this new demo fiddle does what you want:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
Demo: http://jsfiddle.net/AlienWebguy/c3eAa/
You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
This technique is seen on lots of websites today. What they do is give position: fixed to the div on the right side of the screen, so it is not affected by the page scroll.
CSS:
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
I assume you are looking for something like this.
http://jsfiddle.net/RnWdh/
Please notice that you can alter the width of #main_content as you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.
The trick to get the fixed menu to the right in your centered container is using left: 50% and margin-left to adjust it correctly.
For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;
One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#content and a div#rightPanel, the css may look something like:
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Just make sure that the left margin of #content is the same as the right margin of #rightPanel.
Here's an example: http://jsfiddle.net/william/ZruS6/1/.