Related
I want to achieve a custom cursor with CSS and pure Javascript (no jQuery) similar to this website: https://www.bildundton.ch/de
The cursor (circle) should expand itself when hovering over a clickable element, such as a tags and buttons. I already achieved this effect but my problem is that when I hover over a clickable element the cursor sometimes gets smaller again.
The Problem. I'm still hovering over the button, but the circle is not expanded.
How it always should look like when hovering over a clickable element
This is my code
const cursor = document.querySelector('#custom-cursor');
const clickableElements = Array.from(document.querySelectorAll('a, button'));
document.addEventListener('mousemove', updateCursor);
window.addEventListener('scroll', updateCursor);
function updateCursor(e) {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
let isHover = false;
for (let index = 0; index < clickableElements.length; index++) {
if (clickableElements[index].matches(':hover')) {
isHover = true;
cursor.classList.add('expand-circle');
}
break;
}
if (!isHover && cursor.classList.contains('expand-circle')) {
cursor.classList.remove('expand-circle');
}
}
* {
cursor: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
#custom-cursor {
background-color: transparent;
border: 1px solid red;
height: 20px;
width: 20px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: fixed;
z-index: 1;
will-change: transform;
transition: transform .3s ease-in;
}
#custom-cursor.expand-circle {
transform: scale(1.75);
}
<div id="custom-cursor"></div>
<div class="container">
<button>This is a clickable element</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.
Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
</div>
EDIT2: :hover is not working properly because the cursor is hovering above your circle. Simply add pointer-events: none:
const cursor = document.querySelector('#custom-cursor');
const clickableElements = Array.from(document.querySelectorAll('a, button'));
document.addEventListener('mousemove', updateCursor);
window.addEventListener('scroll', updateCursor);
function updateCursor(e) {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
let isHover = false;
for (let index = 0; index < clickableElements.length; index++) {
if (clickableElements[index].matches(':hover')) {
isHover = true;
cursor.classList.add('expand-circle');
}
break;
}
if (!isHover && cursor.classList.contains('expand-circle')) {
cursor.classList.remove('expand-circle');
}
}
* {
cursor: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
#custom-cursor {
background-color: transparent;
border: 1px solid red;
height: 20px;
width: 20px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: fixed;
z-index: 1;
will-change: transform;
transition: transform .3s ease-in;
pointer-events: none;
}
#custom-cursor.expand-circle {
transform: scale(1.75);
}
<div id="custom-cursor"></div>
<div class="container">
<button>This is a clickable element</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.
Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
</div>
Previous answer:
I'm not sure why :hover was not working, but the reliable method is to check element boundaries with getBoundingClientRect - see the snippet
Also, the center of your circle is not where the cursor is pointing, but that's a separate issue
EDIT: :hover was not working probably because of resizing your circle, which resulted in cursor hovering above it
const cursor = document.querySelector('#custom-cursor');
const clickableElements = Array.from(document.querySelectorAll('a, button'));
document.addEventListener('mousemove', updateCursor);
window.addEventListener('scroll', updateCursor);
function updateCursor(e) {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
const isHover = clickableElements.some(element => {
const {left, right, top, bottom} = element.getBoundingClientRect();
//console.log({left, right, top, bottom}, {x: e.clientX, y: e.clientY});
return e.clientX >= left && e.clientX <= right && e.clientY >= top && e.clientY <= bottom;
});
if (isHover) {
cursor.classList.add('expand-circle');
//console.log('add');
}
else if (cursor.classList.contains('expand-circle')) {
cursor.classList.remove('expand-circle');
//console.log('remove');
}
}
* {
cursor: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
#custom-cursor {
background-color: transparent;
border: 1px solid red;
height: 20px;
width: 20px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: fixed;
z-index: 1;
will-change: transform;
transition: transform .3s ease-in;
}
#custom-cursor.expand-circle {
transform: scale(1.75);
}
<div id="custom-cursor"></div>
<div class="container">
<button>This is a clickable element</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.
Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
</div>
I'm working on a project for a buddy and I was wondering how I might be able to achieve a vertical scrolling effect similar to the one with books on this page https://pudding.cool/2019/06/summer-reading/
The vertical scroll bar indicator I'm looking to replicate is on the right side of the page
I looked at the code and it looks like they used a specific class as multiple divs, but wasnt sure if there was a different way to achieve this
EDIT: was in a rush when I posted this, more info follows.
I reviewed W3 schools guide on how to create a scroll indicator
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
and was able to modify it to be fixed and vertical, now I'm looking at using this concept to mirror the target outcome indicated above. I put together a very basic fiddle of the general idea
https://jsfiddle.net/sq0z314o/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
/* Style the header: fixed position (always stay at the top) */
.scroll {
position: fixed;
top: 0;
z-index: 1;
height: 100%;
background-color: #f1f1f1;
}
/* The progress container (grey background) */
.progress-container {
height: 100%;
width: 8px;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
width: 8px;
background: #4caf50;
height: 0%;
}
.content {
width: 75%;
margin: auto;
}
<div class="scroll">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class = "content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
<p> Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae cursus urna consectetur.</p>
<p> Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p> Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in pulvinar.</p>
<p> Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id iaculis nec, bibendum et ante.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
</div>
If you are ok with having a fixed height in the scrollbar, here you have an option. Hope it helps:
I duplicated the text content inside the .progress-container node and add a different class called .content-little. It has position: absolute so it overlaps the scrollbar.
I also added several styles, like a little font-size to the .content-little, hardcoded width and height to the scrollbar and children. So be aware that the CSS is different.
window.addEventListener('scroll', () => {
const winScroll =
document.body.scrollTop || document.documentElement.scrollTop;
const height =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = `${scrolled}%`;
});
.scroll {
position: fixed;
top: 0;
z-index: 1;
height: 320px;
background-color: #f1f1f1;
}
.progress-container {
position: relative;
height: 100%;
width: 70px;
background: #ccc;
padding-left: 6px;
}
.progress-bar {
position: absolute;
left: -10px;
width: 90px;
background: #4caf50;
height: 0%;
}
.content-little {
position: absolute;
font-size: 3px;
width: 60px;
height: 100%;
overflow: hidden;
}
.content {
width: 60%;
margin: auto;
}
<div class="scroll">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
<div class="content-little">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
tristique neque enim.
</p>
<p>
Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
molestie mi, ullamcorper interdum purus. Cras elementum, orci a
sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc
non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum
sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor,
aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa
tristique, vitae cursus urna consectetur.
</p>
<p>
Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
interdum orci at blandit. Vivamus sit amet turpis est. Interdum et
malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis
arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus,
finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in
enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed
hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget
cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper.
Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu
venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in
pulvinar.
</p>
<p>
Sed ut pellentesque dolor. Suspendisse blandit tellus at orci
pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed
tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit
porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus
malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum
ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus,
mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis,
suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris.
In lectus elit, gravida id iaculis nec, bibendum et ante.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
tristique neque enim.
</p>
</div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
</p>
<p>
Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin
elementum, tellus sem sodales mi, eget consectetur mi nunc non velit.
Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin
elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed
viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae
cursus urna consectetur.
</p>
<p>
Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada
fames ac ante ipsum primis in faucibus.
</p>
<p>
Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu
a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non
ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum
fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius
enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio
vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae
sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel
tristique lacus. Etiam condimentum sit amet est in pulvinar.
</p>
<p>
Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque,
a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed
consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse
arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat
volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis.
Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci.
Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent
vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id
iaculis nec, bibendum et ante.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
</p>
</div>
I have to display the left column fixed when reaching the top and right div will scroll. Once end the section then left div will change it relative so that it will also scroll at the end of the section.
I tried below code but it's not working perfectly for me. it's also changing the width.
I tried if ($(window).scrollTop() >= 350) { which is not perfectly. It's active when scroll reaches 350. I need when my section reach on top then fixed the left div and and scroll right div.
$(function() {
$(window).scroll(function() {
//After scrolling 100px from the top...
if ($(window).scrollTop() >= 350) {
$('.leftDiv').css('position', 'fixed');
$('.leftDiv').css('top', '0px');
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('.leftDiv').css('position', 'static');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="leftDiv">
<h2>This div will fixed once touch the top bar and scroll right div</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="rightDiv">
<h2>Lorem Ipsum is simply dummy text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
On page load, find the elements position in the page, using .offset(), and it's width, using .width().
Also, you can pass multiple CSS properties at once, using .css(), if you format them as an object (see below).
Now... You also have to care about the next row below... So a simple math will compare the scrollTop in order to "un-fix" the div as soon as the next row comes into view. That is the scrollTop + row height - the div's height.
$(function() {
// Get position and width
var position = $(".leftDiv").offset().top;
var width = $(".leftDiv").width();
// Get the height and the row height
var height = $(".leftDiv").height();
var row_height = $(".leftDiv").parents(".row").height();
$(window).scroll(function() {
// Compare scrollTop with the div position
if ($(window).scrollTop() >= position && $(window).scrollTop() <= position + row_height - height) {
$('.leftDiv').css({
position: 'fixed',
top: 0,
width: width // Ensure to keep its width
});
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('.leftDiv').css({
position: 'static'
});
}
});
// Resize issue... Since the width has been set once
$(window).on("resize", function() {
// Remove the width and position properties to redefine all variables
$(".leftDiv").css({
position: 'static',
width: "initial"
});
// Get position and width
position = $(".leftDiv").offset().top;
width = $(".leftDiv").width();
// Get the height and the row height
height = $(".leftDiv").height();
row_height = $(".leftDiv").parents(".row").height();
// Run the scroll adjusments...
$(window).trigger("scroll");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="leftDiv">
<h2>This div will fixed once touch the top bar and scroll right div</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="rightDiv">
<h2>Lorem Ipsum is simply dummy text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
Interesting "Bonus question"
Can I use some animation at the end when the section ends because left content directly goes off?
Since that is a "bonus question"... and a bit more complex, I will post it only on CodePen.
Quick explanations: you have to make sure the animation triggers only once. So I used a class, that will be removed instantly... while the position will be changed to static only at the animation end.
Additionally, the animation only is interesting to have if the scrolling is at the bottom of the row... It looks strange at top.
Below is the JS fiddle that contains 4 Tabs, If I click on tab the tab content get changed.
I need to swap the tabs using only css/style without clicking on the button or any event applied to "tabs-menu"
JS Fiddle
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
HTML Code
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
</div>
<div id="tab-2" class="tab-content">
<p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
</div>
<div id="tab-3" class="tab-content">
<p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
</div>
<div id="tab-4" class="tab-content">
<p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>
</div>
</div>
</div><br/>
<input type='submit' value='SET Tab 1 Active '/><br/><br/>
<input type='submit' value='SET Tab 2 Active '/><br/><br/>
<input type='submit' value='SET Tab 3 Active '/><br/><br/>
<input type='submit' value='SET Tab 4 Active '/><br/><br/>
How can I change tabs from external button.
JqueryUsed
var SimpleTabs = function (elem) {
//get tab objects and store as pane + tab
var activeTabObject;
var TabObject = function () {
var self = this;
this.tab; //element
this.pane; //element
this.setClick = function () {
$(self.tab).click(function () {
self.showThisTab();
});
};
this.showThisTab = function () {
if (self !== activeTabObject) {
//change the tab page and update the active tab
$(activeTabObject.pane).removeClass('active-page');
$(activeTabObject.tab).removeClass('active');
$(self.pane).addClass('active-page');
$(self.tab).addClass('active');
activeTabObject = self;
}
};
};
$.each(elem.children(), function (id,val){
var tab = new TabObject();
tab.tab = val;
var classString = $(val).attr('class');
var className = classString.split(' ')[0];
tab.pane = $('#' + className);
tab.setClick();
if (classString.indexOf('active') > -1) {
activeTabObject = tab;
}
});
};
Above is the jquery snippet handling the tab switch.
I've moved your code around a bit but it's to make it more readable.
$(document).ready(function() {
var $tabsMenu = $('.tabs-menu');
var tabsMenuLength = $tabsMenu.children().length;
$tabsMenu.find("a").click(function(event) {
event.preventDefault();
setCurrentTab(this);
});
$('#tab-switch').click(function(e) {
var nextTabId = ($tabsMenu.find('.current').index() + 1) % tabsMenuLength;
setCurrentTab($tabsMenu.children()[nextTabId].childNodes[0])
});
// set initial tab as tab 3
setCurrentTab($tabsMenu.children()[2].childNodes[0])
});
function setCurrentTab(tabEl) {
$(tabEl).parent().addClass("current");
$(tabEl).parent().siblings().removeClass("current");
var tab = $(tabEl).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
}
body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
font-size: 14px;
}
.tabs-menu {
height: 30px;
float: left;
clear: both;
}
.tabs-menu li {
height: 30px;
line-height: 30px;
float: left;
margin-right: 10px;
background-color: #ccc;
border-top: 1px solid #d4d4d1;
border-right: 1px solid #d4d4d1;
border-left: 1px solid #d4d4d1;
}
.tabs-menu li.current {
position: relative;
background-color: #fff;
border-bottom: 1px solid #fff;
z-index: 5;
}
.tabs-menu li a {
padding: 10px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.tabs-menu .current a {
color: #2e7da3;
}
.tab {
border: 1px solid #d4d4d1;
background-color: #fff;
float: left;
margin-bottom: 20px;
width: auto;
}
.tab-content {
width: 660px;
padding: 20px;
display: none;
}
#tab-1 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est
at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum
mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies
arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
</div>
<div id="tab-2" class="tab-content">
<p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies
fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper
eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
</div>
<div id="tab-3" class="tab-content">
<p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum.
Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae
risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
</div>
<div id="tab-4" class="tab-content">
<p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget
urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis.
Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra
cursus odio. </p>
</div>
</div>
</div>
<br/>
<button id="tab-switch">change tab</button>
$(function() {
$('.tabs-menu a').mouseover(function(){
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
I was trying to insert a slideable tab which came from an external link and not by page. I just can't get to make it work.
Here's the link where it came from:
<div id="divfr">
First Response
</div>
And here's the code for the tabs:
<div class="toolbar tabbar">
<div class="toolbar-inner">
Tab 1
Tab 2
Tab 3
</div>
</div>
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab1" class="page-content tab active">
<div class="content-block">
<p>This is tab 1 content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat.</p>
<p>Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.</p>
</div>
</div>
<div id="tab2" class="page-content tab">
<div class="content-block">
<p>This is tab 2 content</p>
<p>Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.</p>
<p>Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.</p>
</div>
</div>
<div id="tab3" class="page-content tab">
<div class="content-block">
<p>This is tab 3 content</p>
<p>Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.</p>
<p>Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.</p>
</div>
</div>
</div>
</div>
I just added navbar-fixed inside the tabs-sizeable div and it worked.