We Keep Coding

Transparent Navbar not becoming transparent after onscroll function

So, I am preparing for a Web Designing Competition and I was testing out a transparent navbar that will become White if pageYOffset is greater than 100, but now, when i scroll back in the 100px range, the navbar remains white.
Here's my code
window.onscroll = function() {
var navbar = document.getElementsByClassName('navbar')[0];
if (window.pageYOffset > 100) {
navbar.style.background = "#fff";
} else {
navbar.style.background = "transparent";
}
}
.navbar {
height: 50px;
width: 100%;
font-family: Arial;
position: fixed;
background: transparent;
color: #fff;
top: 0;
left: 0;
}
.navbar h3 {
float: left;
margin-left: 30px;
margin-top: 20px;
}
.navbar a {
float: right;
padding: 18px;
margin-right: 30px;
text-decoration: none;
color: #333;
}
/** FOR TESTING IN SNIPPET */
body {
height: 1000px;
background: red;
}
<div class="navbar">
<h3>OmniFoods</h3>
Home
About
Contact
</div>

Keep dropdown in a sidenav open based on url

I'm making a menu using this tutorial: https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp
I added this code to highlight currently selected link:
$("#sidenav a").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
How do I keep the dropdown open if a link in the dropdown is highlighted?
Just to add - my sidenav includes more than one dropdown.
Edit
My HTML:
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
// this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
$("#sidenav a").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
.sidenav {
height: 100%;
width: 16%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #212529;
overflow-x: hidden;
}
.sidenav a,
.dropdown-btn {
padding: 11px 8px 11px 16px;
text-decoration: none;
color: #ffffff;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover,
.dropdown-btn:hover {
background-color: #808080;
color: #f1f1f1;
}
a.active {
background-color: #002f7c;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.current-menu-item {
background: #33b5e5;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav" id="sidenav">
Users
<button class="dropdown-btn">Computers</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
<button class="dropdown-btn">Monitors</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
Licenses
Reports
Logs
</div>

with jquery function closest you can select the closest parent element with the specific selector $(this).closest(".dropdown-btn") selects the closest parent with class "dropdown-btn".
so after selecting that, you can simulate click action on it or make it visible directly .
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
// this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
$("#sidenav a").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
$("dropdown-btn").css({display : "none"});
$(this).closest(".dropdown-btn").css({display : "block"});
}
});
.sidenav {
height: 100%;
width: 16%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #212529;
overflow-x: hidden;
}
.sidenav a,
.dropdown-btn {
padding: 11px 8px 11px 16px;
text-decoration: none;
color: #ffffff;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover,
.dropdown-btn:hover {
background-color: #808080;
color: #f1f1f1;
}
a.active {
background-color: #002f7c;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.current-menu-item {
background: #33b5e5;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav" id="sidenav">
Users
<button class="dropdown-btn">Computers</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
<button class="dropdown-btn">Monitors</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
Licenses
Reports
Logs
</div>

If you use jQuery, it is possible to select previous element of the link container and then fire click event on it to call the function that toggles the dropdown menu. So, you could use the following snippet, just replace $(this).attr("href") === "#1" with this.href == window.location.href.
$(".dropdown-btn").click(function() {
$(this).toggleClass("active").next().toggle();
});
$(".sidenav a").each(function() {
if ($(this).attr("href") === "#1") {
$(this)
.addClass("active")
.closest(".dropdown-container")
.prev(".dropdown-btn")
.trigger("click");
}
});
/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="sidenav">
About
Services
Clients
Contact
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
Search
</div>

why cannot read property 'top' of undefined?

I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error

You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.

Click function not working in slideshow

I'm making jQuery to click the Next and Previous span tab to control the image slideshow but it's not working.
function slideshow() {
var $active = $('div#slider-wrap img.active-img');
var $next = $active.next();
$next.addClass('active-img');
$active.removeClass('active-img');
}
$(function() {
setInterval(slideshow, 5000);
});
$('#tab-container a').on('click', function() {
var element = this.id;
console.log(element);
$('.images').trigger("slideshow", element);
});
/* next and previous jquery code */
$(document).ready(function() {
var divs = $('.images>img');
var now = 0; // currently shown div
divs.hide().first().show(); // hide all divs except first
$("#previous").click(function() {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("#next").click(function() {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // show previous
});
});
* {
margin: 0;
padding: 0;
}
#slider-wrap {
position: relative;
}
.slideshow .images {
width: 100%;
height: 350px;
overflow: hidden;
margin: 0 auto;
}
.slideshow .images img {
position: absolute;
width: 100%;
max-width: 960px;
height: auto;
}
.active-img {
z-index: 99;
}
#tab-container {
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
overflow: hidden;
width: 50%;
margin-top: 265px;
}
#tab-container span {
display: block;
float: left;
width: 42.995%;
padding: 10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
border-right: #ccc 1px solid;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
}
#tab-container a:nth-of-type(2) span {
border-right: 0;
}
#tab-container a,
#tab-container a:hover,
#tab-container a:active,
#tab-container a:visited {
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
#tab-container span:hover {
color: #fff;
background: #444;
}
#tab-container span.active {
color: #fff;
background: #444;
}
#tab-container a span.active,
.c-slider #tab-container a:hover span.active,
.c-slider #tab-container a:active span.active,
.c-slider #tab-container a:visited span.active {
color: #fff;
}
#slider_time {
display: none;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="slider-wrap">
<div class="slideshow">
<div class="images">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active-img">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
</div>
</div>
</div>
<div id="tab-container">
<a><span id="previous" class="">Previous</span></a>
<a><span id="next"class="">Next</span></a>
</div>
<div style="clear:both"></div>
Previous and next tabs are not aligning properly with equal width. I'm having this problem all the time.

I'm trying to add previous and next arrows to this content slider

Currently there are circles at the bottom that can be used to navigate between slides. I would like to add next and previous arrows to the sides that the user can click on to proceed forwards or back through the slides.
CSS:
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 500px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
}
#navLinks ul li:hover {
background-color: #FFF;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
}
#navLinks ul li.active:hover {
background-color: red;
color:#FFF;
}
#itemOne {
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-image: url("http://cuteimages.net/data/2015/5/the-first-puppy-to-leave-me-speechless-name-cuteimages.net.png");
}
HTML:
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>
JavaScript:
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
Here is the JSFiddle http://jsfiddle.net/stormbloom/2d0a1215/
I would like to learn this for personal experience, otherwise I would just use a plugin like WowSlider. If it's easier to do this by building a new slider from scratch then any links to resources explaining how to accomplish this would also be appreciated.

This is an approach with arrows, just tweak with the design.
In the HTML I added the correspoding arrows, and in the JS I added the EventListeners and the function goToPreviousItem() at the end.
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
document.querySelector('#previous').addEventListener('click', goToPreviousItem, false);
document.querySelector('#next').addEventListener('click', goToNextItem, false);
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
//startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
function goToPreviousItem() {
removeActiveLinks();
if(activeLink == 0) {
activeLink = links.length - 1;
} else {
activeLink--;
}
var newLink = links[activeLink];
changePosition(newLink);
}
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#outsideContainer {
width: 600px;
}
#previous {
width: 50px;
display: inline-block;
text-align: center;
float: left;
margin-top: 150px;
}
#next {
width: 50px;
display: inline-block;
text-align: center;
float: right;
margin-top: 150px;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
display: inline-block;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 600px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
border:rgba(255,255,255,0.9) 1px solid;
box-shadow: 0 0 4px #fff;
}
#navLinks ul li:hover {
background-color: #FFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.6) 1px solid;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
outline-width: 1px;
}
#navLinks ul li.active:hover {
background-color: rgba(255,255,255,0.7);
color: #FFFFFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.9) 1px solid;
}
#itemOne {
background-color: #000;
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-color: #fff;
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-color: #fff;
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-color: #fff;
background-image: url("http://images5.fanpop.com/image/photos/28100000/Katy-Perry-gifs-katy-perry-28147211-500-300.gif");
}
<div id="outsideContainer">
<div id="previous"><<</div>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content"></div>
<div id="itemTwo" class="content"></div>
<div id="itemThree" class="content"></div>
<div id="itemFour" class="content"></div>
</div>
</div>
<div id="next">>></div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>