I have a site and I want each section to take up the screen and as you scroll down the page the sections fade out as the next section comes into view. I'm struggling on how this math needs to work.
For one section it's easy which is basically the height of the element and it's distance from the top to get the opacity percentage. However, I just can't quite figure out the math for other sections. I need section 2 to start fading in as section 1 is fading out.
I do not want to scrolljack. I just want a scrolling effect. Rather than override default scrolling behavior I just want to animate in/out as you scroll where a certain Y scroll value = a certain CSS value rather than a sort of "breakpoint" where it animates to a new "slide".
For the proper effect, for example, my math divides the height of the row by 2 so that it's 50% faded out as the next section should be fading in 50%. But, as of now, the math just doesn't work for the other sections.
This site is using vanilla JS as it's supposed to be a simple one pager.
Example below:
(function () {
window.addEventListener('scroll', () => {
const rows = document.querySelectorAll('.row');
rows.forEach(function (row, index) {
const distanceToTop = window.pageYOffset;
const elementHeight = row.offsetHeight * (index + 1) / 2;
row.style.opacity = ((elementHeight - distanceToTop) / elementHeight * 100) / 100;
});
});
})();
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 0 0 0;
font-family: sans-serif;
font-family: 'Manrope', helvetiva, sans-serif;
transition: background-color 1s;
color:#fff;
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
}
header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 999;
}
header h1 {
font-family: 'Lack';
font-size: 4em;
text-align: center;
padding: 10px;
color: #100521;
}
.row-container .row:first-child {
opacity: 1;
}
.row {
opacity: 0;
height: 100vh;
display: flex;
flex-direction:column;
}
.row-inner {
display: grid;
grid-template-columns: 1fr 1fr;
position: sticky;
top: 0;
/* border: 1px solid yellow; */
padding: 0;
height: 100vh;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
flex: 50%;
padding: 10px;
}
.left-column {
background-color: transparent;
}
.right-column {
background-color: transparent;
}
h1 {
font-family: 'Unbounded', helvetica, sans-serif;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
margin: 0;
font-size: 24px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Manrope&family=Unbounded&family=Lack&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>My App</h1>
</header>
<!-- First row -->
<div class="row-container">
<div class="row section-1">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 1</h1>
<h2>Subhead 1</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
<!-- Second row -->
<div class="row section-2">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 2</h1>
<h2>Subhead 2</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 2">
</div>
</div>
</div>
</div>
<!-- Third row -->
<div class="row section-3">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 3</h1>
<h2>Subhead 3</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 3">
</div>
</div>
</div>
</div>
<!-- Fourth row -->
<div class="row section-4">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 4</h1>
<h2>Subhead 4</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-4.jpg" alt="Image 4">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As suggested in one of the comments to your question, it's more effective to use IntersectionObserver rather than the 'scroll' event listener.
If I'm correct, this snippet should help you achieve what you're looking for:
window.addEventListener("load", (event) => {
let options = {
rootMargin: "0px",
threshold: 0.8
};
const intersectionHandler = function(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting && entry.intersectionRatio > 0.8) {
entry.target.classList.remove("fadeOut");
entry.target.classList.add("fadeIn");
} else {
entry.target.classList.remove("fadeIn");
entry.target.classList.add("fadeOut");
}
});
};
let observer = new IntersectionObserver(intersectionHandler, options);
document.querySelectorAll(".section").forEach((row, index) => {
observer.observe(row);
});
});
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 0 0 0;
font-family: sans-serif;
font-family: "Manrope", helvetiva, sans-serif;
transition: background-color 1s;
color: #fff;
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
}
header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 999;
}
header h1 {
font-family: "Lack";
font-size: 4em;
text-align: center;
padding: 10px;
color: #100521;
}
.row-container .row:first-child {
opacity: 1;
}
.row {
opacity: 0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.row-inner {
display: grid;
grid-template-columns: 1fr 1fr;
position: sticky;
top: 0;
/* border: 1px solid yellow; */
padding: 0;
height: 100vh;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
flex: 50%;
padding: 10px;
height: 100vh;
box-sizing: border-box;
}
.left-column {
background-color: transparent;
}
.right-column {
background-color: transparent;
}
h1 {
font-family: "Unbounded", helvetica, sans-serif;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
margin: 0;
font-size: 24px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
img {
width: 100%;
height: auto;
}
.fadeIn {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.fadeOut {
animation-name: fadeOut;
animation-duration: .5s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<!-- First row -->
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 1</h1>
<h2>Subhead 1</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
<!-- Second row -->
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 2</h1>
<h2>Subhead 2</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 2">
</div>
</div>
</div>
</div>
<!-- Third row -->
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 3</h1>
<h2>Subhead 3</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 3">
</div>
</div>
</div>
</div>
<!-- Fourth row -->
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 4</h1>
<h2>Subhead 4</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-4.jpg" alt="Image 4">
</div>
</div>
</div>
</div>
</div>
You'll notice I've made some minor modifications to your HTML and CSS, but the magic happens in the Javascript.
I've also used the window "load" event listener to create the observer options, object and callback function when the page is loaded.
You can check the IntersectionObserver API docs for more details on how it works and how to tweak the options or the callback to suit your needs.
Let me know if you have any questions for modifying my code. (I've also had to change your css a bit - the content of the row element was higher than the row element itself what led to some weird issues.)
I have rewritten most of it and it should now work for large row heights. The math for it is just a quadratic formula (Opacity of offset from center of the screen) with it's roots at the height of the row and a maximum at 0 offset with a value of 1.
/** #format */
const calculateOpacity = () => {
const ROW_CONTAINER = document.querySelector(".row-container");
const rows = ROW_CONTAINER.children;
const rowContainerBBox = ROW_CONTAINER.getBoundingClientRect();
console.log("calc")
for (const row of rows) {
const rowBBox = row.getBoundingClientRect();
const top = rowBBox.top - rowContainerBBox.top;
const bottom = rowBBox.bottom - rowContainerBBox.bottom;
if (rowBBox.height > rowContainerBBox.height) {
const opacityOfOffset = (offset) => {
const a = -1 / Math.pow(rowBBox.height, 2);
return Math.max(0, a * Math.pow(offset, 2) + 1);
};
row.style.opacity = opacityOfOffset(top + bottom);
continue;
}
const unvisibleHeightTop = -Math.min(0, top);
const unvisibleHeightBottom = Math.max(0, bottom);
const visibleHeight = rowBBox.height - unvisibleHeightTop - unvisibleHeightBottom;
row.style.opacity = visibleHeight / rowBBox.height;
}
};
document.querySelector(".row-container").addEventListener("scroll", calculateOpacity);
/** #format */
body {
height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
font-family: "Manrope", helvetiva, sans-serif;
color: #fff;
}
header {
height: max(70px, 10vh);
position: fixed;
background-color: black;
width: 100%;
display: flex;
align-items: center;
}
header h1 {
margin: 0;
}
main {
padding-top: max(70px, 10vh);
height: 100%;
box-sizing: border-box;
}
.row-container {
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
height: calc(100vh - max(70px, 10vh));
overflow-y: auto;
}
.row {
height: 150vh;
display: flex;
align-items: center;
padding: 10vh 0;
}
.row .row-inner {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.row .row-inner .col {
margin-inline: 10px;
display: flex;
align-items: center;
height: 100%;
}
.row img {
width: 100%;
height: auto;
}
.row h2 {
margin: 0;
font-family: "Unbounded", helvetica, sans-serif;
font-size: 36px;
}
.row h3 {
margin: 0;
font-size: 24px;
}
.row p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
<!-- #format -->
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Manrope&family=Unbounded&family=Lack&display=swap" rel="stylesheet" />
</head>
<body>
<header>
<h1>My App</h1>
</header>
<main>
<div class="row-container">
<div class="row row-1">
<div class="row-inner">
<div class="col left">
<div class="col-inner">
<h2>Headline 1</h2>
<h3>Subhead 1</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<div class="col right">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1" />
</div>
</div>
</div>
<div class="row row-1">
<div class="row-inner">
<div class="col left">
<div class="col-inner">
<h2>Headline 1</h2>
<h3>Subhead 1</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<div class="col right">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1" />
</div>
</div>
</div>
<div class="row row-1">
<div class="row-inner">
<div class="col left">
<div class="col-inner">
<h2>Headline 1</h2>
<h3>Subhead 1</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<div class="col right">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1" />
</div>
</div>
</div>
</div>
</main>
</body>
</html>
You didn't really ask for a web component, I just got carried away. This is a fun challenge! Anyway, here's a version that is NOT a web component. I also realized that I missed all the css that you provided. So I added that as well. I'm not sure if tweaking the css a little is verbotten ... but I did it. I also added a single [section] tag, which wraps everything but the app header, to make it more bullet proof ... Please let me know if I need to use your code exactly as you posted it.
I had a lot of trouble finding settings that provide a dramatic enough effect on both large screens and phones without some ugly hacks, so I opted for a compromise. You can optimize for either large or small by changing the rootMargin option for the IntersectionObserver. Smaller values make the fade effect more dramatic, but values that are too small cause the content to look washed out on smaller devices. As I'm posting this, rootMargin is set to "-25px". Apparantly you can use negative values, but as far as I can tell, you can only use "px" as the measurement. Other measurements don't seem to work.
Sooooo...
I used IntersectionObserver
const observer = new IntersectionObserver(fadeInOut, options);
One of the options IntersectionObserver takes is something called "threshold". I don't totally understand it, but MDN suggested that if you want to poll the viewport to determine element visibility, you should set the value of "threshold" as an array with many numbers ranging from 0 to 1. The example provided a function that generates 20 of them, so that's what I used.
function buildThresholds() {
const steps = 20;
const thresholds = [];
for (let i = 0; i <= steps; i++) {
let ratio = i/steps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
Then I grabbed the collection of elements to watch using querySelectorAll(".row-container").
Then I looped through the elements and added each one to the observer's watch list.
observer.observe(elem);
Then, in the callback you provide when you create a new instance of IntersectionObserver, I set each element's opacity to the the intersectionRatio, which is a property provided by the instance of the IntersectionObserverEntry which is passed to the callback.
function fadeInOut(items, observer) {
items.forEach( (item) => {
item.target.style.opacity = item.intersectionRatio;
});
}
function buildThresholds() {
const steps = 20;
const thresholds = [];
for (let i = 0; i <= steps; i++) {
let ratio = i/steps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
function fadeInOut(items, observer) {
items.forEach( (item) => {
item.target.style.opacity = item.intersectionRatio;
});
}
function scrollFade() {
const elems = document.querySelectorAll('.row-container');
const options = {
root: null,
rootMargin: "-25px",
threshold: buildThresholds()
};
const observer = new IntersectionObserver(fadeInOut, options);
for (let elem of elems) {
observer.observe(elem);
}
}
document.addEventListener('DOMContentLoaded', scrollFade);
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 0 0 0;
font-family: sans-serif;
font-family: 'Manrope', helvetiva, sans-serif;
transition: background-color 1s;
color:#fff;
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
}
header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 999;
}
header h1 {
font-family: 'Lack';
font-size: 4em;
text-align: center;
padding: 10px;
color: #100521;
}
section {
margin-top: 6em;
}
h1 {
font-family: 'Unbounded', helvetica, sans-serif;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
margin: 0;
font-size: 24px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
img {
width: 100%;
height: auto;
}
.row-container {
background-color: rgb(16, 5, 33);
min-height: 50vh;
}
.row-inner {
align-content: center;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
padding: 10px;
gap: 10px;
}
.left-column {
flex: 1 1 70vw;
}
.right-column {
flex: 1 1 100px;
text-align: center;
}
<header>
<h1>My App</h1>
</header>
<section>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline One</h1>
<h2>Subhead One</h2>
<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. 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>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Two</h1>
<h2>Subhead Two</h2>
<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. 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>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Three</h1>
<h2>Subhead Three</h2>
<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. 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>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Four</h1>
<h2>Subhead Four</h2>
<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. 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>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-4.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Five</h1>
<h2>Subhead Five</h2>
<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. 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>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-5.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Six</h1>
<h2>Subhead Six</h2>
<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. 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>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-6.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
</section>
Will this work? I used IntersectionObserver and set the opacity of the sections based on the intersection ratio of each section with the viewport. I pretty much took the idea straight from MDN.
MDN Intersection Observer API
class ScrollFade extends HTMLElement {
template;
shadow;
static observer = false;
constructor() {
super();
this.shadow = this.attachShadow({mode: 'open'});
if (!ScrollFade.observer) {
const buildThresholds = function() {
const steps = 20;
const thresholds = [];
for (let i = 0; i <= steps; i++) {
let ratio = i/steps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
const options = {
root: null,
rootMargin: "0px",
threshold: buildThresholds()
};
ScrollFade.observer = new IntersectionObserver(ScrollFade.fadeInOut, options);
}
}
connectedCallback() {
const tmpl = document.querySelector('#scroll-fade-template').cloneNode(true);
const template = tmpl.content;
ScrollFade.observer.observe(this.shadow.host);
this.shadow.append(template);
}
disconnectedCallback() {
ScrollFade.observer.unobserve(this.shadow.host);
}
static fadeInOut(items, observer) {
items.forEach( (item) => {
item.target.style.opacity = item.intersectionRatio;
});
}
}
document.addEventListener('DOMContentLoaded', customElements.define('scroll-fade', ScrollFade));
body { margin: 0 }
img { width: 100%; }
<scroll-fade>
<h1 slot="headline">Headline One</h1>
<h2 slot="subhead">Subhead One</h2>
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
<div>
<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 </p>
</div>
</scroll-fade>
<scroll-fade>
<h1 slot="headline">Headline Two</h1>
<h2 slot="subhead">Subhead Two</h2>
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 2">
<div>
<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 </p>
</div>
</scroll-fade>
<scroll-fade>
<h1 slot="headline">Headline Three</h1>
<h2 slot="subhead">Subhead Three</h2>
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 1">
<div>
<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 </p>
</div>
</scroll-fade>
<template id="scroll-fade-template">
<style>
.row-container {
background-color: seagreen;
height: 100vh;
overflow: auto;
}
.row-inner {
align-content: center;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
padding: 10px;
gap: 10px;
}
.left-column {
flex: 1 1 70vw;
}
.right-column {
flex: 1 1 100px;
text-align: center;
}
</style>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<slot name="headline">Need Headline</slot>
<slot name="subhead">Need Subhead</slot>
<slot>Need Content</slot>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<slot name="avatar">Need Avatar</slot>
</div>
</div>
</div>
</div>
</div>
</template>
I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
So, how the code was supposed to run: if you just load the example, and click on "menu" on the bottom left, a new div cover the entire page, with another menu, sliding from the top. If you click the button again, same animation in reverse. Works fine!
But if you scroll the main page to the bottom, and then click on the menu again, it works, but when you click the menu button again, there is no animation. The menu div simply disappears. How can I fix that?
menu();
function menu(nm_pagina) {
var scroll;
$("#menu01").click(function() {
if ($(".menu_aberto").css("display") == 'none') {
$(".menu_aberto").slideDown(300);
scroll = $(window).scrollTop();
$(".miolo_relacionamentos").hide();
} else {
$(".menu_aberto").slideUp(300);
$('.' + nm_pagina).height('auto');
$(".miolo_relacionamentos").fadeIn(100);
$("html").scrollTop(scroll);
};
});
};
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
max-width: 800px;
margin: 0 auto;
}
#ft_menu_botoes {
max-width: 800px;
position: fixed;
bottom: 0px;
width: 100%;
display: block;
background-color: #162F67;
height: 60px;
z-index: 10;
}
#ft_menu_botoes #menu01 {
float: left;
width: 25%;
font-size: 13px;
text-align: center;
padding: 10px 0 0 0;
color: white;
height: 100%;
transition: background-color 0.3s;
}
#ft_menu_botoes #menu01 .ico_menu {
color: white;
font-size: 30px;
}
#ft_menu_botoes #menu01:active {
background-color: #2855bb;
}
.menu_aberto {
z-index: 9;
max-width: 800px;
position: absolute;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
display: none;
background: #162F67;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#2855bb, #162F67);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#2855bb, #162F67);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#2855bb, #162F67);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#2855bb, #162F67);
/* Standard syntax */
width: 100%;
height: 100%;
overflow: auto;
display: none;
}
.menu_aberto #fecha_menu {
float: left;
border: 0;
background-color: transparent;
margin-top: 17px;
color: white;
width: 22%;
height: 100%;
}
.lista_rel {
margin: 10px auto 0 auto;
width: 100%;
border: 1px solid #162F67;
position: relative;
overflow: auto;
transition: opacity 0.3s;
}
.lista_rel:first {
margin-left: 20px;
}
.lista_rel .nome_empresa {
width: 100%;
background-color: #162F67;
margin: 0;
font-size: 14px;
font-weight: normal;
color: white;
padding: 5px 20px;
}
.lista_rel .nome_mae {
width: 100%;
background-color: #e3e5e7;
margin: 0;
font-size: 13px;
font-weight: normal;
padding: 5px 20px;
color: #525860;
}
.lista_rel .posicao_empresa {
width: 40px;
height: 44px;
float: left;
display: block;
position: relative;
}
.lista_rel .textos {
float: left;
width: calc(100% - 100px);
}
.lista_rel .textos .cnpj {
color: #162F67;
margin: 5px 5px 0 0;
font-size: 11px;
}
.lista_rel .textos .cnpj span {
font-size: 13px;
}
.lista_rel .textos .num_documentos {
color: #525860;
margin: 5px 10px 5px 20px;
text-align: right;
font-size: 12px;
}
.lista_rel .box_numero {
width: 60px;
height: 44px;
background-color: #1f4291;
float: right;
display: block;
}
.lista_rel .box_numero p {
color: white;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.header_mob_01 {
margin: 0;
background-color: #162F67;
display: block;
height: 50px;
position: fixed;
top: 0;
width: 100%;
max-width: 800px;
z-index: 5;
}
.rlc {
background-color: white;
height: auto;
padding: 0;
}
.miolo_relacionamentos {
width: 90%;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 100px;
overflow: hidden;
}
/*# sourceMappingURL=fake_code.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="stylesheet" href="./css/relacionamentos.css"> -->
<link rel="stylesheet" href="./css/fake_code.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="vertical"></div>
<div class="rlc">
<div class="header_mob_01"></div>
<div class="menu_aberto"></div>
<div class="miolo_relacionamentos">
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
</div>
<div id="ft_menu_botoes">
<div id="menu01"> <span class="icon-menu ico_menu"></span> <br> Menu </div>
</div>
</div>
<script>
</script>
</body>
</html>
PS: sorry for the clumsy job in the html/css. Just copied the original and started deleting things which do not matter here.
why,even after applying java script function to stop mouse hover in small window
it's not working? and even when i click on menu it's background color changes to black.every thing seems fine still it's not working ??
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kewaunee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstarp css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- userdefined css -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- jquery file-->
<script src="assets/js/jquery.js"></script>
<!-- bootstarp js-->
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<style>
.navbar{
background-color: #3366cc;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="kewaunee.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">Home<b class="caret"></b>
<ul class="dropdown-menu">
<li>home 1</li>
<li>home2</li>
</ul>
</li>
<li class="dropdown">Master<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add Region</li>
<li>Add Tax</li>
<li>Add Milestone</li>
<li>Add Customer</li>
</ul>
</li>
<li>Transaction</li>
<li>Report</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- Trigger the modal with a button -->
<li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in" ></span> Login</a></li>
<!-- modal login form -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<form role="form" method="post" action="#">
<div class="form-group-sm" class="col-xs-2">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group-sm" class="col-xs-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
Forgot password
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!--end of login form -->
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p class="well">Master</p>
<p class="well">Transaction</p>
<p class="well">Report</p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>© Kewaunee 2015</p>
</footer>
</body>
</html>
myscript.js
$(document).ready(function() {
if ($(window).width() > 768) {
$('.dropdown').on('mouseover', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').show();
}).on('mouseout', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').hide();
});
}
else {
$('.dropdown').off('mouseover').off('mouseout');
}
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
});
myscript.css
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #3366cc;
}
.navbar.navbar-inverse{
position: relative;
top: 20px;
}
.navbar-brand{
padding-top: 5px;
}
.navbar-header
{
height:100%;
}
.navbar-inverse .navbar-nav>li>a
{
color: white;
}
.navbar-inverse .navbar-nav .dropdown>a:hover
{
background-color: red;
}
.dropdown:hover .dropdown-menu
{
background-color:#3366cc;
border: 1px solid blue;
}
.dropdown .dropdown-menu a
{
color: white;
}
.dropdown .dropdown-menu a:hover
{
background-color: red;
color: white;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content
{
height: 500px;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Dropdown menu*/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
/* Set black background color, white text and some padding */
footer {
background-color: #3366cc;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.modal-body{
height: 200px;
}
</style>
To me this seems to work fine, but if you want the effect not only on page refresh maybe you should in addition to $(document).ready() use also $(window).resize()
I'm getting stuck on two things here that I'd appreciate the help with.
Background:
The banner displays a photo and some information. However this is not supposed to be everpresent. The banner has to, but not all the information. So there is an option to collapse it and expand it with an icon (like an accordion).
Problems
Because the panel has to be fixed, I had to position relative the content below it. Problem is, when I collapse it, the content is still respecting the position given. I'd like that content to respect the distance between each other instead so that if there is 20px between them, that would still be true on a collapsed view. (I tried margin and top) but no cigar.
And my main issue which I have no idea how to get it done is, I'd like the banner to collapse automatically on scroll. I know there is a scroll function out there, I just never used it before.
Here is my HTML:
<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
<p>menu & logo</p>
</div>
<div class="row">
<div class="col-xs-12">
<div class="banner clearfix">
<div class="collapser">
<i class="fa fa-chevron-up fa-fw collapse-icon"></i>
</div>
<div class="banner-info clearfix">
<div class="col-sm-12 col-md-2">
<div class="circle-container">
<img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Full Name</label>
<span>Floyd "Money" Mayweather</span>
</div>
<div class="form-group">
<label class="control-label">Some Label</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Offender ID#</label>
<span>123569863</span>
</div>
<div class="form-group">
<label class="control-label">Longer Label Example</label>
<span>Something Here with an ellipsis</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span href="#"><p>Something Here</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container martop65">
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, et meis definitiones cum, audire iisque alterum no ius. Semper luptatum democritum has no, at sea audire inermis suscipiantur. Ei regione adipiscing ius. An est nonumy habemus, movet probatus recusabo eu eum. Hinc offendit te est, at his falli euripidis.
<br><br>
Pertinax scribentur ullamcorper in nec, sit dolor fastidii ei. Cetero pericula iudicabit no est, tale elitr ad has, eos sumo harum interesset eu. His ne fierent appareat. Vel paulo fierent eleifend id. Pri ut conceptam repudiandae theophrastus, enim periculis ius ex, te est numquam inimicus.
<br><br>
Congue deleniti deseruisse te eos, usu no brute laoreet. Nisl lorem zril eu qui. Vix tempor inimicus an, partem minimum cotidieque mel eu. Aperiam discere an mea, ea graecis scribentur mel, minim ludus saperet no vix. Has at sint sanctus. Eu docendi hendrerit liberavisse mel, ut eum viris voluptaria, eum error voluptua principes ex.
<br><br>
Vis te accumsan lucilius platonem. Possit prodesset eum in. No duo agam nullam detracto. At homero scaevola electram vel.</p>
</div>
</div>
</div>
CSS
body {
background-color: #dddddd;
}
.navbar {
border: none;
border-bottom: 2px solid #30373e;
font-size: 14px;
-webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
box-shadow: 0 1px rgba(0,0,0,0.025);
z-index: 1040;
margin-bottom: 0;
height: 55px;
text-align:center;
color:#ccc;
}
.banner {
border: none;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
box-shadow: 0 2px 0 rgba(0,0,0,0.07);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
position: fixed;
width: 100%;
background: #101113;
padding: 20px;
display: block;
top: 55px;
border-radius:0;
z-index: 1;
}
.banner .collapser {
position: absolute;
bottom: 10px;
color: #bbb;
}
.banner .circle-container {
position: relative;
left: 35px;
text-align: center;
width: 110px;
height: 110px;
display: flex;
overflow: hidden;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
border: 3px solid #bbb;
}
.banner .banner-info label {
color: rgba(248,151,29,0.77);
}
.banner .banner-info span {
display: block;
color: #bbb;
white-space: nowrap;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
.martop65 {
/* margin-top: 240px;*/
position:relative;
top:240px;
}
JQUERY
$('.collapser').click(function() {
$collapser = $(this);
$banner = $collapser.parent().find('.banner-info .circle-container').add($collapser.parent().find(".col-md-10 > .col-md-3 > .form-group:nth-of-type(2)"));
$banner.slideToggle(500, function() {
$collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
});
});
Here is a CODEPEN
Thanks!