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>
Related
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 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>
Let's take a look at my first and simple website. I have made the website from the tutorial, but I want to change a few things:
First: the logo "Bukowski" I want to have at center on the white space and (when I shorten the screen and making it bigger all the time at center) ,
Second: I want to have the menu at center, not to the left.
Third: When I make the screen smaller than 996px the black block appears and goes up. I want my menu to collapse below 996px normally but without the black block goes up.
And the forth and last: Take a look please at html code and please tell me what should I add to the
head tags I mead meta-ta
#font-face {
src: url(mistral.ttf);
font-family: mistral;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.logo2 {
font-family: mistral;
font-size: 100px;
margin-left: auto;
margin-right: auto;
}
header {
position: fixed;
width: 100%;
height: 80px;
padding: 0px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
z-index: 1000;
}
header .logo {
font-family: 'mistral';
color: #fff;
font-size: 40px;
text-decoration: none;
letter-spacing: 2px;
}
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
padding: 5px 10px;
color: #fff;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
header ul li a:hover,
header ul li a.active {
background-color: #205aff;
}
.toggle {
display: none;
}
section {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100vh;
padding: 120px 50px 100px;
text-align: justify;
}
.nag {
text-align: center;
}
section img {
max-width: 400px;
margin-left: 30px;
}
section h2 {
text-align: left;
text-transform: uppercase;
}
section p {
font-size: 18px;
}
section a {
display: inline-block;
padding: 8px 10px;
text-decoration: none;
font-size: 18px;
background: #111;
color: #fff;
margin-top: 20px;
}
section:nth-child(odd) {
position: relative;
justify-content: center;
align-items: center;
background: #111;
color: #fff;
}
#media (max-width: 992px) {
section h2 {
font-size: 1.5em;
text-transform: uppercase;
}
section {
padding: 100px 50px 50px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
section img {
margin: 50px 0 0;
max-width: 100%;
}
header ul {
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: calc(100vh - 80px);
padding: 50px 100px;
text-align: center;
overflow: auto;
transition: 0.9s;
background: #111;
flex-direction: column;
opacity: 0;
transform: translateY(-100%);
}
header.active ul {
opacity: 1;
top: 80px;
transform: translateY(0);
}
header ul li a {
margin: 5px 0;
font-size: 24px;
}
.toggle {
display: block;
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
.toggle:before {
content: '';
position: absolute;
top: 4px;
width: 100%;
height: 2px;
background: #fff;
z-index: 1;
box-shadow: 0 10px 0 #fff;
transition: 0.5s;
}
.toggle:after {
content: '';
position: absolute;
bottom: 4px;
width: 100%;
height: 2px;
background: #fff;
z-index: 1;
transition: 0.5s;
}
header.active .toggle:before {
top: 14px;
transform: rotate(45deg);
box-shadow: 0 0 0 #fff;
}
header.active .toggle:after {
top: 14px;
transform: rotate(-45deg);
}
}
.nag2 {
font-family: 'mistral';
font-size: 150px;
margin-left: px;
text-align: center;
margin-left: 30px;
}
.nag h2 {
letter-spacing: 30px;
text-decoration: underline;
font-size: 20px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bukowski</title>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Service</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
</ul>
<div class="toggle" onclick="toggle()"></div>
</header>
<section id="home">
<div>
<div class="nag">
<div class="nag2">Bukowski</div>
<h2>LEATHER WEAR</h2>
</div>
</div>
<img src="fota2.jpg">
</section>
<section id="about">
<div>
<h2>About Us</h2>
<p>Jesteśmy polską firmą odzieżową, zajmującą się dystrybucją, produkcją, oraz projektowaniem odzieży skórzanej i kożuchów . Nasza marka istnieje na rynku od 1992 roku. Firma Bukowski to polska marka dedykowana ludziom ceniącym sobie niebanalny styl,
komfort i wygodę. Oferowane przez nas kolekcje to nawiązanie do nowoczesności zgodne z aktualnymi trendami. Doświadczenie sięgające niemal 30 lat to doskonała gwarancja wysokiej jakości produktów oraz zaufania klienów. Serdecznie zapraszamy do
nabywania produktów w naszych punktach sprzedaży.</p>
</div>
</section>
<section id="services">
<div>
<h2>Our Service</h2>
<p>Wychodząc także naprzeciw oczekiwaniom naszych klientów, poza standardowym asortymentem oferujemy szycie na miarę. W naszych punktach sprzedaży posiadamy wykwalifikowany personel, który może pobrać wymiary od indywidualych klienów. Dzięki temu u
nas każdy klient może znaleźć coś dla siebie. Również oferujemy pomoc w zakresie skracania, zwężania, renowacji bądź wymiany poszczególnych elementów w produktach u nas zakupionych. Dzięki temu możemy przedłużyć użyteczność i żywotność naszych
produktów dzięki czemu możecie Państwo cieszych się naszyi produktami przez długie lata.
</p>
</div>
</section>
<section id="portfolio">
<div>
<h2>Our Recent Work</h2>
<p>Od niemal 30 lat obecności na rynku, nieustannie dokładaliśmy wszelkich starań, aby nasze produkty cechowała najwyższa jakość. Ostatnio jeszcze bardziej poszerzyliśmy nasz asortyment o nowe produkty. Posiadamy ponad sto różnych wzorów w różnych
kolorach i nieustannie pracujemy nad poszerzeniem naszej oferty. W ostatnich latach nasz asortyment zwiąkszył się kilkukrotnie. </p>
</div>
</section>
<section id="team">
<div>
<h2>Our Expert</h2>
<p>Posiadamy wysoce wykwalifikowaną kadrę pracowniczą, która jest jednym z podstawowych gwarantów uzyskania efektywnych wyników naszej firmy. W pierwszej kolejności zapewniamy naszym pracownikom odpowiedni poziom przygotowania w zakresie krojenia,
szycia, a także sprzedaży finalnych produktów w naszych punktach sprzedaży. Nasza kadra jest do Państwa dyspozycji oraz dołoży wszelkich starań, aby nasi klienci mogli cieszyć się z nabytych u nas produktów przez długie lata. Wieloletnie doświadczenie,
które nabyliśmy przez dziesiątki lat istnienia na rynku, pomaga nam wyjść naprzeciw potrzebom najbardziej wymagających klientów.
</p>
</div>
</section>
<section id="contact">
<div>
<h2>Contact Us</h2>
<p>
Siedziba firmy: <br><br> Rogoźnik os. Za Torem 20a<br> 34-471 Ludźmierz<br><br> tel 48 18 265 56 53<br> tel./fax: 48 18 265 53 05<br> kom. 48 603 607 832<br> kom. 48 604 971 789<br> kom. 48 695 069 380<br><br> e-mail: bukowski#interia.eu
</p>
</div>
</section>
<script type="text/javascript">
function toggle() {
var header = document.getElementById("header");
header.classList.toggle('active');
}
</script>
</body>
</html>
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>