Fix division at the middle of the container - javascript

I have three different divisions in a single container. div toolbar, div one and div two. I am trying to make toolbar, div one stick to the same place of the screen. and I also want to make sticky the div.fixed-header, only the contents inside div.fixed-header-contents should
be scrollable and shouldn't go behind the divisons above it. I have tried postion sticky and fixed but the div.fixed-header-contents overlaping the previous divisions.
Here's the example :
.toolbar{
border : 1px solid;
position : sticky;
z-index : 1000;
top: 0;
}
.fixed-header{
border-top : 1px solid;
border-bottom : 1px solid;
}
/* .one{
position : fixed
} */
<body>
<div class="toolbar"> // I want this div to be stick to the current position
<h4>
toolbar
</h4>
</div>
<div class="one"> //I want this div to be stick to the current position
<h3>
some images
</h3>
<h3>
some buttons
</h3>
<h3>
some contents
</h3>
</div>
<div class="two">
<div class="fixed-header"> //I want this div to be stick to the current position
<h4>
fixed header items
</h4>
</div>
<div class="fixed-header-contents"> //this div should be scrollable but should not overlap the previous screen
"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?"
</div>
</div>
</body>

To solve this problem you need to know .toolbar and .one height. You can set to the top property as an absolute value in the CSS, or if don't know to use Javascript to get height of elements.
For the scrollable container (fixed-header-contents) we need to add an extra wrapper, since we restrict viewport then overflow the child element with the min-height: 100%.
document.addEventListener('DOMContentLoaded', function() {
const toolbar = document.querySelector('.toolbar');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const toolbarHeight = toolbar.getBoundingClientRect().height;
const oneHeight = one.getBoundingClientRect().height;
one.setAttribute('style', `--toolbar-height: ${toolbarHeight}px`);
two.setAttribute('style', `--one-height: ${toolbarHeight + oneHeight}px`);
});
.toolbar,
.one,
.two {
position: sticky;
z-index: 1000;
}
.toolbar {
border: 1px solid;
top: 0;
}
.one {
top: var(--toolbar-height);
}
.two {
top: var(--one-height);
}
.fixed-header {
border-top: 1px solid;
border-bottom: 1px solid;
}
/* for scrollable */
.fixed-header-contents {
overflow: hidden;
height: 5rem;
display: flex;
}
/* for scrollable */
.scrollable {
min-height: 100%;
overflow-y: auto;
}
/* not important */
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="toolbar">
// I want this div to be stick to the current position
<h4>toolbar</h4>
</div>
<div class="one">
//I want this div to be stick to the current position
<h3>some images</h3>
<h3>some buttons</h3>
<h3>some contents</h3>
</div>
<div class="two">
<div class="fixed-header">
//I want this div to be stick to the current position
<h4>fixed header items</h4>
</div>
<div class="fixed-header-contents">
<div class="scrollable">
//this div should be scrollable but should not overlap the previous screen "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?"
</div>
</div>
</div>
<section>
<h1>section 1</h1>
</section>
<section>
<h1>section 2</h1>
</section>

Related

Image animation resets page scroll on mobile devices

EDIT 2: I just figured it out. The overflow css property applied on the body is not being inherited by the slideshow div. Adding "overflow: hidden" to the slideshow div fixed it.
ORIGINAL POST
I have a webpage with an image slideshow. The slideshow is set to run every 5 seconds using setInterval and calling the below function:
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
The animation keyframe:
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
The structure of the page is:
Header
Slideshow
Other Content
The header "position: sticky", so it should always be visible.
The Problem: On mobile or responsive mode on browser dev tool, when I scroll down while the animation is running, the header is not visible, i.e it is ignoring the "position: sticky" css rule. Once the animation completes, the page resets the scroll position back to the top.
It works as expected on desktop, i.e the header is always visible at the top of the screen and the scroll position does not get reset.
I am still learning and I don't understand what is causing the issue and why only on mobile? Tried google but no luck, mostly because I am not sure what to search for.
EDIT:
Recreated the problem as per the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slideshow</title>
<style>
body {
min-height: 100%;
font-family: Helvetica,
Arial,
sans-serif;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.preload * {
animation: none !important;
}
img {
max-width: 100%;
height: auto;
}
.main__overlay {
z-index: 200;
}
.image-slider__overlay {
z-index: 1000;
}
.header {
z-index: 2000;
}
.header {
text-transform: uppercase;
padding: var(--size1) var(--size0);
opacity: 0.9;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}
.image-slider {
position: relative;
}
.image-slider__img {
position: absolute;
top: 0;
left: 0;
animation-name: slide;
animation-duration: 3s;
}
.no-slide {
aspect-ratio: attr(width) / attr(height);
}
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
</style>
</head>
<body>
<body class="preload">
<header class="header">
<h1 class="header__logo">Earthen Karkhana</h1>
</header>
<div class="image-slider">
<div class="no-slide">
This div will be an image is the actual code. Image 1
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 2
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 3
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 4
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
</div>
<section class="projects__main">
<h2 class="projects-link--heading body_text">
Projects
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit inventore
repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
Autem reiciendis fugit quis, perspiciatis nihil sit aliquam impedit dicta placeat veritatis culpa voluptate nisi
aut consectetur unde, alias et fugiat quisquam dolor distinctio eos dolore non error! Id, optio.
Omnis excepturi delectus inventore ullam harum accusamus sed consequatur autem quo obcaecati mollitia corrupti
amet, eaque veritatis, sit dolorum voluptates id atque rem, ipsam officia? Architecto magni dignissimos sint
dolorem!
Doloremque enim nobis eum esse nihil. Fugiat nesciunt obcaecati omnis. Doloribus harum deserunt sapiente omnis
quasi aut voluptatum consequatur perferendis, tempora nulla blanditiis labore vitae provident repellendus,
eveniet sit quas.
Nemo, quos perspiciatis modi repudiandae delectus doloremque. Vero dolores blanditiis itaque consequatur minus
distinctio, sapiente corporis, suscipit ratione tenetur animi sit eius quod dolorem nobis sed pariatur tempora
natus ea.
Quam sequi distinctio adipisci dolor? Asperiores exercitationem eveniet eum architecto voluptates, tempore saepe
sint eius quisquam odit veritatis debitis eligendi ab impedit, officia nam! Libero tenetur ad consequuntur eos
natus.
Corporis pariatur eius velit ad sequi facere impedit quia laboriosam quos? Eum, labore minima temporibus placeat
sunt totam neque, quod harum facilis reiciendis doloribus aliquid dolor saepe distinctio expedita sint.
Repellat, ipsam! Omnis nihil maiores amet excepturi velit, deleniti minus voluptatibus quasi vel, magni aperiam
veritatis non asperiores, nisi dolorum hic eligendi ipsa? Omnis id esse hic non sed est!
Qui accusantium dignissimos natus corporis asperiores, perferendis eveniet ab et, consequuntur vitae officiis
nulla consequatur obcaecati magni corrupti nihil neque nam iste quidem! Libero eos est, beatae error praesentium
eligendi!
</p>
</section>
<script>
"use strict";
const slideImages = Array.from(document.querySelectorAll(".image-slider__img"));
// Wait for page to load before starting slideshow
window.addEventListener('load', (e) => {
document.querySelector("body").classList.remove("preload");
// slideshow should only run on index page
if (document.querySelectorAll(".image-slider__img").length == 0) return;
// Static image not required to be visible once slide images are loaded in
setTimeout(() => document.querySelector(".no-slide").style.opacity = 0, 8000);
slideShow();
});
function slideShow() {
slideImages.forEach((img, index) => {
img.style.display = "none";
});
console.log(slideImages);
let animationInterval = setInterval(startSlideShow, 5000);
}
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
function removePreviousImage(img) {
setTimeout(function () { img.style.display = "none" }, 3000);
}
</script>
</body>
</html>
If viewed in responsive mode in dev tools the page layout changes when the animation is running, but that does not happen on desktop mode.
In desktop mode, resizing the browser to match width of a mobile device does not trigger the problem.
I guess your browser doesnt support position : sticky; try to use another browsers like chrome .
‌‌‌‌‌‌
and I highly recommend You better to use "browser-prefixes" .
You can read about "browser-prefixes" in :
https://www.thoughtco.com/css-vendor-prefixes-3466867

How to scroll and follow active state on links on a fixed height scrollable sidebar?

I am working on a blog layout which have its content on the left side and a 'table of contents' sidebar on the right. The sidebar is fixed with a full viewport height but scrollable incase the items inside are too many.
It is also worth noting that the active state changes on the links in the sidebar based on their corresponding content in the viewport. What I mean to say is that whenever a blog post is in the viewport, its link gets active state in the sidebar. And it is done by Intersection Observer API.
Now the core functionality works fine except there is one issue.
When there are a lot of blog posts, there will be a lot of links on the sidebar. So naturally the bottom links are not visible on the sidebar as they are at the bottom and can't be seen until the scrollbar is pulled down. Therefore, the active state is not visible as well.
Suppose a user tries to read blog post Text 8, the corresponding Text 8 link should've been visible on the sidebar but it is not. Only upto Text 7 is visible in the demo (based on my viewport).
What I wanted to achieve is how can I move the scrollbar up and down based on which blog posts the user is reading? I mean if the user is reading Text 8 then the sidebar will scroll downward and show Text 8 link. If he is reading Text 9, it will scroll to Text 9 link. Now if he decides to read Text 7 from Text 9 then the scrollbar will move upward two places and display Text 7 link.
I don't know if I could explain it properly but this is the best I could write.
It would be a great help if you could help me with this.
Here's the codepen.
Here's the snippet:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>
You can solve this by setting the scrollbar position to the specific offset as the active class changes. This could be achieved by editing your JS and adding the scrolling logic to the add addClass('active') section.
Basically you have to update the scrollbar position as the active class is added to any link.
document.querySelector("#aside-content").scrollTo(0,position)
And the position to which the scrollbar has to be set, can be fetched from the current active element's/link's offset.
document.querySelector("#aside-content > div > div > a.active").offsetTop
Therefore just after adding class the above stated steps can be done
$(eachLink).addClass('active');
var position = document.querySelector("#aside-content > div > div > a.active").offsetTop;
document.querySelector("#aside-content").scrollTo(0,position);
But, the above code will always set the position, and due to which at first link will set the scrolling to itself and not let "table of contents" text to be visible ever. To fix this situation, updating logic can be made conditional by checking if the active element is first child of the scrolling div.
So, the overall working code should be as follow:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
if (document.querySelector("#aside-content > div > div > a.active").parentNode.firstElementChild != document.querySelector("#aside-content > div > div > a.active")) {
document.querySelector("#aside-content").scrollTo(0, document.querySelector("#aside-content > div > div > a.active").offsetTop);
} else {
document.querySelector("#aside-content").scrollTo(0, 0);
}
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>

A4 thesis-like two-column CSS with jQuery citation formatting

I'm attempting to achieve the following layout based on this PhD thesis:
So far I'm doing this using only CSS, however it won't work if I have multiple citations close to each other as they'll end up overlapping in the second column.
But what's the best way to go about solving it with jQuery? Here's my plan so far:
See if two or more citations have the same start position
Copy them into a div, delete originals
Move div to the citation start position
Format CSS accordingly
function setNewPositions() {
var citation = $("cite span");
citation.each(function() {
console.log("Hello");
});
}
setNewPositions();
.Grid {
padding-right: 30%;
}
.Grid-cell {
border: 1px solid black;
}
q[cite] {
position: absolute;
left: 75%;
max-width: 20%;
}
q[cite]:before {
content: attr(data-index);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Grid">
<div class="Grid-cell">
<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. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi<sup>1</sup> <q data-index="1. " cite="http://www.mashable.com/">nesciunt</q> sequi<sup>2</sup> <q data-index="2. " cite="http://www.mashable.com/">nesciunt</q> sequi<sup>3</sup> <q data-index="3. " cite="http://www.mashable.com/">nesciunt</q>. 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>
Yes you can, see a working example here jsfiddle. You can adjust to sit your needs
HTML:
<div class="Grid">
<div class="Grid-cell">
<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. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi<sup>1</sup> <q data-index="1. " cite="http://www.mashable.com/">nesciunt</q> sequi<sup>2</sup> <q data-index="2. " cite="http://www.mashable.com/">nesciunt</q> sequi<sup>3</sup> <q data-index="3. " cite="http://www.mashable.com/">nesciunt</q>. 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>
<div class="cite"></div>
CSS:
.Grid {
padding-right: 30%;
}
.Grid-cell {
border: 1px solid black;
}
q[cite], .cite {
left: 75%;
max-width: 20%;
top: 30%;
position: absolute
}
.cite a{
display: block
}
q[cite]:before {
content: attr(data-index);
}
JAVASCRIPT:
$(document).ready(function(){
$('q[cite]').each(function(){
$('.cite').append(''+$(this).data('index')+$(this).text()+'');
$(this).hide();
});
});

Two column layout. Scrolling anywhere on the page should scroll the right column

I have a two column website, however the user must focus in on the right column to scroll the main content. If the user is focused on the left-hand link bar nothing happens. I tried coding a script that will scroll the right column no matter where the user's mouse is. It does not feel natural and barely scrolls.
Here is my attempt: https://jsfiddle.net/knfg9Lqp/4/
Here is my website(scroll only works on right div): maxmastalerz.com
How could I go about making it non-laggy and fluid with the right amount of scroll?
I could probably use a plugin, however I'm leaning away from that idea.
$(document).bind('mousewheel', function(e){
var delta = (e.originalEvent.wheelDelta/120)*3;
var y = $('#right').scrollTop(); //your current y position on the page
$('#right').scrollTop(y-delta);
});
#left {
background-color: gray;
float: left;
width: 30%;
height: 150px;
}
#right {
background-color: aqua;
float: left;
width: 70%;
height: 150px;
overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="left">
Link 1
Link 2
Link 3
</div>
<div id="right">
"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?"
</div>
TRY SCROLLING UP AND DOWN USING YOUR MOUSEWHEEL OR TOUCHPAD
Why are you dividing and multiplying? If you simply use var delta = e.originalEvent.wheelDelta; the scrolling looks right
https://jsfiddle.net/knfg9Lqp/5/

Facebook Modal Popup that Prevents Scroll on Main Page

See the Facebook comment modal box in the below. I'm trying to achieve a similar effect whereby a user clicks on a button and then it opens up a popup/modal box. This box will allow scroll within the new box (as it could be many pages of text), but will disallow scrolling outside of the modal on the main page. How do I achieve a similar effect where the modal allows scrolling within the modal window but not elsewhere? Thanks.
Usually this works by doing the following:
Adding height:100% to body and html tags.
Adding overflow: hidden to body when the modal is showing.
Basic Demo: jsFiddle
$("body").on("click", function(){
$("body").toggleClass("modalview");
})
html, body {background:#666; color:#FFF; margin: 0; padding: 0; height:100%;}
#content {
padding:1em;
width:90%;
margin:0 auto;
}
#modal {
/* hidden by default */
display: none;
/* box */
width:75%;
height:75%;
padding:1em;
position: fixed; z-index:1;
overflow: auto;
/* center modal vertically and horizontally */
left: 50%; top: 50%;
transform: translate(-50%,-50%);
/* style */
text-align: center;
background:#FFF;
box-shadow:1px 1px 15px #000;
color:#000;
}
/* prevent page scrollbars in modal view */
body.modalview { overflow:hidden; }
/* show #modal in modal view */
body.modalview #modal { display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="modal">
<p>All UR SCROLLS ARE BELONG TO US!!!</p>
<p>Et velit odit cumque hic, aspernatur. Perferendis assumenda est necessitatibus cupiditate cum odit deleniti doloribus earum veniam dolores, neque laudantium laboriosam optio numquam autem iure animi ipsa dolor fugit blanditiis?</p>
<p>Unde quidem sunt quos itaque minus, quia modi nisi temporibus. Consectetur natus perferendis possimus, rem, sed tempora cumque dolorum quod provident blanditiis eum ipsam voluptate dolor, harum doloremque id amet.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda quas, rem voluptas et, totam officia quos, quaerat doloribus eaque odio aperiam a obcaecati explicabo quod eveniet eum aliquid! Repellat.</p>
<p>Vitae ipsum explicabo voluptatibus corrupti odio ipsa, tenetur modi veritatis excepturi architecto nam dignissimos ratione. Iusto temporibus ipsum cupiditate excepturi modi eos alias dolores eveniet possimus. Alias, esse error quam!</p>
<p>Ea numquam quae laborum ut vitae molestias dolorum fugit, asperiores aliquid voluptates vero ab consequuntur ipsum maxime obcaecati temporibus voluptate sed quaerat, necessitatibus deleniti. Quibusdam iste saepe inventore amet eius.</p>
<p>Aut veritatis quos quaerat, placeat nam est ad tempora delectus magnam molestiae, ipsum cupiditate debitis illum perferendis ut nisi beatae voluptas provident consectetur inventore assumenda eveniet? Molestiae architecto ullam nulla.</p>
<p>Explicabo, debitis? Mollitia reiciendis sint minus adipisci, consectetur consequatur assumenda blanditiis pariatur ex facilis expedita et earum molestiae quos, laborum sed suscipit doloribus placeat ipsam in vero quaerat aliquid iure!</p>
<p>Earum dolorem eveniet laboriosam vel dolor! Ullam nisi adipisci voluptatem, voluptatum tenetur, itaque ducimus laboriosam repudiandae quibusdam numquam dignissimos aperiam praesentium culpa porro sapiente ab eos magni? Maiores, doloremque, aspernatur.</p>
</div>
In my approach, I used a CSS class for body to toggle the overflow state. When body gets the class (.modalview) it will hide content below the fold and remove scrollbars from page while showing the actual modal.
jQuery is used to apply the class to body and show #modal through a on click function.
For demonstration sake, I made the #modal show up when you just click on the page, you can bind the function to a button click, like so:
$("#myButton").on("click", function(){
$("body").toggleClass("modalview");
})
To see this properly, load up the jsFiddle demo and play with the page width to see how the scrolling is changed.

Categories

Resources