How to make cool scroll transition

How to make cool scroll transition - javascript

im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too
my html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<button><i class="bi bi-list-check"></i></button>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<button class="btn active"><i class="bi bi-app"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
</section>
<script src="/b/js.js"></script>
</body>
</html>

HTML + CSS can be achieved, but the scrolling effect is slow
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
}
.wrap {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
scroll-snap-type: y mandatory;
}
.section {
color: #fff;
font-size: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.section1 {
background-color: #111;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #555;
}
.section4 {
background-color: #777;
}
.section5 {
background-color: #999;
}
.point {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
}
.point a {
display: block;
width: 8px;
height: 8px;
margin: 8px 0;
background-color: #fff;
}
<div class="wrap">
<section id="s1" class="section section1">page 1</section>
<section id="s2" class="section section2">page 2</section>
<section id="s3" class="section section3">page 3</section>
<section id="s4" class="section section4">page 4</section>
<section id="s5" class="section section5">page 5</section>
<div class="point">
</div>
</div>

Related

My hamburger menu isn't displaying correctly

Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong? I'm teaching myself how to develop and maintain sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Angel News</title>
</head>
<body>
<div id="con">
<nav class="navbar">
W.
<ul class="nav-menu">
<li class="nav-menu">
Home
</li>
<li class="nav-menu">
News
</li>
<li class="nav-menu">
Popular
</li>
<li class="nav-menu">
Trending
</li>
<li class="nav-menu">
Catergories
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<div class="section1">
<img src="" alt="">
<h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
<p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
Read More
</div>
<div class="section2">
<div class="section2-inside">
<h3 class="section2-h3">New</h3>
<div class="insidesection2-1">
<h4>Hydrogen VS Electric Cars</h4>
<p>Will hydrogen-fueled cars ever catch up to EV's?</p>
</div>
<div class="insidesection2-2">
<h4>The Downsides og AI Artistry</h4>
<p>What are the possible adverse effects of on-demand AI image generation?</p>
</div>
<div class="insidesection2-3">
<h4>Is VC Funding Drying Up?</h4>
<p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
</div>
</div>
</div>
<div class="section3">
<div class="section3-1">
<img src="" alt="">
<div class="insidesection3-1">
<h4 class="insidesection3-1-h4">01</h4>
<h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
<p>What happens when old PCs are given modern upgrades?</p>
</div>
</div>
<div class="section3-2">
<img src="" alt="">
<div class="insidesection3-2">
<h4 class="insidesection3-2-h4">02</h4>
<h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
<p>Our best picks for various needs and budgets.</p>
</div>
</div>
<div class="section3-3">
<img src="" alt="">
<div class="insidesection3-3">
<h4 class="insidesection3-3-h4">03</h4>
<h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
<p>How the pandemic has sparked fresh opportunities.</p>
</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
color: hsl(35deg, 77%, 62%);
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: rotateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: rotateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
width: 100%;
background-color: black;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active {
left: 0;
}
}
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active')
navMenu.classList.toggle('active')
})

Please try to use translateY instead of RotateY in your css #media tag as follows:
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

How do I format chat app to show ellipses for the side bar, and keep each div highlighted after being clicked?

I'm building an HTML chat app template, and I ran into two major issues when trying to complete it.
The chat names on the side are not showing ellipses despite me using text-overflow: ellipse;
When anyone of the chats are clicked, I would like them to stay on an active color until I click on another one, but I'm not sure how to go about it.
Here's my HTML and CSS:
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active{
background-color:rgb(122, 184, 235);
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
What should I do? Thanks.

You probably have to use javascript to achieve this. The default functioning for the :active state is to snap back to the :hover state as soon as you click and release the mouse button.
.sidebar > .group-chats > div:active {
background-color: red;
}
If you remove the :hover state you'll make it stay red, but it's as far as I am concerned impossible to keep :active as long as :hover immediately takes over once the click is finished.
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active,
.sidebar > .group-chats > div:focus {
background-color: red;
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
Edit: Forgot your ellipsis question. For this to work your element has to have a width. However, I am not able to solve it, your markup and css are confusing and adding width to what I think is the correct element doesn't work.
Edit 2: You could try a JS solution like this to make the active background color stick when you click the chat room divs. I have simplified. You can change this to use the container class that you already have and just add a unique class to all the divs inside of it that you want to make work with this JS:
const container = document.querySelector('.container')
const activeState = (e) => {
document.querySelectorAll('.active-color').forEach(link => link.classList.remove('clicked-color'))
if (e.target.className.toLowerCase() === 'active-color' )
e.target.classList.add('clicked-color')
}
container.addEventListener('click', (e) => {
activeState(e)
})
div.active-color {
padding: 2rem;
width: 300px;
background: #ddd;
margin: 1rem 0;
border-radius: 6px;
}
div.active-color:hover,
div.active-color:focus {
background: purple;
cursor: pointer;
}
div.active-color:active {
background: red;
}
div.active-color.clicked-color {
background: red;
}
<div class="container">
<div class="active-color">DIV 1</div>
<div class="active-color">DIV 2</div>
<div class="active-color">DIV 3</div>
<div class="active-color">DIV 4</div>
</div>

Sections appears smaller than intended

I'm having an issue with HTML sections. As shown in the screenshot the blue spot are the sections and they should include the grey space. The white space is what lays inside the section tags in HTML.
The problem was discovered when trying to add some space between each section, but everything we tried it wouldn't do anything.
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
// _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Roboto';
background-color: grey;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
image-resolution: 1200x1400;
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
color: white;
text-decoration: underline;
}
header h1 {
color: #fb6542;
}
nav {
white-space: nowrap;
background: #37474F;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
#media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 10% 0;
background-color: lightblue;
display: block;
}
footer {
grid-column: 1 / 3;
background: #252E39;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: inline-block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 70%;
height: 100%;
float: left;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
padding: 30px;
width: 100%;
height: 100%;
margin: 1%;
align-items: center;
}
.containerRight {
width: 20%;
height: 20%;
float: right;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-groupRight {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: center;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
width: 100%;
height: 100%;
align-items: center;
margin: 4% 1% 1% 1%;
}
.navTitle {
text-decoration: underline;
}
.endOfModule {
margin-bottom: 20px;
}
.sectionHolder {
width: 100%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href="CSS/linkHover.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" />
<img class="socialIcon" src="Assets/Images/twitterSVG.svg" alt="twitter logo"/>
</div>
<h1>SilverFlame</h1>
<h5>Jesper Christensen</h5>
<a target="headerLink" href="https://www.thesilverflame.dk/">Home</a>
<a target="headerLink" href="https://www.thesilverflame.dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
Contact
</header>
<nav>
<ul>
<li>Module 1</li>
<li>Maven</li>
<li>Network and HTTP</li>
<li>JavaScript & CA1</li>
<li>Module 2</li>
<li>ORM with JPA</li>
<li>Rest webservices with JAX-RS</li>
<li>JavaScript</li>
<li>CA2</li>
<li>Module 3</li>
<li>SYS 1</li>
<li>?</li>
<li>SYS 2</li>
<li>Module 4</li>
<li>SPA with React (TBD)</li>
<li>React routing, Security and RN</li>
<li>CA3 (TBD)</li>
<li>Module 5</li>
<li>Project - Week 1</li>
<li>Project - Week 2</li>
<li>Project - Week 3</li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div class="control-group">
<h2>Module 1 - Maven, Test & Network</h2>
</div>
</div>
</section>
<section id="section-2">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Maven</h2>
<div class="tooltip">
Simple Calculator
<span class="tooltiptext">Github link</span>
</div>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Network & HTTP</h2>
Exercises - Network stack
<br>
Exercise HTTP
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript and CA1</h2>
The JS array
<br>
JavaScript Exercice 1
<br>
Course Assignment 1
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="control-group">
<h2>Module 2 - Webstack</h2>
</div>
</div>
</section>
<section id="section-6">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<h2>Study Point Exercise 3 - JPA, JPQL and Testing </h2>
<h3>Part 1</h3>
Exercise - JPA Entity Mappings - 1
<br>
Exercise - Java Persistence - Querying - 3
<h3>Part 2</h3>
Studypoint part two
<h3>Part 3</h3>
Exam Preparation Exercise on relations and queries
<br>
Exam Preparation Exercise on JPQL
<br>
Object Relational Mapping and Inheritance
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-7">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Rest webservices with JAX-RS</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-8">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-9">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Course Assignment 2</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-10">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
</main>
<footer>
©2022
</footer>
<script src="Assets/JS/hoverEffect.js" type="text/javascript"></script>
<script src="Assets/JS/frontpage.js" type="text/javascript"></script>
</body>
</html>

You are applying a float to the container which takes the item out of the document flow. Consider using flexbox instead of floats for layout.
.sectionHolder {
width: 100%;
margin: auto;
display: flex;
}
.container {
flex: 1 1 70%;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
}
.containerRight {
flex: 0 0 20%;
height: 20%;
font-family: 'Alegreya Sans', sans-serif;
}

This is a well-known issue when working with floated content. The height of the section elements are not being properly calculated because the floated content is not in the normal document flow.
Add overflow:auto; to the section elements which should correct the issue by forcing the rendering engine to recalculate the height of the element and once it does that, it should recognize the child content and factor it in.
Here's more on the issue and other solutions.

My responsive navigator bar not working

Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>

You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

Resize MDL Card Height On Click To Height of Supporting Text of Card

I am new to HTML, CSS, and Jquery.
I created the following code for a Material Design Lite (MDL) "card."
Problems: The card will currently resize, but only the space above the title and I need the supporting text section to expand. I also need the supporting text section to expand dynamically only far enough to show all of its' text on the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.article_card {
width: 95%;
height: 200px;
background-color: white;
text-align: left;
scroll-behavior: smooth
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
height: 70px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".article_card").click(function() {
var newHeight = 900
if ($(".article_card").height() != 200)
$(".article_card").animate({
height: 400
}, 500);
else
$(".article_card").animate({
height: newHeight
}, 500);
});
</script>
</body>
</html>

Instead of altering the height of the entire .article_card, animate the height of the .mdl-card__supporting-text element. This will cause the entire .article_card to expand in height to show the contents of .mdl-card__supporting-text.
Since we want to animate the height to fit the dynamic content, we'll use max-height instead of height in order for the animation to work.
$(".article_card").click(function() {
if ($(this).height() > 220 ) {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '75px'
}, 500);
} else {
$(this).children('.mdl-card__supporting-text').animate({
maxHeight: '1000px'
}, 500);
}
});
.article_card {
width: 95%;
background-color: white;
text-align: left;
scroll-behavior: smooth;
padding-top: 0px;
position: relative;
}
.mdl-grid {
text-align: center;
justify-content: center;
}
.mdl-card__supporting-text {
max-height: 75px;
padding-left: 20px;
}
.mdl-button {
background-color: whitesmoke;
color: black;
}
span+span {
margin-bottom: 10px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="mdl-grid">
<span></span>
<span class="article_card mdl-card mdl-shadow--8dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">The Article Title</h2>
</div>
<div class="mdl-card__supporting-text">
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
This is some of the article1.<br />
This is some of the article2.<br />
This is some of the article3.<br />
This is some of the article4.<br />
This is some of the article5.<br />
This is some of the article6.<br />
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
Read the rest
</a>
</div>
</span>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to make cool scroll transition - javascript

Related

My hamburger menu isn't displaying correctly

How do I format chat app to show ellipses for the side bar, and keep each div highlighted after being clicked?

Sections appears smaller than intended

My responsive navigator bar not working

Resize MDL Card Height On Click To Height of Supporting Text of Card

Categories

Resources