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%;
}
Related
html,body{
height: 100%;
}
body{
margin: 0;
background-color: #0f0f0f;
color: white;
font-family: 'Ubuntu', sans-serif;
display: grid;
grid-template-columns: 1fr 8fr;
}
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
section{
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
}
.TopContent{
height: 70vh;
grid-column: 1/3;
grid-row:2/3 ;
background-color: white;
z-index: 1;
}
.Content{
grid-column: 1/3;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
.TopNavBtn{
background-color: #000000;
text-align: center;
vertical-align: middle;
color: white;
margin: 0px;
border: 0px;
height: 5vh;
width: 90px;
font-size: 25px;
transition-duration: 0.3s;
}
.TopNavBtn:hover{
height: 7vh;
font-size: 27px;
background-color: #272727;
font-weight: bold;
}
.Navigation{
grid-column: 1/2;
background-color: #0f0f0f;
}
.Divider{
aspect-ratio: 900/300;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.Grad1
{
background-image: url("img/svg/Grad1.svg");
}
.Grad2
{
background-image: url("img/svg/Grad2.svg");
}
.Grad3
{
background-image: url("img/svg/Grad3.svg");
}
.Grad4
{
background-image: url("img/svg/Grad4.svg");
}
.RGrad1
{
background-image: url("img/svg/RGrad1.svg");
}
.RGrad2
{
background-image: url("img/svg/RGrad2.svg");
}
.RGrad3
{
background-image: url("img/svg/RGrad3.svg");
}
.RGrad4
{
background-image: url("img/svg/RGrad4.svg");
}
.b{
background-color: #015657;
}
.g{
background-color: #303030;
}
.w{
background-color: white;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body >
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
<article class="TopContent">
<div class="logo"></div>
</article>
<nav class="Navigation">
</nav>
<article class="Content">
<section class=" b" >
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider Grad1" ></div>
<section class=" g">
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider RGrad1" ></div>
<section class="b">
<p>Tenetur mollitia esse omnis rem voluptatum, quaerat, delectus nulla quasi similique deleniti tempora a libero ducimus, sit asperiores fugiat temporibus error. Alias consectetur sit odio? Praesentium, reiciendis dicta. Ducimus, consequatur.</p>
</section>
<div class="Divider Grad2" ></div>
<section class="g">
<p>Debitis sed ullam assumenda quasi! Quibusdam, laudantium minus cum delectus quasi facilis, quam amet alias ex, voluptatibus cumque ratione praesentium laborum sint nemo eaque sunt tempora qui ad odio consequatur!</p>
</section >
<div class="Divider RGrad2" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider Grad3" ></div>
<section class="g">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider RGrad3" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
</article>
<script>
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>
</body>
</html>
I am trying to detected whether an Elemnt is inside the Viewport. When i looked this up, i was directed to usimg getBoundingClientRect to get its location relative to the Viewport.
However, when i tried implementing this solution, it didnt work, as this always returned a DOMRect with the x,y, top and left values being 0 and the others staying constant no matter where i scroll.
The html element(s) i want to get the location of:
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
Its CSS:
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
The JS code:
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
the code is implemented at the very bottom of the <body>.
I tried testing if the DOM is loaded and changing which element i read the location of.
Here is what the the getBoundingClientRect() returns:
Thanks to user Unmitigated, i now have the answer:
The let bound = NavBar.getBoundingClientRect had to be moved inside the window.onscroll event handler, like so:
<script>
let NavBar = document.getElementById("xdd");
window.onscroll= function (){
let bound = NavBar.getBoundingClientRect();
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>
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>
I have a scrollable div for messages. I want opacity of 0.5 to the content at top 30% of scrollable div Like in image.
.
So while scrolling, whichever message comes on that div should have opacity 0.5. I have tried using an extra div background with linear gradient but the background color is clearly visible from my page's background color.Like this image So I just want to change the opacity of content but not the background of that region.
Thanks in advance.
.message-scroller {
height: 48vh;
overflow: hidden;
overflow-y:scroll;
position: relative;
width: 55%;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
display: flex;
//align-items: flex-end;
background-color: black
}
.sc-message{
padding: 0 10px 0 10px;
vertical-align: bottom;
width: 100%;
}
.single-message {
margin-bottom: 12px;
display: flex;
word-wrap: break-word;
flex-direction: row;
justify-content: space-between;
//overflow: hidden;
font-family: 'Barlow-SemiBold';
font-size: 22px;
color: #ffffff;
line-height: 24px;
.reserved{
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.bot-img{
display: flex;
height: 30px;
width: 40px;
img{
height: 15px;
width: 20px;
}
}
.user-img{
display: flex;
margin-left: auto;
img{
height: 20px;
width: 15px;
}
// margin: auto;
//align-items: flex-end;
}
.message{
padding: 5px 10px 5px 10px;
color: #ffffff;
max-width: 85%;
}
.show-more{
color: #DF3535;
font-size: 24px;
}
.arabic-message{
text-align: right !important;
margin-left: auto;
margin-right: 2vw;
}
.show-more:hover{
cursor: pointer;
}
}
img{
height: 25px;
width : 25px;
}
<div class="message-scroller">
<div class="sc-message">
<div class="single-message">
<div class="bot-img">
<div class="reserved"></div>
</div>
<div class="message">
<div class="LinesEllipsis ">
<div>hello</div>
</div>
</div>
<div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
</div>
<div class="single-message">
<div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
<div class="message">
<div class="LinesEllipsis ">
<div>Hi, How can I help you today?</div>
</div>
</div>
<div class="user-img">
<div class="reserved"></div>
</div>
</div>
<div class="single-message">
<div class="bot-img">
<div class="reserved"></div>
</div>
<div class="message">
<div class="LinesEllipsis ">
<div>why?</div>
</div>
</div>
<div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
</div>
<div class="single-message">
<div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
<div class="message">
<div class="LinesEllipsis ">
<div>Sorry, I can't answer that at this moment.<br>Feel free to ask something else in the meantime.</div>
</div>
</div>
<div class="user-img">
<div class="reserved"></div>
</div>
</div>
<div class="single-message">
<div class="bot-img">
<div class="reserved"></div>
</div>
<div class="message">
<div class="LinesEllipsis ">
<div>ok</div>
</div>
</div>
<div class="user-img"><img src="
https://drive.google.com/uc?export=view&id=1G037foK0nwRpvvClvl9_WHA5bI_65goV
"></div>
</div>
<div class="single-message">
<div class="bot-img"><img src="https://drive.google.com/uc?export=view&id=1pu1s3lGPPUmgiu6j0CSbkcZMVFA4c_YC
"></div>
<div class="message">
<div class="LinesEllipsis ">
<div>Okay, I can help you with queries related to HIV/AIDs</div>
</div>
</div>
<div class="user-img">
<div class="reserved"></div>
</div>
</div>
</div>
</div>
Here is my solution.
.container {
position: relative;
height: 200px; no need: just to get scrollable content
}
.container:before {
content: '';
position: absolute;
width: 100%;
height: 30%;
background: linear-gradient(#00000080, #00000000);
}
.content {
padding-bottom: 100vh;// no need : to get scrolled content
<div class="container">
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet animi culpa cupiditate, dicta dignissimos distinctio dolor doloribus dolorum enim ex explicabo, harum impedit inventore ipsa molestiae nesciunt nihil omnis pariatur perferendis perspiciatis porro, quae quaerat quisquam recusandae reprehenderit repudiandae sint sit tempore totam unde veritatis voluptas voluptates? Aliquid consequuntur cumque cupiditate deleniti doloremque error harum libero, nostrum obcaecati odio optio provident quas qui recusandae sapiente sequi voluptates? Culpa dolorem dolorum esse exercitationem illum maxime minus molestias nobis officia officiis porro quos, repellat soluta! A amet animi distinctio dolore enim error ex explicabo nostrum odio quia similique soluta, totam voluptas! At culpa error harum minus reiciendis ullam voluptatem. Corporis illo ipsa perspiciatis quasi ut. Asperiores autem delectus dignissimos dolorum eius explicabo, id, illo laudantium modi neque porro quaerat qui quibusdam quidem quisquam quos sequi similique suscipit tenetur, ullam velit veritatis vitae? Ab accusantium adipisci alias aperiam asperiores at atque blanditiis consequatur corporis debitis dignissimos distinctio dolore dolorum eaqu
</p>
</div>
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
I use a scroll slider with the mouse or by clicking on image. My problem is that the other links as in the footer or another no longer work. I added "onclick =" window.open (this.href); return false; "but now it's the slide that no longer works when the footer link was clicked.
Appreciate the help
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('nav a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#-webkit-keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
#keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html, body{
height:100%;
}
body {
font-size: 100%;
color:#555;
overflow:hidden;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
}
[itemprop="description"] {
margin-top: 120px;
padding: 20px;
}
[itemprop="name"] {
text-align: right;
padding: 20px;
padding-bottom: 0;
}
[itemprop="faxNumber"] {
padding: 0 20px 0 0;
}
[itemprop="email"] {
padding: 0 20px 0 0;
}
[itemprop="address"] {
padding: 0 20px 0 0;
}
[itemprop="telephone"] {
padding: 0 20px 0 0;
color:#4a974d;
text-decoration: overline;
}
div{
text-align:right;
}
h1 {
font-size: 2.25em;
font-weight: 700;
text-align:center;
padding-top: 20px;
}
h2 {
font-size: 1.25em;
text-align:left;
color:#e7c6c6;
}
#footer {
bottom:0;
width:100%;
height:60px; /* Height of the footer */
margin-top: 20px;
}
#footer p {
color:#555;
text-align:center;
font-size: 12px;
}
#footer a{
color:#555;
text-decoration: none;
border-bottom: dotted 1px #555;
}
nav {
background: #fff;
position: absolute;
z-index: 100;
height: 100vh;
right: 0;
width: 10vw;
font-weight: 300;
font-size: 1rem;
width: 300px;
overflow:scroll;
}
nav ul {
position: absolute;
list-style-type: none;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
text-decoration: none;
color: #fff;
}
nav a {
/*position: absolute;*/
-webkit-transition: color 2s, background 1s;
transition: color 2s, background 1s;
padding: 3px;
z-index: 0;
}
nav a.active {
background: rgba(0, 0, 0, 0.9);
}
nav a::before {
content: "";
position: absolute;
height: 0%;
width: 0%;
bottom: 0;
left: 0;
opacity: 1;
background: #555;
z-index: -1;
}
nav img {
width:120px;
float: left;}
#nav-thumbnails {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 0.8em;
}
#nav-thumbnails h3{
font-size: 1.25em;
text-align:left;
color:#764a4a;
padding:8px;
}
/*nav a:hover {
-webkit-animation: fillColour 0.7s forwards ease-in-out;
animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
-webkit-animation: fill 0.7s forwards ease-in-out;
animation: fill 0.7s forwards ease-in-out;
opacity: 1;
}*/
#media only screen and (max-width: 460px) {
nav {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
position: absolute;
overflow: scroll;
}
nav a {
padding: 3px;
}
nav a.active {
background: none;
}
nav img {
width: 100%;
}
.slides {
display:none;
}
#footer {
position: inherit;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
width:120px;
}
}
.slides {
width: 600vw;
height: 100vh;
-webkit-transition: -webkit-transform 0.8s ease;
transition: -webkit-transform 0.8s ease;
transition: transform 0.8s ease;
transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
height: 100vh;
width: 100vw;
background: pink;
float: left;
text-align: center;
background-size: cover;
}
.slides .slide .content {
max-width: 600px;
padding: 20px;
background: rgba(24, 20, 20, 0.35);
/* margin: 35vh 0 0 15vw; */
border-radius: 5px;
position: absolute;
bottom: 0;
}
.slides .slide .content p {
padding: 10px 0;
border-bottom: 1px solid #f2e9e9;
width: 100%;
}
.slides .slide:nth-child(1) {
background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
background-image: url(../img/10.jpg);
}
.slides .slide img {
width: 100%;
}
.slides .slide p {
color:#fff;
text-align:left;
}
#media only screen and (max-width: 900px) {
.slides .slide .content {
width: 300px;
}
.slides .slide .content p {
padding: 0;
border-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
<div id="footer"><p>Crédit : pixabay.com</p></div>
</nav>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Jquery is correct, just you need take footer div outside the <nav> tag.
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
</nav>
<div id="footer"><p>Credit : pixabay.com</p></div>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>
Add onkeypress="window.open(this.href); return false;" to your code
pixabay.com
Remove below code
$('nav a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});
add this code to your js file.
$('#nav-thumbnails a').click(function(e) {
var newslide = parseInt($(this).attr('href')[1]);
var diff = newslide - currSlide - 1; showSlide(diff);
e.preventDefault();
});
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('#nav-thumbnails a').click(function(e) { var newslide = parseInt($(this).attr('href')[1]); var diff = newslide - currSlide - 1; showSlide(diff); e.preventDefault(); });
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #fff;
}
}
#-webkit-keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
#keyframes fillColour {
0% {
color: #fff;
}
50% {
color: #fff;
}
100% {
color: #333;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html, body{
height:100%;
}
body {
font-size: 100%;
color:#555;
overflow:hidden;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
}
[itemprop="description"] {
margin-top: 120px;
padding: 20px;
}
[itemprop="name"] {
text-align: right;
padding: 20px;
padding-bottom: 0;
}
[itemprop="faxNumber"] {
padding: 0 20px 0 0;
}
[itemprop="email"] {
padding: 0 20px 0 0;
}
[itemprop="address"] {
padding: 0 20px 0 0;
}
[itemprop="telephone"] {
padding: 0 20px 0 0;
color:#4a974d;
text-decoration: overline;
}
div{
text-align:right;
}
h1 {
font-size: 2.25em;
font-weight: 700;
text-align:center;
padding-top: 20px;
}
h2 {
font-size: 1.25em;
text-align:left;
color:#e7c6c6;
}
#footer {
bottom:0;
width:100%;
height:60px; /* Height of the footer */
margin-top: 20px;
}
#footer p {
color:#555;
text-align:center;
font-size: 12px;
}
#footer a{
color:#555;
text-decoration: none;
border-bottom: dotted 1px #555;
}
nav {
background: #fff;
position: absolute;
z-index: 100;
height: 100vh;
right: 0;
width: 10vw;
font-weight: 300;
font-size: 1rem;
width: 300px;
overflow:scroll;
}
nav ul {
position: absolute;
list-style-type: none;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
text-decoration: none;
color: #fff;
}
nav a {
/*position: absolute;*/
-webkit-transition: color 2s, background 1s;
transition: color 2s, background 1s;
padding: 3px;
z-index: 0;
}
nav a.active {
background: rgba(0, 0, 0, 0.9);
}
nav a::before {
content: "";
position: absolute;
height: 0%;
width: 0%;
bottom: 0;
left: 0;
opacity: 1;
background: #555;
z-index: -1;
}
nav img {
width:120px;
float: left;}
#nav-thumbnails {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 0.8em;
}
#nav-thumbnails h3{
font-size: 1.25em;
text-align:left;
color:#764a4a;
padding:8px;
}
/*nav a:hover {
-webkit-animation: fillColour 0.7s forwards ease-in-out;
animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
-webkit-animation: fill 0.7s forwards ease-in-out;
animation: fill 0.7s forwards ease-in-out;
opacity: 1;
}*/
#media only screen and (max-width: 460px) {
nav {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
position: absolute;
overflow: scroll;
}
nav a {
padding: 3px;
}
nav a.active {
background: none;
}
nav img {
width: 100%;
}
.slides {
display:none;
}
#footer {
position: inherit;
}
[itemprop="logo"] {
float:right;
top:0;
padding: 20px;
width:120px;
}
}
.slides {
width: 600vw;
height: 100vh;
-webkit-transition: -webkit-transform 0.8s ease;
transition: -webkit-transform 0.8s ease;
transition: transform 0.8s ease;
transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
height: 100vh;
width: 100vw;
background: pink;
float: left;
text-align: center;
background-size: cover;
}
.slides .slide .content {
max-width: 600px;
padding: 20px;
background: rgba(24, 20, 20, 0.35);
/* margin: 35vh 0 0 15vw; */
border-radius: 5px;
position: absolute;
bottom: 0;
}
.slides .slide .content p {
padding: 10px 0;
border-bottom: 1px solid #f2e9e9;
width: 100%;
}
.slides .slide:nth-child(1) {
background-image: url(../img/1.jpg);
}
.slides .slide:nth-child(2) {
background-image: url(../img/2.jpg);
}
.slides .slide:nth-child(3) {
background-image: url(../img/3.jpg);
}
.slides .slide:nth-child(4) {
background-image: url(../img/4.jpg);
}
.slides .slide:nth-child(5) {
background-image: url(../img/5.jpg);
}
.slides .slide:nth-child(6) {
background-image: url(../img/6.jpg);
}
.slides .slide:nth-child(7) {
background-image: url(../img/7.jpg);
}
.slides .slide:nth-child(8) {
background-image: url(../img/8.jpg);
}
.slides .slide:nth-child(9) {
background-image: url(../img/9.jpg);
}
.slides .slide:nth-child(10) {
background-image: url(../img/10.jpg);
}
.slides .slide img {
width: 100%;
}
.slides .slide p {
color:#fff;
text-align:left;
}
#media only screen and (max-width: 900px) {
.slides .slide .content {
width: 300px;
}
.slides .slide .content p {
padding: 0;
border-bottom: 0;
}
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<nav>
<header>
<h1>Pepinière Paris</h1>
<!--snippet pour le seo-->
<div itemscope="" itemtype="http://schema.org/ProfessionalService">
<div itemprop="name">Brewer Digital Marketing</div>
<img itemprop="logo" src="http://img4.hostingpics.net/pics/379486logo.png" alt="logo">
<div itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eget eros vitae facilisis. Donec mollis turpis eu lorem imperdiet, vel pellentesque nunc tempor.</div>
<div>Phone:
<span itemprop="telephone">303-406-1053</span>
</div>
<div>Fax:
<span itemprop="faxNumber">555-555-5555</span>
</div>
<div>Email:
<span itemprop="email">brad#mail.com</span>
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1889 Rutherford Ave</span>
P.O. Box: <span itemprop="postOfficeBoxNumber">5555</span>
<span itemprop="addressLocality">Louisville</span>
<span itemprop="postalCode">40205</span>
<span itemprop="addressCountry">USA</span>
</div>
</div>
</header>
<!--section de navigation-->
<section id="nav-thumbnails">
<h3>La pépinière</h3>
<img src="img/1.jpg" alt="image1">
<img src="img/2.jpg" alt="image2">
<img src="img/3.jpg" alt="image3">
<img src="img/4.jpg" alt="image4">
<img src="img/5.jpg" alt="image5">
<img src="img/6.jpg" alt="image6">
</section>
<!--footer-->
<div id="footer"><p>Crédit : pixabay.com</p></div>
</nav>
</main>
<div class="slides">
<div id="1" class="slide">
<div class="content">
< h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="2" class="slide">
<div class="content">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="3" class="slide">
<div class="content">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="4" class="slide">
<div class="content">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="5" class="slide">
<div class="content">
<h2>Slide 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
<div id="6" class="slide">
<div class="content">
<h2>Slide 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I have made the changes in jquery .You can take below code.
$(function() {
//make functions first
function showSlide(n) {
// unbind event listener to prevent retriggering
$("body").unbind("mousewheel");
currSlide += n;
// make sure currslide does not go out of min or max boundaries
currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
// displacement is window width times current slide number
var displacment = window.innerWidth*currSlide;
// translate slides div across to appropriate slide
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
// give small delay before rebinding event to prevent retriggering
setTimeout(function() {
$("body").bind('mousewheel', mouseEvent);
}, 800);
// change active class on link
$('nav #nav-thumbnails a.active').removeClass('active');
$($('a')[currSlide]).addClass('active');
}
function mouseEvent(e, delta) {
// On upwards scroll, show next slide (+1)
// otherwise on downwards scroll show prev slide (-1)
showSlide(delta >= 0 ? -1 : 1);
e.preventDefault();
}
$('nav #nav-thumbnails a').click(function(e) {
// When link clicked, find slide it points to
var newslide = parseInt($(this).attr('href')[1]);
// find how far it is from current slide
var diff = newslide - currSlide - 1;
showSlide(diff); // show that slide
e.preventDefault();
});
$(window).resize(function(){
// Keep current slide to left of window on resize
var displacment = window.innerWidth*currSlide;
$('.slides').css('transform', 'translateX(-'+displacment+'px)');
});
//declare vars then make things happen
var currSlide = 0; //Keeps track of slide
var $slide = $('.slide'); //all slides
// give active class to first link
$($('nav #nav-thumbnails a')[0]).addClass('active');
//add event listener for mousescroll
$("body").bind('mousewheel', mouseEvent);
})