Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Stumbled upon this example on the web
https://redq.io/react-next-landing
So how is this effect called that the main slider seems to be unmovable and the rest of the body covers it while scrolling?
It's actually position: fixed. Fixed removes the element from the normal document flow which sticky does not. For this to proberly work the scrolling part has to be "above" the top part. Which is done with z-index: int as you can see in the following screenshot:
You can read more about in the link shared by Roko.
It's called sticky
Achieved using CSS position: sticky; and top: /*i.e:*/ 0px; you can find more info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
If the element was just to move at a different pace (slower then the rest of the document scroll) than it would be called: parallax.
Sticky slideshow example:
/* Quick Reset */ * {margin:0; box-sizing: border-box;}
header,
main,
footer {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header {min-height: 100vh; background: gold; position: sticky; top: 0; }
main {min-height: 100vh; background: white;}
footer {min-height: 50vh; background: grey;}
<header><h1>ABOVE THE FOLD SLIDESHOW</h1></header>
<main><div>MAIN CONTENT</div></main>
<footer><div>Footer links etc</div></footer>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
In React on a button click I make a small component (compSmall) visible on top of another big component (compBig). using css properties on compSmall such as
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
But when compSmall is visible on top of compBig, background (means content of compBig) still visible . But I want content of compBig is to be not visible clear or blur when compSmall is visible.
How to achieve this.
PS:
I can only apply properties on compSmall, not on CompBig. Since CompBig is the whole application component except compSmall.
What about make compSmall with the same size of compBig, so you will not see the compBig and inside the compSmall you can create another component or just a div with those css properties.
JSX
<CompBig>
<CompSmall className="compSmall">
<div className="content"></div>
</CompSmall>
</CompBig>
CSS
.content {
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
}
.compSmall {
/* Add the blur effect */
filter: blur(8px);
height: 100%;
width: 100%
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I would like to realize a simple tutorial to explain the role of the specific areas of my website realised with popovers.
My idea is that when user clicks on the button start tutorial, then some popovers are displayed in sequence on different elements, and when a popover is open, the rest of the screen is blocked and the user can only press next to close the current popover and open the following one, until the tutorial is concluded.
How can i do that?
When the modal is open, you have to use JS to temporarily add overflow:hidden to the body element (this will remove the scroll bars on the main window and prevent scrolling.)
The markup to manage this class toggle on the body has already been answered/provided here:
How to disable scrolling temporarily?
If you just require the user not to be able to click anywhere else, other than in the tutorial, you can make a simple overlay like so (View snippet in full screen):
html,
body {
overflow: hidden
}
.block {
height: 100vh;
width: 100vw;
background: black;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
}
.tutorial {
height: 300px;
width: 800px;
background: #ccc;
position: absolute;
top: 50vh;
left: 50vw;
transform: translateX(-50%) translateY(-50%);
}
iframe {
height: 100vh;
width: 100vw;
}
<iframe src="http://autotrader.com" frameborder="0" scrolling="no"></iframe>
<div class="block">
</div>
<div class="tutorial">
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to create a navigation similar to one shown here: https://www.dropbox.com/s/0lodaqh3st2qx1o/2014-07-11_8-56-53.mp4
I actually need to use it as a progress bar, where it jumps to next page as user progresses. But i want them to be able to navigate through pages if needed.
I can not add iframe of overflow-x because it will add a scrollbar. Is there any other possibility or approach?
Not sure if you want vertical scroll, or horizontal scroll like in that video but it's the same thing (actually vertical scroll is simpler). For horizontal something like this:
nav {
overflow-x: auto;
overflow-y: hidden;
position: relative;
white-space: nowrap;
height: 40px;
}
nav li {
display: inline-block;
position: relative;
text-align: center;
vertical-align: middle;
white-space: normal;
margin: 0 15px;
}
You basically fix the height of the menu and allow it to overflow-x. Then you place the li's side-by-side. The white-space: nowrap is also important ensure the list doesn't break on to a new line.
On desktop you will see a scrollbar, but on a mobile phone it will look better.
Fiddle: http://jsfiddle.net/V7mMB/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Following on from another SO question.
Is it possible to expand the div, left and right instead of the answers on the other SO question which only expand to the right and down...
cheers
Of course it is.
Structure
You need a parent container set to position: relative; and your actual div set to position: absolute;
This way you can modify position of your div without any worry. This should work as a starting point. You can see the child div being shifted top and left compared to the parent.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Expansion
so for the actual expansion, you would have to animate / change the left / top position together with width and height of the box.
For every 1px you shift your box left, you have to increase its width by 2px! to get an even expansion.
$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a header div and footer div. The header div never moves; however, the footer div must stay at the bottom of the window regardless of the screen size, i.e., a "sticky footer." In between these two divs is a dynamically populated content div.
The bottom of the content div sits directly atop the footer div, and it must move up and down with the footer div (when the screen size vertically expands and contracts.) It too can be considered "sticky."
However, if there is enough content, the content div must expand vertically (the bottom of the content div still remaining directly atop the footer div) to accommodate as much of the content as possible. This will happen until the top of the content div runs into the header div...
Then, if there is too much content to display between the header and footer divs, the content div will become scrollable, with the height of the content div contracting so as to never overlap with the header div or overlap with the footer div.
And again, the content div can never overlap the header div or the footer div. If there is not enough room between the two divs to display all the content in one view, the content div must become scrollable overflow-y: scroll;.
This explains my (fruitless) attempts so far:
I have yet to successfully accomplish any of this. What I do have is minimal, and, essentially useless. Some of my problems I have are: If I make the footer div position: absolute; bottom: 0px; It will be a "sticky footer" and remain on the bottom of my screen regardless of vertical screen size. However, with this absolute positioning, the content div will happily overlap with the footer. I tried to prevent this by making the content div position: absolute; bottom: 180px;. The 180px is the height of my footer div. This works...a little. It rapidly becomes a problem when content needs to be dynamically added. The top of the content div will quickly overlap with the header div... So then I set a fixed height for the content div, and enable scrolling when it exceeds that height, but that does not take into account a screen larger than my own where there may be more room to display content.
Ultimately, none of this works the way I need it to.
What is the best way to accomplish this using CSS and/or javascript (if required)? And, is there a good starting point to get me on the right track that you may know of?
Thank you for your help!
I don't think this is possible in CSS without flexbox. If you're lucky enough to only have to support browsers that support flexbox (or if you can fall back to the standard layout in older browsers), you can try this:
HTML:
<header></header>
<div class="content">
<div class="container"></div>
</div>
<footer></footer>
CSS:
header, footer {
position: fixed;
left: 0; right: 0;
height: 100px;
}
header { top: 0 }
footer { bottom: 0 }
.content {
position: fixed;
top: 100px; bottom: 100px;
left: 0; right: 0;
overflow-y: scroll;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: flex;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-o-align-items: flex-end;
align-items: flex-end;
}
Here's the fiddle: http://jsfiddle.net/qhKa9/
If you have no problem relying on JavaScript, there might be a different solution with far deeper browser support. Here's a shot at that.
CSS:
header, footer {
position: fixed;
left: 0; right: 0;
height: 100px;
}
header { top: 0 }
footer { bottom: 0 }
.content {
position: fixed;
top: 100px; bottom: 100px;
left: 0; right: 0;
overflow-y: scroll;
}
.container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
JavaScript (uses jQuery):
var $content = $('.content'),
$container = $('.container'),
containerHeight = $container.outerHeight();
$(window).resize(function () {
$container.css({
position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
});
}).resize();
Here's the fiddle: http://jsfiddle.net/N672c/
P.S. You should probably throttle that resize event listener, but that's a discussion for another day.