I'd like to see a background image (not full screen), previously positioned as "fixed", slowly move toward the top part of the web page and then disappear like happens with absolute positioning, but only after a certain number of pixels.
I used the "addClass" event to change the positioning from fixed to absolute.
Reached the wanted amount of pixels, the image is affected by the new class but instead of starting a smooth movement upwards, it jumps in the position in which it would be if it has always defined by an absolute position. Instead, I like it to start the movement from the position where it is.
This is the Jquery code (the class ".scrolled" just says "position:absolute")
<script>
$(document).on("scroll", function () {
var pixels = $(document).scrollTop()
if (pixels > 350) {
$("img").addClass("scrolled")
} else {
$("img").removeClass("scrolled")
}
})
</script>
UPDATE
In the following, I'll add my HTML and CSS code. I'm sorry guys, I'm a beginner and I didn't wonder that would be fundamental having them to answer my question.
HTML
<div class="grid"> <div class="row"><div class="col-6"><img src="https://www.illibraio.it/wp-content/uploads/2017/09/francesco-carofiglio-1.jpg" alt="FotoPortfolio"></div></div>
<div class="row">
<p class="page">
Hi everybody!<br>
My name is Francesco Cagnola<br> and I'm a communication designer.<br>
Recently, I've graduated at Politecnico di Milano with a degree in Communication Design.
I'm experienced in videomaking and photography but I can do beautiful graphics too.
I'm based in Milan but I'm spending a period in London to breath this vibrant city!
<br><br>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</p>
</div> </div>
CSS
.grid {
width: 100%;
}
.row {
margin-bottom: 1%;
display: flex;
justify-content: flex-start;
}
.col-6 {
width: 50%;
}
body {
background-color: #000000;
color:black;
margin: 0px
}
img { position: fixed;
top:15%;
justify-content: flex-end;
margin-left: auto;
width: 50%;
right:5%;
z-index: 0;
}
.scrolled{
position:absolute;
}
.page {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 400;
color: white;
position: absolute;
top: 10%;
padding: 14px 16px;
width: 60%;
float: left;
}
When you are removing class scrolled, you can add another class called for example 'animation'.
And 'animation' will have this in CSS:
.animation {
position: absolute;
animation-name: godown;
animation-duration: ...s;
animation-fill-mode: forwards;
}
#keyframes godown {
0% {
top: 350px;
}
100% {
top: 0px;
}
And this will be jQuery:
if (pixels > 350) {
$("img").addClass("scrolled");
$("img").removeClass("animation");
} else {
$("img").removeClass("scrolled");
$("img").addClass("animation");
}
But scrolled has to have this in CSS:
.scrolled {
position: absolute;
}
I'm on my mobile now so my testing is limited, but it should actually work.
UPDATE:
This is CSS:
.grid {
width: 100%;
}
.row {
margin-bottom: 1%;
display: flex;
justify-content: flex-start;
}
.col-6 {
width: 50%;
}
body {
background-color: #000000;
color:black;
margin: 0px
}
img {
position: fixed;
top:15%;
justify-content: flex-end;
margin-left: auto;
width: 50%;
right:5%;
z-index: 0;
}
.scrolled{
position:absolute;
animation-name: godown;
animation-duration: .5s;
animation-fill-mode: forwards;
}
.page {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 400;
color: white;
position: absolute;
top: 10%;
padding: 14px 16px;
width: 60%;
float: left;
}
#keyframes godown {
0% {
top: 350px;
}
100% {
top: 0px;
}
And this is JS:
$(window).scroll(function(){
$(document).on("scroll", function () {
var pixels = $(document).scrollTop()
if (pixels > 350) {
$("img").addClass("scrolled");
} else {
$("img").removeClass("scrolled");
}
});
});
And it works fine, when you scroll 350px from top, img goes smoothly to position absolute.
2nd update:
You can "simulate" position: fixed in jQuery. Just like this:
$(window).scroll(function () {
var pixels = $(document).scrollTop()
if (pixels < 350) {
$('img').css(
'top', $(this).scrollTop() + "px");
} else {
$('img').css(
'top' : '0px',
'transition' : '.5s');
}
});
And CSS:
img {
position: absolute;
}
Then put a position relative on the CSS for images without top, left, right, bottom and it'll be alright.
Don't really know if you don't put your HTML and CSS
Related
I'm working on a music streaming app for that I want to make the sidebar sticky (not fixed) but after lot of research on internet and apply my method still I am failed to fix the bug. Using the "align-self: flex-start; position: sticky; top: 0;" it's working, but still there is a problem. It's working perfectly when we scroll from bottom to top but when we scroll from top to bottom it get fixed and starts scrolling when we scroll up to 50% of body. I want to fix this problem please check while scrolling from top to bottom.
NOTE: I've found some jQuery and JS plugins for sticky sidebars but the problem is that I can't use them in my project because I'm building this project entirely in vanilla JavaScript. So looking for a JS and CSS expert to help me fix this bug.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
header {
width: 100%;
height: 100px;
background-color: blue;
color: white;
padding: 10px 0px 0px 10px;
}
main {
margin: auto;
padding: 10px 0px;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
.main-content {
background-color: red;
height: 2000px;
margin-right: 5px;
color: white;
padding: 10px 0px 0px 10px;
}
.sidebar {
background-color: green;
height: 1000px;
margin-left: 5px;
color: white;
padding: 10px 0px 0px 10px;
/*----- Not Working Perfectly-----*/
align-self: flex-start;
position: sticky;
top: 0;
/*----- Not Working Perfectly-----*/
}
footer {
width: 100%;
height: 100px;
background-color: blue;
color: white;
padding: 10px 0px 0px 10px;
}
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<section class="main-content">
<h1>MAIN CONTENT</h1>
</section>
<section class="sidebar">
<h1>SIDEBAR</h1>
</section>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
I would start by setting the height of the sidebar to 100vh, so it's always as big as the viewport. Right now it is fixed to 1000px.
.sidebar {
height: 100vh;
}
Your .main-content and .sidebar shouldn't have fixed heights, their heights should depend on their content. Replace fixed heights with some text.
When using display: grid on the parent element, all their children are stretched by default (align-items: stretch), their heights depend on the child that has the largest content or height.
To avoid equal heights for children use align-items: start on the parent element or align-self: start on a specific child element (in your case .sidebar).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
scroll-behavior: smooth;
--space-sm: 10px;
--space-md: 20px;
--space-lg: 30px;
--space-xl: 40px;
--text-color: #fff;
--header-bg: blue;
--mainContent-bg: red;
--sidebar-bg: green;
--footer-bg: blue;
}
body {
display: grid;
grid-gap: var(--space-sm);
padding: var(--space-sm);
color: var(--text-color);
}
header {
padding: var(--space-sm);
height: 100px;
background-color: var(--header-bg);
}
main {
display: grid;
column-gap: var(--space-sm);
grid-template-columns: 2fr 1fr;
align-items: start;
}
.main-content {
background-color: var(--mainContent-bg);
padding: var(--space-sm);
}
.main-content p {
margin-bottom: var(--space-md);
}
.sidebar {
position: sticky;
top: 0;
padding: var(--space-sm);
background-color: var(--sidebar-bg);
}
.sidebar li {
list-style: none;
}
.sidebar a {
text-decoration: none;
}
footer {
padding: var(--space-sm);
height: 100px;
background-color: var(--footer-bg);
}
<body>
<header>
<h1>HEADER</h1>
</header>
<main>
<section class="main-content">
<h1>MAIN CONTENT</h1>
<p id="paragraph1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="paragraph2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p id="paragraph3">
But I must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete
account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness. No one
rejects, dislikes, or avoids pleasure itself, because it is pleasure,
but because those who do not know how to pursue pleasure rationally
encounter consequences that are extremely painful. Nor again is there
anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in
which toil and pain can procure him some great pleasure. To take a
trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any
right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces
no resultant pleasure?
</p>
<p id="paragraph4">
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.
</p>
<p id="paragraph5">
On the other hand, we denounce with righteous indignation and dislike
men who are so beguiled and demoralized by the charms of pleasure of
the moment, so blinded by desire, that they cannot foresee the pain
and trouble that are bound to ensue; and equal blame belongs to those
who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly
simple and easy to distinguish. In a free hour, when our power of
choice is untrammelled and when nothing prevents our being able to do
what we like best, every pleasure is to be welcomed and every pain
avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures
have to be repudiated and annoyances accepted. The wise man therefore
always holds in these matters to this principle of selection: he
rejects pleasures to secure other greater pleasures, or else he
endures pains to avoid worse pains.
</p>
</section>
<section class="sidebar">
<h1>SIDEBAR</h1>
<ul>
<li>Paragraph 1</li>
<li>Paragraph 2</li>
<li>Paragraph 3</li>
<li>Paragraph 4</li>
<li>Paragraph 5</li>
</ul>
</section>
</main>
<footer>
<h1>FOOTER</h1>
</footer>
</body>
Also, you don't need to explicitly declare width: 100% on header and footer elements because they are block-level elements, by default they have width: 100%.
I am trying to make a sidebar that reveals on pressing a button.
Everything works fine until I put some content in the sidebar. The background jumps when the sidebar is revealed.
Here is sample code:
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
How do I stop the Jump without removing the content?
I also tried playing with variations of display and visibility to hide the elements.
As stated in the previous answers, your content jumps because you are animating the width of the container. The content (text) within it, will always try to fit, and this is why your have this effect.
In order to prevent this, do not animate the width, but animate the position.
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: transform .5s; /* modified */
background: green;
transform: translateX(120%); /* added */
}
#sidebar.showSidebar {
transform: translateX(0);
}
Remove this part from your code:
#sidebar p{
display: none; /* need to remove this from your code */
}
You might also need to add overflow-x: hidden to the Parent Element of your sidebar (in this case, the <body>), if horizontal scrollbars appear.
And this is the only JS required:
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('sidebar').classList.add('showSidebar');
});
To hide the .sidebar again, you just need to remove the .showSidebar class :
document.getElementById('sidebar').classList.remove('showSidebar');
Using transform: translate() within CSS transitions is more efficient than using 'width' or 'right', as it doesn't cause layout/reflow (recalculation of the whole elements' size and/or position). It, along with opacity, are the only two transitionable properties that only affect the 'composition' part of the rendering of the webpage.
high-performance-animations article - the exact same principles apply to transitions also.
The "jump" is caused by the fact that when you click on the button, the offset width of your text can't really fit in the div that is growing. In other words, there is an instant, where the div that contains the text is something like 1px while your text is really bigger. So, there is many solutions including:
Hide the text overflow (it may work but the text will still "dance" while the div is growing)
I was thinking of something like :
#sidebar p{
display: none;
overflow: hidden;
}
Put a delay before displaying the text so the div will have enough time to be wide enough for the text :)
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let div = document.querySelector('#sidebar div');
let text = div.children[0].innerText;
div.children[0].innerText = "";
div.style.display = 'block';
setTimeout(()=>{
div.children[0].innerText = text;
}, 500)
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar div{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
</div>
</div>
I've got a much more elegant solution than my previous attempt which I deleted as it caused an unwanted scrollbar. Simply add a child DIV for the sidebar contents with a fixed width and put overflow hidden on the sidebar. The sidebar can grow in width revealing the fixed width content which is hidden by the overflow. Any good?
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
overflow: hidden;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar-contents {
width: 40vw;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div id="sidebar-contents">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
</div>
So On my webpage I have a number of large images which can be seen as you scroll down. They display fine on my normal sized browser, however when I shrink the size of the browser, the white space between the images increases quite drastically. I would like the white space between the two images, however I do not want the gap between them to change and enlarge. The same is present for the about section at the top as when the browser resizes, the about section's white space increases and the gap between it and the image below enlarges.
I am trying to make my website responsive (hence the %) however it isn't working too well right now so I might stick to making a normal website. However, any useful responses whatsoever will be greatly appreciated!!!
html {
font-family: 'Lato', sans-serif;
overflow: scroll;
}
.about {
width: 100%;
height: 50%;
background-color: #fffff;
position: absolute;
}
.about h1 {
text-align: center;
font-weight: 900;
font-size: 50px;
color: #00b4ff;
}
.about p {
text-align: center;
margin-left: 30px;
margin-right: 30px;
}
.books {
max-width: 100%;
height: auto;
position: absolute;
left: 0px;
top: 990px;
z-index: -2;
background-position: center;
}
.business {
width: 100%;
position: absolute;
left: 0px;
top: 1800px;
z-index: -2;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style1.css"/>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'/>
</head>
<div class="about">
<h1>ABOUT</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum <br><br>
ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
<img class="books" src="http://delightedimages.com/wp-content/uploads/2015/07/Delighted-Images_Nicole-and-Ryan_Joshua-Tree_Engagement_82_0406.jpg" alt="books"/>
<img class="business" src="http://nikonrumors.com/wp-content/uploads/2015/04/Nikon-1-J5-sample-images-4.jpg" alt="business"/>
</div><!-- /container -->
Don't use absolute position to place your images. Either build yourself flex-containers for the images using tags or else use margin-top, and margin-bottom tags to define the white space between your elements, and use the browser's normal layout to your advantage. The following will set the top image to appear exactly as it appears in your design, but sets spacing between the two images by using margins, dynamically changing image size to match the window width. If you want more white space or less, just change the margin number for the second image. If you want the distance to be relative to screen size instead of pixel size, use a percentage instead.
.books {
max-width: 100%;
height: auto;
position: relative;
left: 0px;
margin-top: 990px;
z-index: -2;
background-position: center;
}
.business {
width: 100%;
position: relative;
left: 0px;
margin-top:100px;
z-index: -2;
}
Here is a working fiddle. https://jsfiddle.net/pjgbp7jo/
Your images have those huge whitespace because you have them absolutely positioned. If you want your images to display on top of each other make them display: block; instead of absolutely positioning them. Or, if you make your images fixed width, they will not resize and you won't have those whitespaces.
why you did not using flexbox?!
.container {display: flex;flex-direction:column;}
.about {
background-color: #fffff;
height: 50%;
}
.about h1 {
text-align: center;
font-weight: 900;
font-size: 50px;
color: #00b4ff;
}
.about p {
text-align: center;
margin-left: 30px;
margin-right: 30px;
}
.books {
height: auto;
z-index: -2;
background-position: center;
}
.business {
z-index: -2;
}
Good Luck
Practically I have a vertical tabs menu and what I am trying to achieve is to have the menu wrapper height dynamically set depending on the content or the tabs height (the one that is bigger wins)
Here is a jsfiddle of what I have made so far : http://jsfiddle.net/f9zt9xqr/2/
HTML:
<div id="page-wrap">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
<p>Stuff for Tab One</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>Stuff for Tab Three</p>
</div>
</div>
</div>
</div>
CSS:
* {
gmargin: 0;
spadding: 0;
}
body {
background: #f9f9fc;
}
#tab-1{
position: absolute;
top: -200px;
left: -200px;
}
#tab-3{
position: absolute;
top: -200px;
left: -200px;
}
#tab-2{
position: absolute;
top: -200px;
left: -200px;
}
#page-wrap{
position: relative;
background:#123456;
}
.tabs {
position: relative;
hmin-height: 200px;
/* This part sucks */
clear: both;
smargin: 25px 0;
}
.tab {
rfloat: left;
sposition:absolute;
height: auto;
}
.tab label {
background: #f5f5f9;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
dposition: relative;
left: 1px;
width: 70px;
display: block;
}
.tab[type=radio] {
display: none;
}
.content {
display:none;
position: absolute;
top: 0px;
left: 92px;
background: white;
right: 0;
zbottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
sborder-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
8overflow:auto;
display:inline;
z-index: 1;
}
on the second option you can clearly notice that the page-wrap doesn't extend to the content size
I was thinking that this is because content is an inner element of tab and therefore should be modified there but it didn't work either.
Any suggestions how to achieve that and maybe don't mind explaining what I was doing wrong ?
.tabs { display:table; }
label {display:table-cell;}
.content {display-table:cell;}
remove position absolute as it won't help you in this situation. See how it goes
PS: remove the display:inline from [type="radio"]:checked ~ label ~ .content
I updated the css to take out some of the absolute positioning and made the content have a min-height of 100%, this also required taking out the vertical padding of the content area.
http://jsfiddle.net/f9zt9xqr/4/
.content {
display:none;
position: absolute;
top: 0;
left: 92px;
background: white;
right: 0;
padding: 0 20px;
border: 1px solid #ccc;
min-height: 100%;
}
Working on a jScrollPane. I've installed on my server exactly as stated through the jScrollPane site. The content seems to scroll but the default window scrollbar is showing up and the styled jScroll Vertical bar and drag bar don't scroll at all.
I've read about some issues with it not scrolling on the latest jquery so I also tried using an older version but still no luck.
I've made a quick fiddle that shows the issue.
Any help would be appreciated. I've been stuck on this for a few days now.
html -
<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scrollpane jspScrollable" id="subpanel_content" style="overflow: hidden; padding: 0px; width: 475px;" tabindex="0">
<div class="jspContainer" style="width: 475px; height: 520px;">
<div class="jspPane" style="padding: 0px 65px 0px 0px; top: 0px; width: 396px;">
<p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>-</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p> </p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>-</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack" style="height: 600px;">
<div class="jspDrag" style="height: 300px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
</div>
CSS -
#subpanel {
position: absolute;
z-index: 10;
}
.nav_dialog {
position: absolute;
font-family: 'Inconsolata',verdana;
display: none;
float: left;
background-color: rgba(255, 255, 255, 0.75) !important;
color: #111 !important;
padding: 10px;
z-index: 10;
width: 495px;
color: white;
min-height: 306px;
font-size: inherit;
line-height: inherit;
margin-top: 2px;
}
.nav_dialog .close_link {
text-align: right;
margin-bottom: 10px;
}
.nav_dialog .scrollpane {
overflow: auto;
min-height: 270px;
margin: 0px 8px 0px 15px;
padding-right: 65px;
width: 410px;
}
.jspContainer
{
overflow: auto;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #dde;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Let the jscrollpane to generate the class in javascript.
Also, include the jscrollpane library in your document.
<!-- Jscroll pane library -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<!-- Mousewheel -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scroll-pane">
<p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
-
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
<p>
</p>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<p>
-
</p>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
</div>
Give to the element .scroll-pane overflow:hidden and height:300px or the desired height.
I've created fiddle so you can see result
http://jsfiddle.net/8zk4E/1/