I am currently working on a website for myself and I have some randomly generated colors which reverse back to the "original".
Now my problem is that I want to access the values which were assigned in an if-else statement. I know these are private now but is there any way I can still get their value?
The variable gets created outside of the if-else statement.
var randomLinks;
But the values are put in inside of the if-else statement.
if ($("header").hasClass("sticky")){
$(".navlink").addClass("temp");
$(".temp").removeClass("navlink");
$(".temp").addClass("navlinksticky");
$(".navlinksticky").removeClass("temp");
randomLinks = $('.navlinksticky');
} else {
$(".navlinksticky").addClass("temp");
$(".temp").removeClass("navlinksticky");
$(".temp").addClass("navlink");
$(".navlink").removeClass("temp");
randomLinks = $('.navlink');
}
I am not very good in jQuery and js, so my code is probably trash. Any corrections are greatly appreciated.
Here is the Project itself:
// JavaScript Document
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
var checkInterval = 300;
var randomLinks;
window.setInterval(function() {
if ($("header").hasClass("sticky")) {
$(".navlink").addClass("temp");
$(".temp").removeClass("navlink");
$(".temp").addClass("navlinksticky");
$(".navlinksticky").removeClass("temp");
randomLinks = $('.navlinksticky');
} else {
$(".navlinksticky").addClass("temp");
$(".temp").removeClass("navlinksticky");
$(".temp").addClass("navlink");
$(".navlink").removeClass("temp");
randomLinks = $('.navlink');
}
}, checkInterval);
var original = randomLinks.css('color');
var colors = ['#ee6161', '#00f2a6', '#01c0fa'];
randomLinks.hover(
function() { //mouseover
var col2 = Math.floor(Math.random() * colors.length);
var newcolor = colors[col2];
$(this).css('color', newcolor);
},
function() { //mouseout
//$(this).css('color', original);
}
);.navh1 {
font-family: utopian, sans-serif;
font-weight: 100;
font-style: normal;
}
.fo1 {
font-family: 'Jura', sans-serif;
}
.hs {
font-family: dystopian, sans-serif;
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
/*transition: translateX(-100%) 1000ms cubic-bezier(0.525, 0.195, 0.000, 0.975);*/
}
100% {
transform: translateX(0);
/*transition: translateX(0) 1000ms cubic-bezier(0.525, 0.195, 0.000, 0.975);*/
}
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
padding: 40px 30px;
z-index: 10000;
text-decoration: none;
color: #000;
}
header>h1>a {
text-decoration: none;
color: #000;
position: relative;
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
header>h1>a:hover {
letter-spacing: 5px;
color: rgb(255, 126, 0);
text-decoration: none;
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
header ul li a:hover {
text-decoration: none;
letter-spacing: 4px;
color: rgb(255, 126, 0);
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
.navlink {
color: #000;
}
.navlinksticky {
color: #fff;
}
.rdmcolorlink {
text-decoration: none;
color: #000;
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
.rdmcolorlink:hover {
text-decoration: none;
letter-spacing: 2px;
color: rgb(255, 126, 0);
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
.banner {
position: relative;
width: 100%;
min-height: 100vh;
padding-top: 100px;
}
header.sticky {
padding: 5px 30px;
background: rgba(0, 0, 0, 0.85);
}
header.sticky>h1>a {
font-size: 1em;
color: white;
}
header.sticky ul li a {
color: white;
}
header>h1>a:hover {
letter-spacing: 5px;
color: rgb(255, 126, 0);
text-decoration: none;
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
header.sticky ul li a:hover {
text-decoration: none;
letter-spacing: 4px;
color: rgb(255, 126, 0);
transition: 0.6s cubic-bezier(0.525, 0.195, 0.000, 0.975);
}
button {
display: none;
color: #696969;
}<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
<title>Martin Schmidt</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/exo8ivx.css">
<link rel="stylesheet" href="https://use.typekit.net/yil2knz.css">
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Preloader -->
<div class="loader">
<div class="loader_inner"></div>
</div>
<header>
<h1 class="logo navh1"><a href="index.html" class="navlink">Martin Schmidt</a></h1>
<ul>
<button id="navbtn"> ☰ </button>
<li><a href="index.html" class="navlink">Home</a></li>
<li><a href="ich.html" class="navlink">Über mich</a></li>
<li><a href="skills.html" class="navlink">Fähigkeiten</a></li>
<li><a href="lehre.html" class="navlink">Lehre</a></li>
<li><a href="kontakt.html" class="navlink">Kontakt</a></li>
</ul>
</header>
<section class="banner">
<div class="container fo1">
<hr>
<div class="row">
<div class="col-6 col-md-7 col-lg-9">
<h1 class="hs">Hallo! Ich bin Martin.</h1>
</div>
<div class="col-6 offset-md-0 col-md-5 col-lg-3 offset-lg-0 offset-xl-0 col-xl-3">
<p class="text-right"><a href="seiten.html" class="rdmcolorlink right">Meine anderen Webseiten</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="media">
<img class="mr-3" src="images/pcet.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Über mich </h5>
Hey! Ich bin Martin Schmidt. Ich bin ein lernender Informatik Fachrichtung Systemtechnik bei der PCETERA Informatik. Ich spiele gerne Spiele, mache gerne Websites und am wichtigsten: Ich experimentiere viel mit Computer. </div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row justify-content-md-around m-1">
<address>
<strong>Martin Schmidt </strong><br>
PCETERA Informatik<br>
<abbr>Winterhaldenstrasse 12 </abbr><br>
<abbr>3627 Heimberg</abbr><br>
<a href="mailto:info@pcetera.ch" class="left">info@pcetera.ch</a>
</address>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 col-sm-12">
<h2>Meine Fähigkeiten</h2>
<hr>
<div class="progress mt-4">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%; animation: 1s ease-in-out 0s 1 slideInFromLeft;"> HTML</div>
</div>
<div class="progress mt-4">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%; animation: 1s ease-in-out 0s 1 slideInFromLeft;"> CSS</div>
</div>
<div class="progress mt-4">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%; animation: 1s ease-in-out 0s 1 slideInFromLeft;"> JAVASCRIPT</div>
</div>
<div class="progress mt-4">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; animation: 1s ease-in-out 0s 1 slideInFromLeft; color: #000;"> AFTER EFFECTS</div>
</div>
<div class="progress mt-4">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%; animation: 1s ease-in-out 0s 1 slideInFromLeft; color: #000;"> PHOTOSHOP</div>
</div>
<div class="progress mt-4">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%; animation: 1s ease-in-out 0s 1 slideInFromLeft;"> PHP</div>
</div>
<div class="progress mt-4">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%; animation: 1s ease-in-out 0s 1 slideInFromLeft;"> DREAMWEAVER</div>
</div>
</div>
</div>
<hr>
<hr>
<div class="container">
<div class="row text-center">
<div class="col-sm-4 col-12 p-0"><img class="img-thumbnail" src="images/300X200.gif" alt=""></div>
<div class="col-sm-4 col-12 p-0"><img class="img-thumbnail" src="images/300X200.gif" alt=""></div>
<div class="col-sm-4 col-12 p-0"><img class="img-thumbnail" src="images/300X200.gif" alt=""></div>
</div>
<div class="row text-center">
<div class="col-sm-4 col-12 p-0"><img class="img-thumbnail" src="images/300X200.gif" alt=""></div>
<div class="col-sm-4 col-12 p-0"><img class="img-thumbnail" src="images/300X200.gif" alt=""></div>
<div class="col-sm-4 col-12 p-0"><img class="img-thumbnail" src="images/300X200.gif" alt=""></div>
</div>
</div>
<hr>
<h2>Kontakt</h2>
<hr>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-12 jumbotron">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail Adresse" aria-describedby="emailHelp">
<span id="emailHelp" class="form-text text-muted" style="display: none;">Bitte gib eine gültige E-Mail Adresse ein</span>
</div>
<div class="form-group">
<label for="message">Nachricht</label>
<textarea rows="10" cols="100" class="form-control" id="message" name="message" placeholder="Nachricht" aria-describedby="messageHelp"></textarea>
<span id="messageHelp" class="form-text text-muted" style="display: none;">Bitte gebe eine Nachricht ein.</span>
</div>
<div class="text-center">
<input type="submit" class="btn btn-primary"></input>
</div>
</form>
</div>
</div>
</div>
<hr>
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<p>Copyright © Martin Schmidt. All rights reserved.</p>
Favicon erstellt von <a href="http://www.freepik.com/" title="Freepik">Freepik</a> auf
<a href="https://www.flaticon.com/de/" title="Flaticon"> www.flaticon.com</a>
</div>
</div>
</div>
</footer>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/script.js"></script>
</body>
</html>Greetings
Martin
Aucun commentaire:
Enregistrer un commentaire