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>
Related
My webpage has an element that gets removed when the URL parameters change. One element is supposed to display and the other is supposed to disappear. My attempt was to change the class using classList.add() and classList.remove(). The code that should-have worked:
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");//doesn't seem to work
questionConfirm.classList.add ("hidden");
//triger function
signupConfirmCode()
}
else {
console.log ("hello")
}
View the problem here:
https://cheerful-sable-4fff28.netlify.app/sucuss.html?page-type=signup
All Code:
HTML/JS
<!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">
<title>Succes | The Coders Club</title>
<link rel="icon" href="img_2.jpg">
<link rel="stylesheet" href="Styles.css">
<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=Montserrat:wght#300&family=Poppins:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="info_styles.css">
</head>
<body>
<div class="nav-bar">
<nav>
<img src="img_2.jpg" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
</div>
<div class="welcome" id="question-confirm">
<div class="success" style="height: 50%; position:absolute; bottom: 200px;">
<h1>Your Question is in!</h1>
<p>For your reference, this is what you wrote:</p>
<div id="wrote"></div>
<h2>While you wait why not?</h2>
<button class="standard-button" style="width: 250px; height: 50px;">Check out our classes</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Read the about us page</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Head to our homepage</button><br><br>
</div>
<div class="signup hidden welcome" id="signup-confirm">
<div class="success">
<h1>Success! Your child(ren) enrolled!</h1>
<p>A conformation will be sent to your email address. For your refernce below are the detials you entered into the signup form. If you need to change <strong>any</strong> of these details please contact me.</p>
<div class="signup-infomation">
<h2>Parent Name</h2>
<li id="parent-name-confirm">Error no parent name</li>
<h2>Student Name(s)</h2>
<li id="student-names">Error no student(s) name</li>
<h2>Parent Email Address</h2>
<li id="email-confirm">Error no parent email address found</li>
<h2>Parent Phone Number</h2>
<li id="parent-phone">Error no parent name</li><br><br>
<p>This info is very important. It may be a good idea to bookmark or</p>
<button class="standard-button" onclick="window.print();">Print this info</button><br><br>
</div>
<h3>Please remeber to bring <span id="confirm-price">$39</span> cash to pay Ethan.</h3>
</div>
</div>
<script>
var signupConfirm = document.getElementById ("signup-confirm");
var questionConfirm = document.getElementById ("question-confirm");
console.log (signupConfirm)
const urlParams = new URLSearchParams(window.location.search);
var pageType = urlParams.get("page-type");
var signupConfirmCode = function () {
var parentNameConfirm = document.getElementById ("parent-name-confirm");
parentNameConfirm.textContent = localStorage.getItem("parent_name");
var studentNamesConfirm = document.getElementById ("student-names");
studentNamesConfirm.textContent = localStorage.getItem("child_names");
var parentEmailConfirm = document.getElementById ("email-confirm");
parentEmailConfirm.textContent = localStorage.getItem("email_confirm");
var parentPhoneConfirm = document.getElementById ("parent-phone");
parentPhoneConfirm.textContent = localStorage.getItem("parent_phone");
};
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");
questionConfirm.classList.add ("hidden")
signupConfirmCode()
}
else {
console.log ("hello")
}
</script>
<script>
var wrote = document.getElementById ("wrote");
wrote.innerHTML = sessionStorage.getItem ("Tiny-Data")
</script>
</body>
</html>
CSS
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.welcome {
text-align: center;
background-image: url("img_1.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 95vh;
color: white;
position: absolute;
top: 100px;
min-width: 100%;
padding: 0 auto;
}
.welcome-txt {
position: absolute;
top: 40%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p, ul, ol, li, select {
font-family: 'Poppins', sans-serif;
}
footer {
position: absolute;
top: 3000px;
width: 100%;
}
.footer-list {
list-style: none;
}
.footer-secetion {
position: absolute;
bottom: 200px;
text-align: center;
}
.content {
position: absolute;
top: 1200px;
text-align: center;
margin-left: 30%;
}
input {
height: 30px;
width: 300px;
}
::placeholder {
text-align: center;
font-family: 'Poppins', sans-serif;
}
textarea {
resize: none;
width: 700px;
height: 400px;
}
.standard-button {
background-color: rgb(16, 92, 116);
color: white;
border: none;
border-radius: 5px;
height: 30px;
width: 150px;
font-size: medium;
cursor: pointer;
transition: all 0.5s ease-out;
}
.standard-button:hover {
width: 175px;
height: 40px;
}
.hidden {
display: none;
}
.info-content {
position: absolute;
top: 1075px;
text-align: center;
background-image: url("img_5.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.info-content-blocks {
background-color: rgba(204, 204, 204, 0.8);
margin: 30px;
padding: 30px;
}
.diveder {
width: 100%;
height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
.success {
background-color: rgba(255, 255, 255, 0.808);
margin-left: 1.75%;
padding: 30px;
height: 80%;
position: absolute;
bottom: 100px;
color: black;
width: 93%;
}
.signup-infomation {
border: 1px solid;
width: 45%;
position: relative;
left: 25%;
overflow-y: hidden;
overflow-x: scroll;
}
select {
width: 150px;
height: 35px;
font-size: medium;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 85%;
top: 30px;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color:rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left:auto;
margin-right:auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
.fade-out {
opacity: 0;
transition: all 3000ms ease-in-out;
}
.fade-in {
opacity: 1;
transition: all 3000ms ease-in-out;
}
.arrow
{
position: relative;
bottom: -2rem;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
/**
* Dark Arrow Down
*/
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;
}
.bounce {
animation: bounce 2s infinite;
}
.arrow-background {
background-color: rgba(204, 204, 204, 0.8);
min-width: 100px;
padding: 25px;
border-radius: 100px;
margin: 0;
position: absolute;
top: 80%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
#media print {
.nav-bar {
display: none;
}
.standard-button {
display: none;
}
p {
display: none;
}
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
Your problem seems to be the HTML, your #question-confirm seems to have a missing closing tag.
You need to add the missing </div>.
This is what makes #signup-confirm to be inside #question-confirm.
I have made my mouse pointer display a circle which inverts colors when hovering over an object by setting cursor: none and tracking a div with jQuery to the mouse position.
The issue is that now when the mouse is stationary it doesn't register and the :hover pseudo-class is essentially useless. Are there any workarounds?
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('#circularcursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#circularcursor {
position: absolute;
width: 40px;
height: 40px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
z-index: 2;
mix-blend-mode: difference;
transition: transform .2s;
}
body {
min-height: 900px;
background-color: #222;
}
body #cta {
display: flex;
justify-content: center;
}
body #cta #cta_btn {
text-decoration: none;
font-size: 28px;
font-family: 'Roboto Slab', serif;
border: 1px solid #333;
padding: 15px 50px;
text-align: center;
display: inline-block;
margin-top: 55px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
transition-duration: 0.2s;
color: rgb(107, 73, 4);
}
#cta_btn:hover {
transform: scale(120%);
}
<!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">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<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=Elsie:wght#900&family=Oswald&family=Roboto+Slab&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- This is a div for the mouse pointer -->
<div id="circularcursor"></div>
<!-- This is a div for the mouse pointer -->
<div id="cta">
<a href="http://www.google.com">
<p id="cta_btn">let's talk</p>
</a>
</div>
</body>
</html>
To do what you require you need to amend the #circularcursor element so that it doesn't intercept the mouseover event from firing on the a element underneath it. To do that, set pointer-events: none on it.
jQuery($ => {
$(document).on('mousemove', function(e) {
$('#circularcursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#circularcursor {
position: absolute;
width: 40px;
height: 40px;
background: rgb(255, 255, 255);
border-radius: 50%;
top: var(--y, 0);
left: var(--x, 0);
transform: translate(-50%, -50%);
z-index: 2;
mix-blend-mode: difference;
transition: transform .2s;
pointer-events: none; /* add this rule */
}
body {
min-height: 900px;
background-color: #222;
}
body #cta {
display: flex;
justify-content: center;
}
body #cta #cta_btn {
text-decoration: none;
font-size: 28px;
font-family: 'Roboto Slab', serif;
border: 1px solid #333;
padding: 15px 50px;
text-align: center;
display: inline-block;
margin-top: 55px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
transition-duration: 0.2s;
color: rgb(107, 73, 4);
}
#cta_btn:hover {
transform: scale(120%);
}
<link href="https://fonts.googleapis.com/css2?family=Elsie:wght#900&family=Oswald&family=Roboto+Slab&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="circularcursor"></div>
<div id="cta">
<a href="http://www.google.com">
<p id="cta_btn">let's talk</p>
</a>
</div>
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 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;
}