I was creating a responsive website so I decided to create the tablet and mobile version and wanted to be as usual many developers do when creating a small device nav bar(burger bar). So I can add class to html file using javascript but after that there is a problem that i'm stock an hour. Thanks
here you can see the code:
codepen
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
if (list.className != "hidden") {
list.className = "bar";
} else if (list.className == "hidden") {
list.className -= "bar";
list.className = "hidden";
}
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
.hidden {
visibility: hidden;
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">hello</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>
CSS
In mobile, ul should be hidden by default and when you click you need to show.
In large device, button should not be there.
JS
There is a out-of-box method toggle on classList to toggle the class. No need to check conditionally.
Hope it helps ☺☺
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
list.classList.toggle("show");
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
ul {
display: none;
}
.show {
display: block;
}
#media only screen and (min-width: 992px) {
ul {
display: block;
}
button {
display: none;
}
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">
show/hide
</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>
Related
So I have a dropdown menu and when I click it it works but when I click out it stays open. I've tried using mouseout mousedown onclick ondblclick etc but none of them work. Please help :(
[What I've tried][1]
Attach click listener to your document, if clicked element is img then display dropwdown else hide.
const menu = document.querySelector('#dropdown');
document.addEventListener('click', function(e) {
menu.classList.toggle('show', e.target.tagName == "IMG");
});
.menu {
float: right;
margin: 24px;
position: relative;
display: inline-block;
}
.menu img {
cursor: pointer;
}
.dropdown {
position: absolute;
z-index: 1;
float: right;
width: 150px;
background-color: lightgray;
top: 73px;
right: -24px;
display: none;
}
.dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
color: #B00D93;
font-weight: bold;
}
.show {
display: block;
}
<div class="menu" id="menu">
<img src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2018/06/Screen-Shot-2018-06-13-at-8.07.34-PM.png" id="dropdownImg" alt="" width="45px" height="45px">
<div class="dropdown" id="dropdown">
Home
About Us
Services
Feedback
</div>
</div>
check this : https://jsfiddle.net/85yz7asd/
showHide = () => {
var dropdown = document.getElementById("dropdown")
dropdown.style.display == "block" ? dropdown.style.display = "none" : dropdown.style.display = "block"
}
This is a Pure HTML and CSS example:
HTML
<div class="dropdown">
<div class="dropdown-btn">Hover Me</div>
<ul class="dropdown-list">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
CSS
.dropdown {
display: block;
position: absolute;
}
.dropdown-btn {
text-align: center;
background-color: black;
color: white;
display: block;
position: absolute;
width: 200px;
height: auto;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.dropdown-list {
position: relative;
display: none;
width: 200px;
height: auto;
list-style: none;
margin-top: 40px;
padding: 0;
}
.dropdown-list li a {
text-align: center;
text-decoration: none;
display: block;
padding: 10px;
width: 200px;
background-color: black;
color: white;
margin-top: 5px;
}
.dropdown-list li a:hover {
background-color: grey;
color: white;
}
.dropdown:hover .dropdown-list {
display: block;
}
working js fiddle
If you want to use your current code, try this.
Clicking on the dropdownImg element will open the menu.
Clicking anywhere else will close the menu.
https://jsfiddle.net/t6wpgjrd/
document.onclick = function(e) {
if(e.target.id === "dropdownImg") {
show();
}
else{
hide();
}
}
And don't forget to remove the onclick and onblur attributes from your dropdownImg element.
I have a fixed header menu bar at the top of the webpage. Each of the titles is a link but I want a dropdown for the first link. The link components for the dropdown menu is behaving strangely, see image:
I would like the link components to be stacked on top of each other, like a proper dropdown. Below is my code:
It looks correct when I run the code snippet but when I did these codings in Visual Studio, the codings below looks just like the image.
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
<div className="linkWrapper">
Quicklinks<i class="fa fa-angle-double-down"></i>
</div>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.linkWrapper a:first-child {
display:block;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
remove the float for the submenu items adding
.navlist li div a {
float: none;
}
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist li div a {
float: none;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
UPDATE
Your code snippet already set links to display: block and it works as expected, your issue seems to come from somewhere else, maybe css overrides elsewhere in your project ?
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
ORIGINAL ANSWER
You're using a tags which by default are displayed inline, you could add some styling to your a to display: block or use a list :
Quicklinks<i class="fa fa-angle-double-down"></i>
<ul>
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
You may want to make this list unstyled to avoid dots.
Also to behave like a proper dropdown, this list should be hidden on first render and you will trigger the visibility with another js function listening on click event on your "Quicklinks" link. Something like :
var button = document.getElementById("dropdownButton");
var menu = document.getElementById("dropdownMenu");
button.addEventListener("click", function(e) {
menu.classList.toggle("hidden");
});
.hidden {
display: none;
}
Quicklinks
<ul id="dropdownMenu" class="hidden">
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
this is because your css have :
.navlist li {
float: left;
}
just remove it and add to .navlist a
clear: both;
}
complete code :
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/* just example */
.navlist div {
margin-left: 1em;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
/* adding : ( work with -- float: left -- allready present in -- .navbar a -- */
clear: both;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks <i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
I am pretty new to writing code and I am trying to make a navigation bar that has a drop menu when the screen is less than 1500px but I am trying to get it to close whenever I click outside its container. I have tried to use javascript that I have seen in youtube videos but it does not work so perhaps I am doing it wrong and I am getting really frustrated with this. Here is my code and I really hope you can help me. I didn't add any of the code that I have tried because I want to get new ideas without being affected or influenced by the ones that I have tried and if you could explain how I can add the code the right way so it properly works I will be really grateful. Thank you!
/*display bars menu and hide the menu*/
#media screen and (max-width: 1464px)
{
.navbar a:not(.resImg)
{
display: none;
}
.navbar a.icon
{
float: right;
display: block;
margin-right: 8px;
}
.logoImg
{
width: 100%;
float: none;
}
.logoImg img
{
padding: 6px !important;
}
div.mainMenu
{
padding: 0 !important; /*removes the extra padding when the menu is closed*/
width: 100%;
text-align: center;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.*/
#media screen and (max-width:1464px)
{
.navbar.responsive {position: relative;}
.navbar.responsive a.icon
{
position: inherit;
right: 0;
top: 0;
}
.navbar.responsive .mainMenu a
{
float:none;
display: block;
text-align: center;
}
}
/*CSS for the navbar*/
nav.navbar
{
width: 95%;
margin: auto;
background-color: #595959;
font-size: 1.2em;
overflow: auto;
}
/*div for the img logo and bars menu*/
.logoImg
{
float: left;
display: inline;
background-color: #4e4e4e;
}
/*logo img*/
.resImg img
{
padding: 9px 7px 7px 7px;
position: fixed;
}
.resImg img:hover
{
background-color: indianred;
cursor: pointer;
}
/*css for bars icon*/
.icon
{
display: none;
color: white;
text-decoration: none;
font-size: 23px;
padding: 19px 15px;
margin: 4px 0;
}
.icon:hover
{
background-color: indianred;
}
/*list of main menu*/
div.mainMenu
{
float: left;
padding: 30px 2px;
text-align: center;
display: inline;
padding-left: 13%;
}
div.mainMenu a
{
color: white;
text-decoration: none;
padding: 25px 5px;
}
div.mainMenu a:hover
{
background-color: indianred;
}
<nav class="navbar" id="myNavbar">
<div class=logoImg>
<a class="resImg"><img class="active" src="images/logo.jpeg" height="64" width="173" /></a>
☰
</div>
<div class="mainMenu">
<a>option 1</a>
<a>option 2</a>
<a>option 3</a>
<a>option 4</a>
<a>option 5</a>
<a>option 6</a>
<a>option 7</a>
<a>option 8</a>
</div>
</nav>
<script>
/*add the responsive class to the navbar when the user clicks on the bar button*/
function myFunction()
{
var x = document.getElementById("myNavbar");
if (x.className === "navbar")
{
x.className += " responsive";
}
else
{
x.className = "navbar";
}
}
</script>
/*display bars menu and hide the menu*/
#media screen and (max-width: 1464px)
{
.navbar a:not(.resImg)
{
display: none;
}
.navbar a.icon
{
float: right;
display: block;
margin-right: 8px;
}
.logoImg
{
width: 100%;
float: none;
}
.logoImg img
{
padding: 6px !important;
}
div.mainMenu
{
padding: 0 !important; /*removes the extra padding when the menu is
closed*/
width: 100%;
text-align: center;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the
user clicks on the icon.*/
#media screen and (max-width:1464px)
{
.navbar.responsive {position: relative;}
.navbar.responsive a.icon
{
position: inherit;
right: 0;
top: 0;
}
.navbar.responsive .mainMenu a
{
float:none;
display: block;
text-align: center;
}
}
/*CSS for the navbar*/
nav.navbar
{
width: 95%;
margin: auto;
background-color: #595959;
font-size: 1.2em;
overflow: auto;
}
/*div for the img logo and bars menu*/
.logoImg
{
float: left;
display: inline;
background-color: #4e4e4e;
}
/*logo img*/
.resImg img
{
padding: 9px 7px 7px 7px;
position: fixed;
}
.resImg img:hover
{
background-color: indianred;
cursor: pointer;
}
/*css for bars icon*/
.icon
{
display: none;
color: white;
text-decoration: none;
font-size: 23px;
padding: 19px 15px;
margin: 4px 0;
}
.icon:hover
{
background-color: indianred;
}
/*list of main menu*/
div.mainMenu
{
float: left;
padding: 30px 2px;
text-align: center;
display: inline;
padding-left: 13%;
}
div.mainMenu a
{
color: white;
text-decoration: none;
padding: 25px 5px;
}
div.mainMenu a:hover
{
background-color: indianred;
}
<nav class="navbar" id="myNavbar">
<div class=logoImg>
<a class="resImg"><img class="active" src="images/logo.jpeg"
height="64" width="173" /></a>
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">☰</a>
</div>
<div class="mainMenu">
<a>option 1</a>
<a>option 2</a>
<a>option 3</a>
<a>option 4</a>
<a>option 5</a>
<a>option 6</a>
<a>option 7</a>
<a>option 8</a>
</div>
</nav>
<script>
/*add the responsive class to the navbar when the user clicks on the
bar button*/
function myFunction()
{
var x = document.getElementById("myNavbar");
if (x.className === "navbar")
{
x.className += " responsive";
}
else
{
x.className = "navbar";
}
}
document.body.addEventListener('click',function(e){
var x = document.getElementById('myNavbar');
var x1 = document.getElementsByClassName('mainMenu');
var x2 = document.getElementsByClassName('icon');
if(e.target.parentNode != x1[0] && x.className === 'navbar' + ' '
+ 'responsive' && e.target != x2[0]) {
x.className = 'navbar'; //guessing this is what closes it.
//console.log(e.target);
}
});
</script>
You can try using
document.body.addEventListener('click',function(e){
var x = document.getElementById('myNavbar');
var x1 = document.getElementsByClassName('mainMenu');
var x2 = document.getElementsByClassName('icon');
if(e.target.parentNode != x1[0] && x.className === 'navbar responsive' && e.target != x2[0]) {
x.className = 'navbar'; //guessing this is what closes it.
//console.log(e.target);
}
});
The function fires when you click on the page, and checks if you haven't clicked on the navigation bar.
EDIT -> Took me forever to realize what you were doing. Changed the code now. Enjoy :) P.S. Try using ids instead of classes.
When my page is resized for mobile via media queries, I show a menu bar (handle), that allows the user to click and slideToggle the navigation bar, so they can see it.
When I manually resize my page, I notice the following issue:
When I was in mobile view, and the navigation bar was visible, then when I resize it, the nav bar is visible. But, if I close the nav bar in mobile view, and then resize to full screen, my nav bar disappears, and I'm not sure why. I believe there is a problem with my jQuery. Can anyone point me in the right direction?
$(document).ready(function() {
var handle = $(".handle");
var navigation = $(".navigation");
handle.click(function() {
navigation.slideToggle();
});
});
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
padding: 20px;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
padding: 15px;
text-align: left;
box-shadow: 1px 1px #399077;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
You need to reset the navigation from hidden to visible after switch back to desktop view, otherwise it will remain hidden if he navigation is hidden. You can do it via resize() function:
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
Also, <a> is not allowed directly under <ul>, so move them into <li>s.
jsFiddle
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 20px;
color: #fff;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
text-align: left;
box-shadow: 1px 1px #399077;
}
nav ul li a {
padding: 15px;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
If you slideToggle the navigation menu once the .handle was clicked - it is now hidden. If you will resize the window (after the navigation is hidden) - it will still be hidden (because you did nothing to show it again).
You can use the resize event to run any other function once the window was resized (note that you will need to check if the resize was to shrink or enlarge the window, then you will need to check if the navigation is visible or not - and then to show it (if it's hidden).
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.