I Making a admin panel with HTML , CSS , JQuery .
Now I Have Problem in Side Navigation .
I Need When Admin Panel Opened , Change Header And Main-Container Width .
Width : 1279 px When Opened Width:1119 px
My Code :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Admin_Panel_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="../js/bootstrap.js"></script>
<link href="Style%20Sheet/StyleSheet.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.0.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<header class="top-header">
<section class="navigation-icon">
<span class="top-bar"></span>
<span class="middle-bar"></span>
<span class="bottom-bar"></span>
</section>
</header>
<nav class="navigation">
<span class="title-logo">Kia<span class="kala">Kala</span ></span>
<section class="logo">
<img src="../Image/1467494806_Picasa.png" />
</section>
<ul class="navigation-ul">
<li>Space</li>
<li>Galaxy</li>
<li>Alien</li>
<li>Planet</li>
<li>Life</li>
</ul>
<section class="navigation-social">
<ul class="navigation-social-ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</nav>
<div class="right-col" role="main">
</div>
</div>
</form>
<script src="../Script/JQuery.js"></script>
<script src="../Scripts/jquery-3.0.0.min.js"></script>
</body>
</html>
CSS Code :
body {
padding: 0;
margin: 0;
background-color: #ffffff;
}
*, *:after, *:before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
.top-header {
width: 1279px;
height: 57px;
background-color: #EDEDED;
float: right;
position: relative;
}
.right-col {
float: right;
background-color: #F7F7F7;
width: 1119px;
height: 1721px;
}
.navigation {
width: 70px;
height: 1721px;
background-color: #2A3F54;
float: left;
display: block;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo {
width: 65px;
height: 65px;
background-color: white;
display: block;
border-radius: 50%;
margin-top: 5px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo img {
width: 65px;
height: 65px;
display: block;
float: left;
}
.title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
transition: all 800ms cubic-bezier(.9,0,.33,1);
visibility: hidden;
}
.title-logo .kala {
color: red;
}
.navigation-icon {
width: 70px;
margin-left: 10px;
height: 57px;
display: block;
cursor: pointer;
}
.navigation-icon .top-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 10%;
}
.navigation-icon .middle-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 30%;
}
.navigation-icon .bottom-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 50%;
}
.bottom-bar, .middle-bar, .top-bar {
margin-top: 8px;
}
.navigation-ul {
float: right;
margin-top: 200px;
visibility: hidden;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-ul li {
list-style: none;
text-align: right;
}
.navigation-ul a {
text-decoration: none;
display: block;
font-weight: 800;
text-transform: uppercase;
color: white;
margin-bottom: 15px;
}
.navigation .navigation-social {
width: 100%;
height: 30px;
float: left;
margin-top: 30px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation .navigation-social-ul {
float: right;
list-style: none;
visibility: hidden;
}
.navigation .navigation-social-ul li {
display: inline-block;
}
.navigation .social-icon {
width: 30px;
height: 30px;
display: inline-block;
background-color: white;
}
/*_____----------__________-------- Jquery Effect -------_________--------________*/
.navigation-open {
width: 230px;
height: 100%;
display: block;
position: absolute;
left: 0;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo .kala {
color: red;
}
JQuery Code :
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
});
});
Simplest would be toggle a class on <body> and add corresponding css rules
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
$('body').toggleClass('nav-open');
});
});
CSS example
body.nav-open .top-header {
width: 1119px;
}
Related
I'm creating a menu for my site and I don't know how to keep the selected item checked.
At the moment it keeps bouncing back to the first one.
nav {
margin: 27px auto 0;
position: relative;
width: 590px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
nav a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
nav .start-home, a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #e74c3c;
}
p {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ecf0f1;
font-family: 'Cherry Swash',cursive;
font-size: 16px;
}
span {
color: #2BD6B4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main_menu.css">
</head>
<body>
<nav>
test
foo1
<div class="animation start-home"></div>
</nav>
</body>
</html>
Can someone help me to keep the clicked menu item selected. I don't want to have to use javascript. Is there a way to do this? I read something about an 'active' element.
Edit: Since #hackerfrosch thinks that the whole thing is easier with js, I tried that. But I don't know how I can assign a class to the buttons via js in my case. Can I specify the color that the button should have, since each button has a different color?
I searched a little further and completely remade the menu. The design is roughly the same and it works entirely without Javascript.
.slide-toggle{
display: none;
}
.slide-menu{
font-family: arial, sans-serif;
max-width: 600px;
margin: 50px auto;
overflow: hidden;
}
.slide-menu label{
width: 25%;
text-align: center;
display: block;
float: left;
}
.slide-menu label:hover{
cursor: pointer;
}
.slide-menu label span{
display: block;
padding: 20px 15px 15px;
color: white;
}
.slider{
width: 100%;
height: 100%;
display: block;
background: #415a75;
border-radius: 10px;
margin-top: 10px;
}
.slider .bar{
width: 25%;
height: 40px;
border-radius: 10px;
}
.slide-menu label, .slider .bar {
transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
}
.slide-menu .slide-toggle + label{
opacity: 1;
}
.slide-menu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; background: #1abc9c }
.slide-menu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; background: #e74c3c }
.slide-menu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; background: #3498db }
.slide-menu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; background: #9b59b6 }
.slide-menu #slide-item-1:hover ~ .slider .bar{ margin-left: 0; background: #1abc9c }
.slide-menu #slide-item-2:hover ~ .slider .bar{ margin-left: 25%; background: #e74c3c }
.slide-menu #slide-item-3:hover ~ .slider .bar{ margin-left: 50%; background: #3498db }
.slide-menu #slide-item-4:hover ~ .slider .bar{ margin-left: 75%; background: #9b59b6 }
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main_menu.css">
<title></title>
</head>
<body>
<nav class="slide-menu">
<input onclick="location.href='#1'" type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
<label for="slide-item-1"><span>Home</span></label>
<input onclick="location.href='#2'" type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
<label for="slide-item-2"><span>About</span></label>
<input onclick="location.href='#3'" type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
<label for="slide-item-3"><span>Folio</span></label>
<input onclick="location.href='#4'" type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
<label for="slide-item-4"><span>Contact</span></label>
<div class="animation start-home"></div>
<div class="slider">
<div class="bar"></div>
</div>
</nav>
</body>
</html>
My header is fixed and the text is set to relative. When I scroll the text goes over the header.
I would like my text not to go over my header.
The Javascript is at the beginning.
The CSS is in the middle.
The HTML is at the end.
This is my picture, hopefully it didn't hyperlink :)
I am new to web design and I am taking a course on CS50. Furthermore, I have already tried to make the text fixed and the header relative.
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
welcome!
Alright, so using a property called z-index, we can change the order of what appears on top, like so:
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
z-index: 1;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
So, z-index default is actually set to 0, so setting an element to z-index: 1; will make that the "priority" to be ordered on top of everything else. Hope this helps.
Try adding
z-index:1;
to header
add your class="column right" style="z-index:-1";
//html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<!--only change this line--> <div class="column right" style="background-color:rgba(0, 0, 0, 0.53); z-index:-1">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>
When a user scrolls down, how can I make the down arrow in the first view disappear?
0
I want to make the down arrow icons disappear when a user scrolls down the page. Although I searched it on another question of stackoverflow, I cannot find a solution. I made jQuery code. I am not sure it is correct or not.
this is the code on fiddle https://jsfiddle.net/92mtjzew/
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
$(window).scroll(function(){
if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
$('.box').show();
} else {
$('.box').hide();
}
});
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
function scrollDown(){
var businessPage = document.getElementById("businessPage");
businessPage.scrollIntoView();
}
</script>
</body>
</html>
I think this is use full for you... after 100px scroll down the arrow icon will disappear.
In the above mention code, you use the scroll on the body. you can also add this on full document by changing the class on the scroll function.
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
// $(window).scroll(function(){
// if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
// $('.box').show();
// } else {
// $('.box').hide();
// }
// });
// scroll selector
$('body').scroll(function() {
// scroll disatance
if($(this).scrollTop() >= 100){
$('.box').hide();
}
else
{
$('.box').show();
}
});
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="header">
<div class="logo">
<!-- <h1><img src="img/logo.png" widht="473px" height="50px"></h1> -->
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- <!-- <script src="js/main.js"></script> --> -->
<script>
// function scrollDown(){
// var businessPage = document.getElementById("businessPage");
// businessPage.scrollIntoView();
// }
</script>
<script src="main.js"></script>
</body>
</html>
I want to make the down arrow icons disappear when a user scroll down the page. Although I searched it on another question of stackoverflow, I cannot find a solution. I made jQuery code. I am not sure it is correct or not.
this is the code on fiddle
https://jsfiddle.net/92mtjzew/
main.js
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplayhttps://jsfiddle.net/92mtjzew/#: true,
autoplaySpeed: 8000,
dots: true,
});
});
$(window).scroll(function(){
if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
$('.box').show();
} else {
$('.box').hide();
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
function scrollDown(){
var businessPage = document.getElementById("businessPage");
businessPage.scrollIntoView();
}
</script>
</body>
</html>
style.css
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
Try the following example
.hidden{display:none !important;}
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$('.box').removeClass("hidden");
} else {
$('.box').addClass("hidden");
}
});
});
I want to make something like - When I press on About, so there will show overlay over the main div with text about. Now when I click, so that div will show, but it will move down that particles-js div. And I don't want to move that div, but I want to make about to show over that particle (fullscreen overlay with 50% opacity)
$(".about").click(function() {
$(".main").fadeToggle('500');
$(".aboutText").fadeToggle('500');
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
display: none;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
Is this what you are trying to do? Show the about text when clicked?
$(".about").click(function() {
$("#particles-js").toggleClass("hide")
$(".aboutText").toggleClass("hide")
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
.hide {
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText hide">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>