Develop Reference

Active-indication in top menu to stay in sync while the user scrolls manually

I have a single HTML page with several sections to which the user can navigate by clicking the corresponding link at the top. That link will get highlighted when the user navigates via that link.
Now I would like that when the user scrolls up or down manually, and a different section comes into view, that the corresponding link in the top menu will get the highlight.
My attempt is in the scroll event handler, but I am facing an issue with finding the HTML section anchor id that corresponds to the current scroll position.
Note that I am required to produce the li dynamically -- so that cannot change: the ul must be empty as per requirements of my project so all list items and hyperlinks must be generated in JavaScript (as it is currently done).
Here is my page. My problem is in the scroll event handler:
/**
*
* Manipulating the DOM exercise.
* Exercise programmatically builds navigation,
* scrolls to anchors from navigation,
* and highlights section in viewport upon scrolling.
*
* Dependencies: None
*
* JS Version: ES2015/ES6
*
* JS Standard: ESlint
*
*/
/**
* Define Global Variables
*
*/
// All sections - Navigation Bar - Fragment & AllLinks
const navigationBar = document.getElementById('navbar__list');
var navigationBarContainer = document.getElementById("landing__container");
const fragment = document.createDocumentFragment();
const pagesections = document.querySelectorAll('section');
const navigationBarLi = document.querySelectorAll('nav .landing__container ul li');
// adding new classes to sections to match with anchor id for scroll purposes
//document.getElementById('li').className('section')
// for each single section
/*function retrieveElementsById(ids) {
var listIds = ids.split(" ");
var arrayresults = [], item;
for (var i = 0; i < listIds.length; i++){
item = document.getElementById(idList[i]);
if (item) {
results.push(item);
}
}
return(results);
}
allSectionsinSingFnct(querySelectorAll("section1 section2 section3 section4 section5 section6 section7"))
*/
//
function sectionsidattr() {
var sec1 = document.getElementById("section1");
var sec2 = document.getElementById("section2");
var sec3 = document.getElementById("section3");
var sec4 = document.getElementById("section4");
var sec5 = document.getElementById("section5");
var sec6 = document.getElementById("section6");
var sec7 = document.getElementById("section7");
}
const sectionsids = [
'section1', '#section1',
'section2', '#section2',
'section3', '#section3',
'section4', '#section4',
'section5', '#section5',
'section6', '#section6',
'section7', '#section7'
]
//const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));
//const sectionidelements = document.querySelectorAll(sectionids.map(id => `#${id}`).join(', '))
/**
* End Global Variables
* Start Helper Functions
*
*/
/**
* End Helper Functions
* Begin Main Functions
*
*/
/* Reference
https://stackoverflow.com/questions/65407419/how-to-add-active-class-to-the-list-href-that-equal-showed-in-the-viewport-sec
*/
// Building the Navigation Bar
for (let pagesection of pagesections) {
const pagelist = document.createElement('li');
const pagelinks = document.createElement('a');
const pagesectionId = pagesection.getAttribute('id');
const pagesectionTitle = pagesection.getAttribute('data-nav');
pagelinks.classList = 'menu__link';
pagelinks.setAttribute('href', `#${pagesectionId}`);
pagelinks.innerText = pagesectionTitle;
fragment.appendChild(pagelist);
pagelist.appendChild(pagelinks);
// Smooth Scroll
pagelinks.addEventListener('click', function (event) {
event.preventDefault();
window.scrollTo({
top: pagesection.offsetTop - 50,
behavior: 'smooth'
});
});
}
navigationBar.appendChild(fragment);
const allpageLinks = navigationBar.querySelectorAll('a');
//Scroll to using anchor ID
var scrollanchorid = document.querySelectorAll("section");
function scrollToAnchor() {
scrollToAnchor.scrollIntoView(true);
}
// Set the section as active when it is in the scope of the screen.
// vars at top pagesections & navigationBarLi
// when scrolling run the following function
window.addEventListener('scroll', () => {
let current = ''; // no current section at the beginning
//looping through all the sections
pagesections.forEach(section => {
const topSction = section.offsetTop;
//added for future reference that the logic loops through the values of the page
//console.log(topSction);
//retrieve sectionHeight
console.log(pageYOffset);
const sctionHeight = section.clientHeight;
if (pageYOffset >= (topSction - sctionHeight / 1)) {
current = section.getAttribute('id');
}
//Page Y Offset means how much we are scrolled here
})
//End of for each loop
// added for future refernce
//console.log(current);
navigationBarLi.forEach(li => {
li.classList.remove('active');
if (li.classList.contains('current')) {
li.classList.add('active')
}
})
// Add class 'active' to section when near top of viewport
// Another for each loop for active classes
const links = document.querySelectorAll('li');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function () {
var currenstate = document.getElementsByClassName("active");
currenstate[0].className = currenstate[0].className.replace("active", "");
this.className += "active";
});
};
});
//Set the menu item as active when the corresponding section is active.
/*Reference
https://www.w3schools.com/howto/howto_js_active_element.asp
*/
// Return Top Button
function scrollTopfunction() {
if (document.body.scrollTop > 25 ||
document.documentElement.scrollTop > 25) {
TopButton.style.display = "block";
} else {
TopButton.style.display = "none";
}
}
// At user click return to top of page for chrome , safari , firefox & most modern browsers
function pushtopfunction() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
/* User time out function when idle at 500 seconds */
setTimeout(function () { alert("User Time Out Message : 5 minutes"); }, 500000);
/*
*
* CSS written based on SMACSS architecture.
* To learn more, visit: http://smacss.com/
*
* For simplicity, no reset or normalize is added.
* To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
*
*/
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
/* ---- Base Rules ---- */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
body {
margin: 0;
background: linear-gradient(to bottom, #c31432, #240b36);
color: #fff;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to right top, #abbaab, #a34444);
}
section {
position: relative;
min-height: 100vh;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
}
button {
cursor: pointer;
border-radius: 12.5px;
}
/* Typeography General*/
header {
position: absolute;
top: 5px;
bottom: 5px;
align-items: center;
text-align: center;
background: transparent;
text-decoration: blanchedalmond;
text-shadow: black;
}
h1 {
font-family: 'Fira Sans', sans-serif;
border-radius: 50%;
border-color: black;
text-align: center;
align-items: center;
color: goldenrod;
background: linear-gradient(to right top, #8e0e00, #1f1c18);
}
.main__hero {
font-family: 'Fira Sans', sans-serif;
font-size: large;
top: 85px;
float: middle;
align-items: center;
border-color: black;
text-align: center;
color: black;
position: sticky;
}
#media only screen and (min-width: 35em) {
h1 {
font-size: large;
text-align: center;
align-items: center;
color: goldenrod;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: 'Oxygen', Sans-Serif;
font-size: 1.2em;
color: azure;
}
p {
line-height: 1.5em;
font-size: 0.9em;
color: #eee;
word-spacing: 0.1em;
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
/* Some sections features*/
section h2 {
display: sticky;
font-size: 7.7vh;
top: 10px;
bottom: 7px;
text-shadow: black;
color: cornsilk;
}
section h3 {
display: flex;
font-size: 2.0rem;
top: 10px;
bottom: 7px;
text-shadow: black;
color: burlywood;
}
/* ---- Module Rules ---- */
/* Return Top Button*/
.topbtnclass {
padding: 15px;
bottom: 20px;
right: 10px;
position: fixed;
text-align: center;
border-radius: 15px;
outline: none;
color: white;
z-index: 99;
font-size: 12.5px;
cursor: pointer;
align-items: center;
background: linear-gradient(to right bottom, #304352, #d7d2cc);
font-family: 'Oxygen', Sans-Serif;
}
/* Return Top Button Hover */
.topbtnclass:hover {
color: goldenrod;
display: flex;
background: linear-gradient(to right bottom, #870000, #190a05);
}
/* Adding an active class */
.active, .a:hover {
background: linear-gradient(to right bottom, #852121, #190a05);
color: goldenrod;
border-radius: 50%;
}
/* Navigation Styles*/
.navbar__menu {
position: fixed;
top: 0px;
float: middle;
background: linear-gradient(to right bottom, #304352, #d7d2cc);
width: 100%;
max-width: 2150px;
margin:0 auto;
text-align: center;
padding: 10px;
}
.navbar__menu ul {
position: relative;
padding-left: 1px;
padding-right: 1px;
text-align: center;
display: inline-block;
background: linear-gradient(to right bottom, #304352, #d7d2cc);
border-radius: 90%;
}
.navbar__menu li {
display: inline-block;
position: relative;
}
.navbar__menu li ul a {
display: inline-block;
padding: 7px 14px;
text-decoration: none;
}
.navbar__menu li ul.active{
background: linear-gradient(to right bottom, #c31432, #240b36);
color: goldenrod;
}
.navbar__menu .menu__link {
display: flex;
padding: 1em;
font-weight: bold;
text-decoration: none;
text-shadow: black;
color: goldenrod;
border-radius: 50%;
}
.navbar__menu .menu__link:hover {
color: wheat;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: linear-gradient(to right bottom, #c31432, #240b36);
position: sticky;
font-size: 2vw;
width: 100%;
z-index: 50;
border-color: black;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p {
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: center;
align-items: center;
}
#media only screen and (min-width: 35em) {
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
text-align: center;
align-items: center;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: '';
background: rgba(255, 255, 255, 0.187);
position: fixed;
z-index: -5;
width: 50vh;
height: 50vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: '';
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .2) 100%);
position: fixed;
top: 3em;
right: 3em;
z-index: -5;
width: 40vh;
height: 40vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: '';
background: rgb(255, 255, 255);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: '';
background: rgb(255, 255, 255);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.active {
color: goldenrod;
background: linear-gradient(to right bottom, #870000, #190a05);
}
section.active .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.active .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
#keyframes rotate {
from {
transform: rotate(0deg) translate(-1em) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-1em) rotate(-360deg);
}
}
/* Active Class */
li a.active {
color: goldenrod;
}
.active {
color: goldenrod;
background: linear-gradient(to right bottom, #870000, #190a05);
cursor: pointer;
position: relative;
}
.active:hover {
color: goldenrod;
background: linear-gradient(to right bottom, #870000, #190a05);
position: relative;
}
/*Page sections Gradients by id*/
#section1 {
/*border-radiuse at 25% to makesections more rounded*/
border-radius: 25%;
background-color: #fdb813;
background-image: linear-gradient(315deg, #fdb813 0%, #788cb6 74%);
}
#section2 {
border-radius: 25%;
background-color: #edd812;
background-image: linear-gradient(315deg, #edd812 0%, #766a65 74%);
}
#section3 {
border-radius: 25%;
background-color: #edd812;
background-image: linear-gradient(315deg, #edd812 0%, #766a65 74%);
}
#section4 {
border-radius: 25%;
background-color: #fdb813;
background-image: linear-gradient(315deg, #fdb813 0%, #788cb6 74%);
}
#section5 {
border-radius: 25%;
background-color: #edd812;
background-image: linear-gradient(315deg, #edd812 0%, #766a65 74%);
}
#section6 {
border-radius: 25%;
background-color: #b3cdd1;
background-image: linear-gradient(315deg, #b3cdd1 0%, #9fa4c4 74%);
}
#section7 {
border-radius: 25%;
background-color: #eaf818;
background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
</head>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<div class="menucontainer">
<ul id="navbar__list"></ul>
</div>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<img src="https://cdn.pixabay.com/photo/2015/01/15/16/16/staircase-600468_1280.jpg" alt=:"staircase-600468_1280"
width="150" height="150">
<img src="https://cdn.pixabay.com/photo/2015/12/08/00/39/steps-1081909_1280.jpg" alt=:"steps-1081909_1280"
width="150" height="150">
<img src="https://cdn.pixabay.com/photo/2014/03/08/22/32/escalator-283448_1280.jpg"
alt=:"escalator-5899073_1280" width="150" height="150">
</div>
</section>
<section id="section5" data-nav="Section 5">
<div class="landing__container">
<h2>Section 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section6" data-nav="Section 6">
<div class="landing__container">
<h2>Section 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias
non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section7" data-nav="Section 7" class="active">
<div class="landing__container">
<h2>Section 7</h2>
<label for"email">Email:</label>
</br>
<input type="text" name="email">
</br>
<label for"Last_name.">Last Name:</label>
</br>
<input type="text" name="Last_name">
</br>
<label for"First_name.">First Name:</label>
</br>
<input type="text" name="First_name."></br>
</form>
</br>
</br>
<textarea class="text_area_class" rows="25" cols=50>
Enterinquiry here.
</textarea>
</br>
<input type="submit">
<br>
</div>
</section>
<button class="topbtnclass" onclick="pushtopfunction()">Top</button>
<script src="js/app.js">
</script>
</main>
<footer class="page__footer">
<p>&copy Udacity</p>
</footer>

There are some issues:
The expression pageYOffset >= (topSction - sctionHeight / 1) is not correct. Subtracting the height of the section from its top offset is without meaning. Instead, make your loop interruptable (use for instead of forEach) and check whether pageYOffset + top < topSction + sctionHeight. If so, break out of the loop as searching further is no longer needed: we found the section.
Take into account that the menu bar at the top makes part of the section invisible, so make sure that the logic of the point above takes this offset into account. Define top as menu.offsetTop + menu.clientHeight, where menu is the .navbar__menu element.
li.classList.contains('current') is a condition that is never true, as you don't have a current CSS class. You wanted to refer here to the variable current, but use a literal string instead. Moreover, the value of current (e.g. "section3") will not be found in the class list of the li element. You could look for it in the href attribute of the child a elements:
li.children[0].href.endsWith(current)
The navigationBarLi collection is empty because you initialise this variable at a moment that the menu is not built yet. Instead you could use navigationBar.children, which will dynamically find the li elements.
Taking this together, use this code in the first part of your scroll event handler:
let current = '';
const menu = document.querySelector('.navbar__menu');
const top = menu.offsetTop + menu.clientHeight; // Add this offset
for (let section of pagesections) { // make a for-loop, so you can break out
const topSction = section.offsetTop;
const sctionHeight = section.clientHeight;
if (pageYOffset + top < topSction + sctionHeight) { // compare with end of section
current = section.getAttribute('id');
break; // <-- add break
}
}
for (let li of navigationBar.children) { // the collection you had was empty
li.classList.remove('active');
if (li.children[0].href.endsWith(current)) { // This identifies the section's li
li.classList.add('active');
}
}

How to make an image slideshow using CSS-Grid and javascript

I am trying to make a slideshow of images. But it does not seem to work I am not getting any errors when checking the javascript. Not sure what I am doing wrong
$( document ).ready(function() {
$('.work').scroll(function() {
var $this= $('h2');
$('.image').each(function () {
var hT = $(this).offset().top,
hH = $('h2').outerHeight(),
wH = $('.work').height(),
wS = $this.scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('#count').text($(this).data('index'));
}
});
});
});
function smallscreen() {
if (window.innerWidth < 959) {var workSlide = document.querySelector('.work');
var sliderImages = document.querySelectorAll('.work h2');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
var counter = 1;
const size = sliderImages[0].clientWidth;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextButton.addEventListener('click', function next() {
if (counter >= sliderImages.length - 1) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevButton.addEventListener('click', function prev() {
if (counter <=0) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
workSlide.addEventListener('transitionend',function loopin() {
if (sliderImages[counter].class === 'clonelast') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
if (sliderImages[counter].class === 'clonefirst') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
});
}
}
window.onload = window.resize = smallscreen;
#media only screen and (max-width: 959px) /*and (orientation:portrait)*/ {
html,body {
max-width: 100%;
height: 100%;
}
.main{
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-gap: 1.5em;
}
.header {
grid-column: 1fr;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
grid-row: 1;
z-index: 2;
width: 100vw;
height: 60px;
}
.header h3 {
display: none;
}
.logo {
grid-column: 1;
max-width: 100%;
display: grid;
justify-items: center;
}
.logo embed{
display: block;
margin: auto;
max-width: 50%;
height: auto;
}
.body {
grid-row: 2/3;
display: grid;
grid-gap: 1.5em;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
margin: 0;
padding: 0;
z-index: 1;
}
.about{
max-width: 100vw;
}
h1 {
font-family: 'DM Sans', sans-serif, Arial, Helvetica;
font-size: 13.5pt;
line-height: 22pt;
font-weight: 500;
color: #000000;
}
.work {
grid-row: 2 / 4;
grid-column: 1;
display: flex;
width: 100%;
}
.image > img{
max-width: 100vw;
height: auto;
}
.buttons {
grid-row: 2 / 4;
grid-column: 1;
align-self: center;
padding: 0.75em;
display: grid;
grid-template-columns: 1fr 1fr;
transition: 0.5s ease 0s;
z-index: 4;
width: 100vw;
}
.prev {
justify-self: start;
}
.next {
justify-self: end;
}
button {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
outline: inherit;
display: flex;
}
.buttons :hover {
color: white;
}
.footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
z-index: 3;
min-height: 80px;
grid-row: 3;
text-align: center;
max-width: 100vw;
}
.phone {
grid-row: 2;
align-self: center;
justify-self: center;
}
.media {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: 1em 0 0;
grid-row: 1;
padding-bottom: 1em;
}
li > a {
text-decoration: none;
color: black;
}
li > a:hover {
font-weight: 800;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>DesignLover-Question</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.walumozagba.com">
<embed src="https://collartocuff.files.wordpress.com/2010/01/chanel-logo-png-image-e1512737281632.png" alt="logo" width="500px">
</a>
</div>
<h3><span id="count">1</span>/17</h3>
</div>
<div class="body">
<div class="about">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
<div class="work">
<h2 class="image" data-index="0"></h2>
<h2 class="image clonefirst" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image clonelast" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="2"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="3"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="4"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="5"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="6"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="7"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="8"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="9"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="10"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="11"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="12"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="13"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="14"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="15"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="16"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
</div>
<div class="buttons">
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div>
</div>
<div class="footer">
<div class="phone">
<p>+31 123 12 12 12</p>
</div>
<ul class="media">
<li>Behance</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</div>
</div>
<script src="JS/scriptscroll.js" type="text/javascript"></script>
</body>
</html>

You need to transition the elements within .work, not .work itself.
Heres a small working version of a image carousel:
(also available as JSFiddle)
class Slider {
constructor(el) {
this.el = el;
this.activeIndex = 0;
this.numItems = this.el.children().length;
// automatically advance slider
this.interval = setInterval(() => this.next(), 5000);
}
prev() {
this.activeIndex--;
if(this.activeIndex < 0)
this.activeIndex = this.numItems - 1;
this.updateDom();
}
next() {
this.activeIndex++;
if(this.activeIndex >= this.numItems)
this.activeIndex = 0;
this.updateDom();
}
updateDom() {
this.el.children().css('transform', `translateX(-${this.activeIndex}00%)`)
}
}
$(() => {
let slider = new Slider($(".work"));
$(".prev").click(() => slider.prev());
$(".next").click(() => slider.next());
});
.work {
/* Specify the size of the image box (can be in any unit you want)*/
width: 500px;
height: 300px;
overflow: hidden;
display: flex;
}
img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
will-change: transform;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="work">
<img src="https://picsum.photos/500/300?1">
<img src="https://picsum.photos/500/300?2">
<img src="https://picsum.photos/500/300?3">
<img src="https://picsum.photos/500/300?4">
<img src="https://picsum.photos/500/300?5">
</div>
<button type="button" class="prev">
PREV
</button>
<button type="button" class="next">
NEXT
</button>
For production use i would recommend using an existing library though.
To name a few:
slick
swiper
lightslider
Owl Carousel
Edit:
Heres a working JsFiddle with your code.

Center a SVG with div on hover of that div

Basically,
I have a gradient bar and on hover of the USP's below the bar the gradient moves to above that USP with a triangle. Now I'm trying to figure out how I can get the center of an SVG to center inside of the USP on hover to make the gradient look like it has a triangle also. It's a little hard screenshot and codepen below.
http://codepen.io/nsmed/pen/MpOLpp?editors=1100
<section class="small-business-split-header-block">
<div class="wrapper">
<h1 class="small-business-header">Your calls<br />answered brilliantly</h1>
<p class="small-business-sub-header">Our small business services ensure you capture every opportunity and make your business look bigger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet semper ante. Ut vel odio.</p>
</div><!--wrapper-->
<div class="usp-bar">
<p class="usp-one active">Telephone Answering</p>
<span><img src="http://svgshare.com/i/y4.svg" /></span>
</div><!--usp-bar-->
</section>
<div class="usp-list cf">
<div class="usp active">
<a href="#">
<p>Need your own<br /><strong>dedicated PA?</strong></p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for<br />an auto attendent?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Missing calls<br />on your mobile?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for a<br />business number?</p>
</a>
</div><!--usp-->
</div><!--usp-list-->

Here try this, click on items to see the beak moving. It's not a production ready code, but you can take it from here :)
Markup
<div class="bar">
<div class="bar-background">
<div class="bar-slider"></div>
</div>
</div>
<ul class="menu">
<li class="menu-items">Item 1</li>
<li class="menu-items">Item 2</li>
<li class="menu-items">Item 3</li>
<li class="menu-items">Item 4</li>
</ul>
SCSS
$bar-height: 6rem;
$bar-slider-height: 2rem;
$bar-slider-background: #ffffff;
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
padding: 0;
margin: 0;
}
.bar {
position: relative;
}
.bar-background {
background: -webkit-linear-gradient(
left,
rgba(0, 175, 169, 1) 30%,
rgba(1, 180, 172, 0.15) 60%);
height: $bar-height;
overflow: hidden;
width: 100%;
}
.bar-slider {
height: $bar-slider-height;
margin-top: $bar-height - $bar-slider-height;
display: flex;
width: 200vw;
transition: transform 1s linear;
&:before,
&:after {
content: "";
width: 100vw;
display: block;
background: $bar-slider-background;
height: $bar-slider-height;
}
&:before {
transform: skew(45deg) translateX(-50%);
}
&:after {
transform: skew(-45deg) translateX(-50%);
}
}
.menu {
height: 2rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu-items {
list-style: none;
}
JS
var slider = $('.bar-slider'),
sliderCenter = parseInt(slider.width() / 4, 10); // taking 1/4 here because our slider is twice the width of viewPort
$('.menu-items').on('click', function() {
var activeClassName = 'is-active';
$(this)
.addClass(activeClassName)
.siblings()
.removeClass(activeClassName);
var activeItem = $('.' + activeClassName),
activeItemPositonFromLeft = activeItem.position().left,
activeItemCenter = parseInt(activeItem.width() / 2, 10),
newPos = parseInt(activeItemPositonFromLeft - sliderCenter + activeItemCenter, 10),
translateX = 'translateX(' + newPos + 'px)';
slider.css({
transform: translateX
});
});
http://codepen.io/robiosahan/pen/gmopRJ

how to slide out content on hover - flexbox-layout

i have a beautiful little landing page with big pictures and small boxes with headings in it.
if you hover over the headings, the box around it should slide out (getting more width but shouldn't push the picture away, instead it should be above the picture) the picture next to it and shows some text there. this is all done in a flexbox-bootstrap layout.
will position: absolute, z-index and some left or right stuff do this trick as well even in a flexbox-content? or do i have to use some jscript/jQuery stuff?
here's my bootply: http://www.bootply.com/d2liwNZnCH
and the code for the greater good:
<main class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-3 bgb fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3 bgr fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-8">
<div class="imagecontainer">
<img src="http://placehold.it/1265x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-4 bgp fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-5 bgg fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-7">
<div class="imagecontainer">
<img src="http://placehold.it/765x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
</div>
</main> <!-- Maincontent -->
css:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
margin: 0;
padding: 0;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:-.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}
.flex-col {
display: flex !important;
display: -webkit-flex !important;
flex: 1 100%;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0px;
word-break: break-word;
}
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
}
.contentbox h2 {
font-variant: small-caps;
}
.imagecontainer {
display: block;
}

did it with a second ".contentbox"-div and some helper classes and jQuery click event and i chosed to fade the readmore-text in the contentbox itself above the centered heading.
html:
<div class="col-lg-3 col-sm-6 col-xs-12 fw">
<div class="contentbox readmore bgr flex-col">
<h2>example</h2>
</div>
<div class="contentbox expand bgr flex-col">
<span aria-hidden="true" class="pull-right closebox">×</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
<p>read more</p>
</div>
</div>
css:
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
height: auto;
min-height: 160px; /* Only for my layout */
}
.readmore {
cursor: pointer; /* So your complete box seems clickable */
}
.expand {
position: absolute;
top: 0; /* You can switch these values to whatever values wished */
left: 0; /* It will then slide from the direction you chose */
right: 0; /* but remember to put the chosen direction to 0 again on .expanded */
bottom: 0; /* for me, the fadeeffect was the most elegant way */
font-size: 15px;
opacity: 0;
visibility: hidden;
transition: all .75s ease-in-out;
}
.expanded {
top: 0;
opacity: 1;
visibility: visible;
cursor: default;
transition: all .75s ease-in-out;
}
.closebox {
font-size: 24px;
position: absolute;
right: 10px;
top: 0px;
cursor: pointer;
}
js within document ready:
$(".readmore").click(function(){
$(this).next(".expand").addClass("expanded");
});
$(".closebox").click(function(){
$(this).parent(".expanded").removeClass("expanded");
});

Onclick isn't being registered, keep telling me it's undefined

I'm trying to have a menu slide in whenever the 'menu' icon is clicked. Now I can't see where I went wrong. I'm getting the 'menu is not defined' error in the console.
<!DOCTYPE html>
<html>
<head>
<title>Menu rechts</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<section class="web_wrapper">
<header>
<main style="width: 100%;">
<button class="material-icons" id="menu_toggle" onclick="menu()">menu</button>
</main>
</header>
</section>
<section class="menu_show">
<nav style="right: -20%;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<nav>
</section>
<script src"toggle.js" type="text/javascript"></script>
</body>
</html>
The used javascript
function menu()
{
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
The css
After getting comments it seems it might be a css issue. Because of this reason i'm also posting the css.
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0; }
body {
width: 100%;
color: #212121; }
a {
text-decoration: none; }
li {
list-style-type: none; }
.web_wrapper {
float: left;
width: 100%;
height: auto; }
header {
width: 100%;
height: 100%; }
header main {
height: 75px; }
header main button#menu_toggle.material-icons {
position: relative;
top: 50px;
left: 1000px;
background: transparent;
transition: transform 0.3s, color 0.3s;
font-size: 24pt !important; }
header main button.active {
transform: rotate(90deg);
color: #536DFE; }
.menu_show {
height: 100vh;
float: right;
background: #607D8B; }
.menu_show nav {
width: 20%; }
.menu_show nav ul {
width: 100%; }
.menu_show nav ul li {
width: 100%;
text-align: center; }

Try the below,
You can simply archive this with jQuery animate function
Read This animate
var click = 0; //keep this flag to identify the click
function menu() {
var menu = $("nav");
$(menu).animate({
width: 'toggle'
},"slow","easeOutElastic");
if (click == 0) {
$(".web_wrapper").animate({"width": "100%"},"slow","easeOutElastic");
click = 1;
} else {
$(".web_wrapper").animate({"width": "80%"},"slow","easeOutElastic");
click = 0;
}
console.log(click);
}
nav {
color: 'black';
background-color: #ddd;
text-align: justify;
width: 20%;
float: right;
margin-top: -20px;
}
.web_wrapper {
width: 80%;
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<section class="web_wrapper">
<header>
<div style="width: 100%;" id="main">
<button class="material-icons" id="menu_toggle" onclick="menu();">menu</button>
</div>
</header>
</section>
<section class="menu_show">
<nav style="right:-20%;" id="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>

use
<script src"toggle.js" type="text/javascript"></script>
in top of your codes and check again.

ideally you need to use jQuery but i am also a JS fan.Here you just have to define menu function anywhere but before its called ,ideally in head section,check this fiddle
http://jsfiddle.net/r0d09wcr/1/
<head>
<script>
function menu()
{
alert('dsff');
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
</script>
</head>

First, next time please fiddle your code.
Second, I think this fiddle does what you want:
JSFIDDLE:http://jsfiddle.net/657oudrv/1/
$('#menu_toggle').click(function()
{
var menu = $("nav")
var main = $("main")
if(menu.css('right') !== '-20%')
{
menu.css('right','-20%')
main.css('width','100%')
//Just for test without your css:
menu.css('margin-left','20%')
}
else
{
menu.css('right','0%')
main.css('width','80%')
//This is also the part of the test
menu.css('margin-left','0%')
}
});

You should use CSS selector with .querySelector()
Try to add id="nav" to your nav HTML element and edit you selector in js accordingly.
in HTML file:
<nav id="nav" style="right: -20%;">
in toogle.js:
var menu = document.querySelector("#nav");
see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector for reference

Big wall of code coming up, prepare yourselves. Note that I move the Menu button into the menu section. I also changed the css a lot. Not sure if the text changes color when it's supposed to. The javascript now simply toggles a menu_show class on the body and css handles the rest... I ♥ html5
The fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type='text/css'>
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0;
}
body {
width: 100%;
color: #212121;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
section {
display: inline-block;
}
.web_wrapper {
transition: .3s;
float: left;
width: 95%;
height: auto;
}
.menu_show .web_wrapper {
width:80%;
}
.menu {
position: absolute;
right: 0px;
width: 5%;
overflow: hidden;
height: 100%;
transition: width .3s;
background: #607D8B;
}
.menu_show .menu {
overflow: show;
width: 20%;
}
.menu nav {
position: relative;
top: 30px;
white-space: nowrap;
}
.menu_show .menu nav {
white-space: normal;
top: 10px;
}
.menu_show .menu nav ul {
width: 100%;
}
.menu_show .menu nav ul li {
width: 100%;
text-align: center;
}
#menu_toggle {
text-align: left;
overflow: hidden;
position: relative;
background: transparent;
transition: 0.3s;
font-size: 12pt !important;
transform: rotate(90deg);
top: 20px;
right: 10px;
}
.menu_show .menu #menu_toggle {
color: #536DFE;
top: 0px;
right: 0px;
transform: rotate(0deg);
}
</style>
<script type='text/javascript'>
// console logs left in for science
function ready(fn) {
console.log('readying');
if (document.readyState != 'loading'){
console.log('loading...');
fn();
} else {
console.log('content not loaded');
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
var body = document.querySelector("body");
var button = document.getElementById('menu_toggle');
var menuShowing = false;
button.addEventListener('click',toggleMenu);
function toggleMenu()
{
if(menuShowing === true)
{
body.classList.remove('menu_show');
}
else
{
body.classList.add('menu_show');
}
menuShowing = !menuShowing;
}
});
</script>
</head>
<body>
<section class="web_wrapper">
<main>
Some content
<p>more in this paragraph!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</section>
<section class="menu">
<button class="material-icons" id="menu_toggle">menu</button>
<nav>
<ul>
<li>1. This is some long stinking text</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>
</body>
</html>
I'll fix any mistakes and try to address any comments. Best way to figure out what something does is to remove the class, rule, w/e from the dev console and see what happens.
The fiddle
Credit where it's due:
position: absolute; right: 0px; for animation to work right (also height looks good with this set)
the ready function was off StackO... can't find the answer i pulled it from now :(
wikipedia for the lorem ipsum on the fiddle