I am trying to build a navigation where nav__link shows in which section the user is currently while scrolling by using interSectionObserver .
so I tried to console.log() the index of entry.target from the sectionArr. so that way I can query select all the .nav_link and can add the active class to that index number.
I am doing this way because it is easy to target nav_link to add the class rather than adding separate id or classes on each nav__link and section.
I tried searching about this but could not find anything related. I think, it is possible to find the index of a element from an array where the element is also member of the array.
thanks.
const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');
let observer = new IntersectionObserver(detectInterSection);
observer.observe(firstSection)
function detectInterSection(entries) {
entries.forEach(entry => {
console.log(entry.target)
// console.log(sectionArr.findIndex(entry.target)); // trying to console log the index of entry.target in sectioArr
})
}
* {
box-sizing: border-box;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
body {
font-family: "Nunito", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #fff;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
/* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
.header {
padding: 4rem 0;
background: #333;
}
.footer {
background: #333;
padding: 30px 0;
}
section {
font-size: 24px;
background: #b78ee6;
height: 48vh;
padding: 80px 0;
}
section:nth-child(even) {
background: #333e48;
height: 90vh;
}
.scroll-wrapper {
height: 100vh;
position: fixed;
display: flex;
align-items: center;
right: 0;
top: 0;
width: 12px;
z-index: 99;
cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
height: 100vh;
position: relative;
width: 100%;
}
.scroll-wrapper .scroll-thumb {
width: 16px;
background: #666;
will-change: top;
position: absolute;
left: 0;
top: 0;
}
.intersection {
position: fixed;
background: #333;
width: 300px;
right: 32px;
top: 0;
padding: 32px;
z-index: 88;
border-radius: 10px;
top: 200px;
}
.intersection a {
color: #fff;
}
.content {
position: relative;
}
.is--active {
color: #b78ee6;
}
<div class="scroll-wrapper">
<div class="scroll-thumb-wrapper">
<div class="scroll-thumb"></div>
</div>
</div>
<header class="header">
<div class="container">
header
</div>
</header>
<main class="content">
<aside class="intersection">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fiveth</li>
</ul>
</aside>
<section class="section section--first" style="position: relative">
<div class="container">
first seciton
</div>
</section>
<section id="apple " class="section">
<div class="container">
second seciton
</div>
</section>
<section class="section">
<div class="container">
third seciton
</div>
</section>
<section class="section">
<div class="container">
fourth seciton
</div>
</section>
<section id="section" class="section">
<div class="container">
fifeth seciton
</div>
</section>
<section class="section">
<div class="container">
last seciton
</div>
</section>
</main>
<footer class="footer">
<div class="container"> footer</div>
</footer>
Array.findIndex() takes a function as argument to find your element.
const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');
let observer = new IntersectionObserver(detectInterSection);
observer.observe(firstSection)
function detectInterSection(entries) {
entries.forEach(entry => {
const targetSectionIndex = sectionArr.findIndex(section => entry.target.id === section.id);
console.log('targetSectionIndex', targetSectionIndex);
const targetSection = sectionArr[targetSectionIndex];
console.log('targetSection', targetSection);
})
}
* {
box-sizing: border-box;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
body {
font-family: "Nunito", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #fff;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
/* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
.header {
padding: 4rem 0;
background: #333;
}
.footer {
background: #333;
padding: 30px 0;
}
section {
font-size: 24px;
background: #b78ee6;
height: 48vh;
padding: 80px 0;
}
section:nth-child(even) {
background: #333e48;
height: 90vh;
}
.scroll-wrapper {
height: 100vh;
position: fixed;
display: flex;
align-items: center;
right: 0;
top: 0;
width: 12px;
z-index: 99;
cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
height: 100vh;
position: relative;
width: 100%;
}
.scroll-wrapper .scroll-thumb {
width: 16px;
background: #666;
will-change: top;
position: absolute;
left: 0;
top: 0;
}
.intersection {
position: fixed;
background: #333;
width: 300px;
right: 32px;
top: 0;
padding: 32px;
z-index: 88;
border-radius: 10px;
top: 200px;
}
.intersection a {
color: #fff;
}
.content {
position: relative;
}
.is--active {
color: #b78ee6;
}
<div class="scroll-wrapper">
<div class="scroll-thumb-wrapper">
<div class="scroll-thumb"></div>
</div>
</div>
<header class="header">
<div class="container">
header
</div>
</header>
<main class="content">
<aside class="intersection">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fiveth</li>
</ul>
</aside>
<section class="section section--first" style="position: relative">
<div class="container">
first seciton
</div>
</section>
<section id="apple " class="section">
<div class="container">
second seciton
</div>
</section>
<section class="section">
<div class="container">
third seciton
</div>
</section>
<section class="section">
<div class="container">
fourth seciton
</div>
</section>
<section id="section" class="section">
<div class="container">
fifeth seciton
</div>
</section>
<section class="section">
<div class="container">
last seciton
</div>
</section>
</main>
<footer class="footer">
<div class="container"> footer</div>
</footer>
Related
I need to change follow link color as they overlap with the section that has class intro and intro2 . The follow link color should be changed one by one as they overlap not at once (basically add and remove class use-inverted-colors which I will use to change color using CSS ). Check the example here at this site https://bakery-theme-v1.myshopify.com/ (social icon color being black and white)
class BarracudaOverlapping{
constructor(){
this.setOverlaping();
window.addEventListener("scroll", this.setOverlaping.bind(this));
window.addEventListener("resize", this.setOverlaping.bind(this));
}
setOverlaping(){
document.querySelectorAll(".et_pb_social_media .et_pb_social_icon .icon").forEach(el=>{
var overlap = false;
document.querySelectorAll(".intro,.intro2").forEach(background=>{
if(this.isOverlapping(el, background))
overlap = true;
});
if(overlap)
el.classList.add("use-inverted-colors");
else
el.classList.remove("use-inverted-colors");
});
}
check(){
this.setOverlaping();
}
isOverlapping(e1, e2){
if (e1.length && e1.length > 1) {
e1 = e1[0];
}
if (e2.length && e2.length > 1){
e2 = e2[0];
}
const rect1 = e1 instanceof Element ? e1.getBoundingClientRect() : false;
const rect2 = e2 instanceof Element ? e2.getBoundingClientRect() : false;
let overlap = false;
if (rect1 && rect2) {
overlap = !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
return overlap;
}
console.warn('Not valid HTMLElement object');
return overlap;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
<section class="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li>
</ul>
have you tried mix-blend-mode? it changes the color depending on its backGround
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
ul {
mix-blend-mode: difference;
}
span {
color: red;
}
<section class="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name" aria-hidden="true">Follow</span></li>
</ul>
like this
var links = document.getElementsByClassName('linkClass');
var intro = document.getElementById("intro");
var intro1 = document.getElementById("intro1");
var intro2 = document.getElementById('intro2');
var content = document.getElementById("content")
window.addEventListener("scroll",() => {
for(var i=0; i<links.length; i++) {
var elmPosition =links[i].getBoundingClientRect().top
if(elmPosition <= intro1.getBoundingClientRect().top){
links[i].classList.add("whiteClass")
} else if(elmPosition> intro1.getBoundingClientRect().top && elmPosition < intro2.getBoundingClientRect().top){
links[i].classList.remove("whiteClass")
links[i].classList.add("blackClass")
} else if(elmPosition >intro2.getBoundingClientRect().top && elmPosition < content.getBoundingClientRect().top) {
links[i].classList.remove("blackClass")
links[i].classList.add("whiteClass")
} else if(elmPosition > content.getBoundingClientRect().top){
links[i].classList.remove("whiteClass")
links[i].classList.add("blackClass")
}
}
})
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: "HelveticaNeue";
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
.intro {
height: 90vh;
}
#intro1 {
height: 90vh;
}
#intro2 {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
.et_pb_social_media_follow {
position: fixed;
left: 30px;
top: 50%;
}
.icon.use-inverted-colors {
color: #fff;
}
.whiteClass {
color: white !important;
}
span {
color: white
}
.blackClass {
color: black
}
<section class="intro" id="intro">
<div class="content ">
<h1>You can create full screen sections without javascript.</h1>
<p>The height is set to 90vh, that means 90% height.</p>
</div>
</section>
<section class="intro1" id="intro1">
<div class="content ">
<h1>Resize your browser and see how they adapt.</h1>
</div>
</section>
<section class="intro2" id="intro2">
<div class="content">
<h1>It's amazing and fast.</h1>
</div>
</section>
<section>
<div class="content" id="content">
<h1>See the browser support.</h1>
</div>
</section>
<footer>
Made by #ckor
</footer>
<ul class="et_pb_module et_pb_social_media_follow et_pb_social_media_follow_0 clearfix et_pb_text_align_center et_pb_bg_layout_light">
<li class="et_pb_social_media_follow_network_0 et_pb_social_icon et_pb_social_network_link et-social-facebook"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></li><li class="et_pb_social_media_follow_network_1 et_pb_social_icon et_pb_social_network_link et-social-instagram"><span class="et_pb_social_media_follow_network_name linkClass" aria-hidden="true">Follow</span></li>
</ul>
Hello I'm new in the code and I try to stop the horizontal scroll when the div number 2 is visible in full (so that the div 3 is not visible but aund even there).
My code :
$(document).ready(function() {
$(window).scroll(function() {
var stopScroll = $('.block-2').offset().left;
if ($(window).scrollLeft() > $('.block-2').offset().left) {
$(window).scrollLeft(stopScroll);
}
});
});
body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
}
.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}
.block-1,
.block-2 {
height: 500px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">
</div>
</div>
<div class="block-2">
<div class="container">
</div>
</div>
<div class="block-1">
<div class="container">
</div>
</div>
</div>
I was inspired in this forum to write this code.
I try test a lot of solution but that was not walk :(.
Do you know where i can try this ?
I guess, that it solve your issue. For jquery and pure javascript.
$(document).ready(function() {
$(window).scroll(function() {
var wrapWidth = $('.wrap').width();
var secondBoxWidth = $('.block-2').offset().left;
var scrollable = $('.wrap')[0].scrollWidth;
var breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if ($(window).scrollLeft() >= breakPoint) {
$(window).scrollLeft(breakPoint);
return;
}
});
});
body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
}
.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}
.block-1,
.block-2 {
height: 500px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">
</div>
</div>
<div class="block-2">
<div class="container">
</div>
</div>
<div class="block-1">
<div class="container">
</div>
</div>
</div>
Pure JS solution
document.addEventListener('DOMContentLoaded', function () {
const scrollFunc = () => {
const wrap = document.querySelector('.wrap');
const wrapWidth = document.querySelector('.wrap').offsetWidth;
const secondBoxWidth = document.querySelector('.block-2').offsetWidth;
const scrollable = wrap.scrollWidth;
const start = Math.round(window.scrollX);
const breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if (start >= breakPoint) {
window.scrollTo(breakPoint, 0);
return;
}
};
document.addEventListener('scroll', scrollFunc);
});
I have a great little script for highlighting links on a one page site that I found here on Stack Overflow. It works perfectly in Chrome and Edge but not in IE. Here is a snippet. Any suggestions?
<head>
<style>
html, body, header, nav, main, section, p {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
header {
background-color: #000;
height: 50px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
nav {
height: 50px;
margin: 0 auto;
max-width: 600px;
padding: 0;
position: relative;
top: 0;
}
nav a {
color: #FFF;
display: inline-block;
font-size: 24px;
height: 50px;
line-height: 50px;
margin-right: 24px;
text-decoration: none;
}
nav a:hover {
color: #666;
}
nav a.active {
color: red;
}
main {
margin: 0; padding: 0;
}
section {
box-sizing: border-box;
color: blue;
height: 100vh;
margin: 0 auto;
max-width: 600px;
padding: 50px;
}
.one {
background-color: #FFF;
}
.two {
background-color: #999;
}
.three {
background-color: #666;
}
.four {
background-color: #333;
}
.five {
background-color: #111;
}
h1 {
font-size: 48px; line-height: 1; margin: 0; padding: 0;
}
</style>
</head>
<body>
<header>
<nav>
One
Two
Three
Four
Five
</nav>
</header>
<main>
<section id="one" class="one">
<h1>Section One</h1>
</section>
<section id="two" class="two">
<h1>Section Two</h1>
</section>
<section id="three" class="three">
<h1>Section Three</h1>
</section>
<section id="four" class="four">
<h1>Section Four</h1>
</section>
<section id="five" class="five">
<h1>Section Five</h1>
</section>
</main>
<!--Navigation Highlight Script-->
<script>
const links = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');
function changeLinkState() {
let index = sections.length;
while(--index && window.scrollY + 1 < sections[index].offsetTop) {}
links.forEach((link) => link.classList.remove('active'));
links[index].classList.add('active');
}
changeLinkState();
window.addEventListener('scroll', changeLinkState);
</script>
</body>
Here is the full code. Of course I've omitted the html, title, and meta tags. Any help would be appreciated.
I assume that you are using an IE 11 browser.
The IE browser does not support the Arrow functions(=>). It can be a possible reason that why your code is not working in the IE browser.
I have tried to modify your code, you can try to make a test with this code and let us know whether it works or not.
<!doctype html>
<html>
<head>
<title>demo</title>
<style>
html, body, header, nav, main, section, p {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
header {
background-color: #000;
height: 50px;
left: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
nav {
height: 50px;
margin: 0 auto;
max-width: 600px;
padding: 0;
position: relative;
top: 0;
}
nav a {
color: #FFF;
display: inline-block;
font-size: 24px;
height: 50px;
line-height: 50px;
margin-right: 24px;
text-decoration: none;
}
nav a:hover {
color: #666;
}
nav a.active {
color: red;
}
main {
margin: 0; padding: 0;
}
section {
box-sizing: border-box;
color: blue;
height: 100vh;
margin: 0 auto;
max-width: 600px;
padding: 50px;
}
.one {
background-color: #FFF;
}
.two {
background-color: #999;
}
.three {
background-color: #666;
}
.four {
background-color: #333;
}
.five {
background-color: #111;
}
h1 {
font-size: 48px; line-height: 1; margin: 0; padding: 0;
}
</style>
</head>
<body>
<header>
<nav>
One
Two
Three
Four
Five
</nav>
</header>
<main>
<section id="one" class="one">
<h1>Section One</h1>
</section>
<section id="two" class="two">
<h1>Section Two</h1>
</section>
<section id="three" class="three">
<h1>Section Three</h1>
</section>
<section id="four" class="four">
<h1>Section Four</h1>
</section>
<section id="five" class="five">
<h1>Section Five</h1>
</section>
</main>
<!--Navigation Highlight Script-->
<script>
const links = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');
var reg = new RegExp('(^| )active($| )','g');
function changeLinkState()
{
let index = sections.length;
var scrollTop = document.documentElement.scrollTop;
while(--index && scrollTop + 1 < sections[index].offsetTop)
{
}
for (var i=0; i<links.length; i++)
{
links[i].className = links[i].className.replace(reg,' ');
}
for (var i=0; i<links.length; i++)
{
if (sections[index].getAttribute("id")==links[i].getAttribute("href").substring(1))
{
links[i].className = "active";
}
}
}
changeLinkState();
window.addEventListener('scroll', changeLinkState);
</script>
</body>
</html>
Output:
I have a website where users can post and the top 3 posts are showing in my MOST LIKED section. I style just one div because the script automatically adds rest of the divs when the post is stored in a most liked section, but they're showing in a vertical way, and I want them to be horizontal. I'll first share my index.php/html code and then my css.
Index
var list2 = $("<div class='testimonial-area spmostliked bg1'><div class='container' id='mostliked'><div class='section-title white'><h2>Most Liked Regrets</h2>");
var count = 1;
for (var t = 0; (t < data.length); t++)
{
var comment = data[t];
if(comment['parent_comment_id'] == '0'){
var commentId = comment['comment_id'];
var out = $('<li>').html('<figure class="snip1167"><img src="https://images.freecreatives.com/wp-content/uploads/2016/03/22054222/Flat-Wings-Logo-Design.jpg" alt="sq-sample17"/><blockquote>' + comment['comment'] + '</blockquote><div class="author"><h5>First Name <span> $DATE</span></h5></div></figure>');
list2.append(out);
count++;
}
if(count > 3){
break;
}
}
$("#output2").html(list2);
CSS
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1167 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
width: 100%;
color: #333;
text-align: left;
box-shadow: none !important;
}
figure.snip1167 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip1167 img {
max-width: 100%;
height: 100px;
width: 100px;
border-radius: 50%;
margin: 0 auto;
display: block;
z-index: 1;
position: relative;
}
figure.snip1167 blockquote {
margin: 0;
display: block;
border-radius: 8px;
position: relative;
background-color: #fafafa;
padding: 65px 50px 30px 50px;
font-size: 1em;
font-weight: 500;
margin: -50px 0 0;
line-height: 1.6em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1167 blockquote:before,
figure.snip1167 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 50px;
opacity: 0.3;
font-style: normal;
}
figure.snip1167 blockquote:before {
top: 70px;
left: 20px;
}
figure.snip1167 blockquote:after {
content: "\201D";
right: 20px;
bottom: 0;
}
figure.snip1167 .author {
padding: 15px;
margin: 0;
color: #ffffff;
text-align: right;
}
figure.snip1167 .author h5 {
opacity: 0.8;
margin: 0;
font-weight: 800;
color: white;
}
figure.snip1167 .author h5 span {
font-weight: 400;
text-transform: none;
display: block;
color: white;
}
So, how can I make my divs appear in a horizontal way? Thanks in advice!
You could add the divs automatically inside a container with display:flex, as David787 said, this should fix it, if not, maybe we are not understanding your problem. In that case, can you try to explain it in another way?
#Zli I am so glad that worked for you :D . The display:flex will affect only the direct children of the div.
<div class="father">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<div class="not-a-direct-child"></div>
</div>
</div>
In this case will affect the divs with the class "child", not the divs with the class "not-a-direct-child". So, if your text is a direct child like in the next case:
<div class="father">
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
</div>
You can align or justify that item (your text) with some properties or just putting the text and the divs inside a container:
<div class="father">
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
</div>
I really recommend you to play this game flexbox froggy and I am sure you will understand how to use flexbox as an expert and to solve a lot of things.
Hello I'm attempting to to have two arrows pointing at a specific (x, y) point or in the general area of a button.
I would like two arrows coming from each of the boxs pointing in the general area of the button. I can do this fine with regular css on certain screens but when the screen is resized or smaller then the arrows no longer point to the button. I'm just trying to figure out a good way to handle this.
So really what I'm asking is what would be good way to go about having two arrows appended after 2 divs pointing at the same point. (The Red Square)
JSFIDDLE:
https://jsfiddle.net/kxw7jquu/
HTML
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(50deg); top: -10px">
➝
</div>
</div>
<div class='data-source-panel-wrapper' id='source_order'>
<h1>Order_movement</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h2>ID: 1</h2>
</div>
<div class='data-source-info'>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
CSS
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
h1 {
font-size: 1.5rem;
font-weight: 500;
}
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
.source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
.data-source-info {
h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
}
}
#source_report {
.data-source-panel {
.data-source-info {
margin-right: 18px;
}
}
}
#source_order {
right: 60px;
.data-source-panel {
flex-direction: column;
.data-source-info {
margin: 5px 0;
}
}
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
I'm not really a math enthusiast, i managed to find a formula on the internet to do what you wanted.
Source Pen Instead of following the mouse i made it so it follows the button
PS: I removed the the html on the right for the sake of this explanation.
i know it's not a complete answer, but you can adjust it from here.
window.onresize = pointing;
function pointing() {
let point = document.querySelector('.data-source-button');
let rad = Math.atan2(point.offsetLeft, point.offsetTop);
let left = (rad * (20 / Math.PI) * -5) + 60;
document.querySelector('.leftArrow').style.transform = "rotate(" + left + "deg)"
}
pointing();
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
}
.app-info-panel h1 {
font-size: 1.5rem;
font-weight: 500;
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
}
.data-source-panel-wrapper .source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
.data-source-panel-wrapper h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
}
.data-source-panel .data-source-info h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
.data-source-panel .data-source-info h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
#source_report .data-source-panel .data-source-info {
margin-right: 18px;
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow leftArrow' style=" top: -10px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>