Multiple functions on two click on same element - javascript

I want to run two different functions on click of an element. If I click a button first time clickfunction1 should run and when I click the button second time clickfunction2 should run. My problem is when I click an element on alternate basis two different functions should run one by one, like on first click first function will run and on clicking second time the same element second function will run.
<!DOCTYPE html>
<html>
<head>
<title>Navigation Focus/Blur</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
.imageclick {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
margin-top: 10px;
text-align: center;
background-color: #f0f0f0;
padding: 20px 0;
}
a {
float: left;
padding: 15px 33px 15px 33px;
font-size: 10px;
margin: 1px 1px 1px 3px;
}
a:hover {
text-decoration: none;
color: #fff;
}
a {
background-color: #23527c;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.clickbox {
margin: 20px 0;
position: absolute;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
background-color: #9ecbf3;
display: none;
}
.icon-bar {
display: block;
width: 25px;
height: 2px;
background-color: #fff;
margin: 6px 0;
}
button {
background-color: black;
border: none;
padding: 5px 12px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
function clickFunction1() {
document.getElementById("navigate").style.display = "block";
}
function clickFunction2() {
document.getElementById("navigate").style.display = "none";
}
</script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Navigation Focus/Blur</h2>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 imageclick">
<button onclick="clickFunction1()" onclick="clickFunction2()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="clickbox" id="navigate">
Home
About
Serve
Webst
Graph
SeoD
CPhp
Wpres
PlC++
Pjava
Angjs
JavaS
PPyth
Photo
ILLust
CoraL
PHtml
Lcss3
Lbstrp
Jquery
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</section>
</body>
</html>

In this solution I create a new function clickFunction() with no number, to manage your two existing functions and I also declare a boolean flag which I toggle...
var Toggle=false;
function clickFunction(Toggle2){
if(Toggle2){clickFunction1();} else {clickFunction2();}
Toggle=!Toggle;
}
The basic HTML...
<button onclick="clickFunction(Toggle);"></button>

For what you want to achieve, there is no need of 2 functions. You can just read the current display and toggle the value.
function clickFunction() {
const element = document.getElementById("navigate");
const display = element.style.display || 'block' /* default style if inline display doesnt exist on load */;
element.style.display = display === 'block' ? 'none' : 'block';
}

You can programmatically register click event on element you want, and then unregister it to control what function will be call when user clicking it.
For your specific case, you should first register the clickFunction1 first, and inside it, you unregister itself and then register the clickFunction2
<script type="text/javascript">
var btn = document.querySelector('button') // Replace `button` with your selector
btn.addEventListener('click', clickFunction1)
function clickFunction1() {
document.getElementById('navigate').style.display = 'block'
// make clicking the button call other function
btn.removeEventListener('click', clickFunction1)
btn.addEventListener('click', clickFunction2)
}
function clickFunction2() {
document.getElementById('navigate').style.display = 'none'
}
</script>

You can have a function with a counter. When the click is odd(first click) the first function will be called else the second will be called
var count=0;
function decide()
{
count++;
if(count%2==1)
clickFunction1();
else
clickFunction2();
}
function clickFunction1() {
document.getElementById("navigate").style.display = "block";
}
function clickFunction2() {
document.getElementById("navigate").style.display = "none";
}
.imageclick {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 10px;
text-align: center;
background-color: #f0f0f0;
padding: 20px 0;
}
a {
float: left;
padding: 15px 33px 15px 33px;
font-size: 10px;
margin: 1px 1px 1px 3px;
}
a:hover {
text-decoration: none;
color: #fff;
}
a {
background-color: #23527c;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.clickbox {
margin: 20px 0;
position: absolute;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #9ecbf3;
display: none;
}
.icon-bar {
display: block;
width: 25px;
height: 2px;
background-color: #fff;
margin: 6px 0;
}
button {
background-color: black;
border: none;
padding: 5px 12px;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Navigation Focus/Blur</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Navigation Focus/Blur</h2>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 imageclick">
<button onclick="decide()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="clickbox" id="navigate">
Home
About
Serve
Webst
Graph
SeoD
CPhp
Wpres
PlC++
Pjava
Angjs
JavaS
PPyth
Photo
ILLust
CoraL
PHtml
Lcss3
Lbstrp
Jquery
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</section>
</body>
</html>

Related

Why image not showing while download html to pdf using JavaScript or jquery?

I am trying to generate HTML to pdf in javascript using the html2pdf plugin. The page is working fine if I open the HTML file in the browser but when I generate it to pdf, the image is not rendered in PDF and the date is also not in a proper format in PDF. I am new to this. Anyone, please do help. Thanks in advance
body {
background-color: #eee;
}
.card-0 {
min-height: 110vh;
background: linear-gradient(-20deg, rgb(204, 204, 204) 50%, #f66700 50%);
color: white;
border: 0px;
}
p {
font-size: 15px;
line-height: 25px !important;
font-weight: 500
}
.container {
border-radius: 20px
}
.btn {
letter-spacing: 1px;
}
select:active {
box-shadow: none !important;
outline-width: 0 !important
}
select:after {
box-shadow: none !important;
outline-width: 0 !important
}
input,
textarea {
padding: 10px 12px 10px 12px;
border: 1px solid lightgrey;
border-radius: 0px !important;
margin-bottom: 5px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 14px;
letter-spacing: 1px;
resize: none
}
select:focus,
input:focus {
box-shadow: none !important;
border: 1px solid #2196F3 !important;
outline-width: 0 !important;
font-weight: 400
}
label {
margin-bottom: 2px;
font-weight: bolder;
font-size: 14px
}
input:focus,
textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #304FFE;
outline-width: 0
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.form-control {
height: calc(2em + .75rem + 3px)
}
.inner-card {}
.card-0 {}
.card-1 {
border-radius: 17px;
color: black;
box-shadow: 2px 4px 15px 0px rgb(0, 0, 0, 0.5) !important
}
#file {
border: 2px dashed #92b0b3 !important
}
.color input {
background-color: #f1f1f1;
}
.files:before {
position: absolute;
bottom: 60px;
left: 0;
width: 100%;
content: attr(data-before);
color: #000;
font-size: 12px;
font-weight: 600;
text-align: center
}
#file {
display: inline-block;
width: 100%;
padding: 95px 0 0 100%;
background: url('https://i.imgur.com/VXWKoBD.png') top center no-repeat #fff;
background-size: 55px 55px
}
#Gstbtndiv {
padding: 20px;
}
table td {
vertical-align: middle !important;
text-align: center;
}
table th,
table td {
padding-top: 08px;
padding-bottom: 08px;
}
table thead {
vertical-align: middle !important;
text-align: center;
background: #f66700;
}
#AddBtn {
width: 100%;
text-align: center;
}
.inptfield {
border-color: #f66700;
}
#cardstyle {
padding-bottom: 40px;
}
table tr input {
text-align: center;
}
#Exportid {
background-color: #f66700;
color: black;
text-align: center;
font-weight: bold;
border-color: #f66700;
}
#ExportDiv {
text-align: right;
margin: 1px;
}
table tbody tr:first-child i {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js">
</script>
<link rel="stylesheet" type="text/css" href="C:\Users\sylaja\Documents\Dttemplate\dttemplate.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="printThis.js"></script>
<script>
function generate() {
var dateelement = document.getElementById('cardstyle');
html2pdf(dateelement);
}
</script>
</head>
<body>
<div id="cardstyle">
<div class="row justify-content-center round">
<div class="col-lg-10 col-md-12 ">
<div class="card shadow-lg card-1">
<div class="card-body inner-card" >
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12 col-sm-12">
<h3 class="font-weight-bold ml-md-0 mx-auto text-center text-sm-left"style="padding: 10px;text-decoration: underline;" id="invoicehead"> INVOICE</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 sm-order-2">
<div class="form-group mb-2" id="invoicenumberdiv">
<input type="text" class="form-control" id="InvoiceNumber" placeholder="Invoice Number">
</div>
<div class="form-group mb-2" id="invoicedatediv">
<input type="Date" class="form-control" id="InvoiceDate">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 sm-order-1" style="text-align:right;">
<img src="digitallogo.png">
</div>
</div>
</div>
<div id="ExportDiv">
<button type="button" class="btn btn-outline-primary" class="exptopdf" id="Exportid" onclick="generate();">Export to PDF</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I need to load my company logo in pdf
For the date format, I don't think there's a solution other than just making a text input where you write the date as the format you want.
For the background issue, try changing where you're assigning the brackground image, like this:
.container { /* don't set the background image here, you're not rendering this*/
background:transparent;
}
#cardstyle { /* use it here. you're rendering from this div on */
background:linear-gradient(-20deg, rgb(204, 204, 204) 50%, #f66700 50%)
}

How to change image border and text simultaneously on hover?

I am building a Netflix Clone just as a personal project.
On the Netflix Profiles section on hover, the border around the image and the user's name both get highlighted.
When I attempt with my code, on hover, the border and text change separately. I tried multiple ways for a little over hour without success. I know I'm missing something simplistic, and probably overthinking but I'm not sure how to approach this whether I create a JavaScript function perhaps, or within the CSS. (I am struggling with adding JS to my projects which is why I am building this clone!)?
Tips or hints would be awesome as I am still trying to problem solve it
body, html {
height: 100%;
margin: 0px;
margin-top: -11px;
margin-left: 22.5px;
padding: 0px;
color: white;
font-family: 'Roboto', sans-serif;
background-color: rgb(17, 17, 17);
}
.container {
text-align: center;
position: relative;
top: 10%;
}
/*
----------------
PROFILES SECTION
----------------
*/
.profiles {
margin: 20px;
padding: 20px;
display: flex;
justify-content: center;
}
.prfImg {
margin: -6px;
padding: 12px;
}
.prfImg > img {
margin: 2px;
padding: 2px;
border: 0.5px solid rgba(255, 255, 255, 0.061);
border-radius: 3px;
}
.prfImg > img:hover {
color: rgba(255, 255, 255, 0.787);
border: 3px solid rgba(255, 255, 255, 0.787);
border-radius: 3px;
}
#user {
font-size: 25px;
color: grey;
}
/*
----------------
BUTTON
----------------
*/
.btn {
margin: 30px;
padding: 30px;
text-align: center;
}
button {
margin-top: 30px;
font-size: 22px;
color: grey;
padding: 10px;
background-color: transparent;
border: 1.5px solid grey;
}
button:hover {
color: rgba(255, 255, 255, 0.863);
border: 1.5px solid rgba(255, 255, 255, 0.863);
}
<!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">
<link rel="stylesheet" href="profiles.css">
<!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>NETFLIX - Profiles</title>
</head>
<body>
<header>
<img src="Img_d.profiles/netflix_logo.png" alt="netflix logo TM" width="99.2px">
</header>
<div class="container">
<div class="header-text">
<h1 style="font-size: 50px;">Who's watching?</h1>
</div>
<div class="profiles">
<div class="prfImg">
<img src="Img_d.profiles/profile_one.png" alt="Profile One" width="75%" label="hello">
<p class="prfImg" id="user">A name</p>
</div>
<div class="prfImg">
<img src="Img_d.profiles/profile_two.png" alt="Profile Two" width="75%">
<p class="prfImg" id="user">A name</p>
</div>
<div class="prfImg">
<img src="Img_d.profiles/profile_three.png" alt="Profile Three" width="75%">
<p class="prfImg" id="user">A name</p>
</div>
<div class="prfImg">
<img src="Img_d.profiles/profile_four.png" alt="Profile Foud" width="75%">
<p class="prfImg" id="user">A name</p>
</div>
</div>
<!-- button class -->
</div>
<div class="btn">
<button>Manage Profiles</button>
</div>
</body>
</html>
on my own!*
You can put the hover event on the parent div.
Change this:
.prfImg > img:hover {
color: rgba(255, 255, 255, 0.787);
border: 3px solid rgba(255, 255, 255, 0.787);
border-radius: 3px;
}
to this
.prfImg:hover {
color: rgba(255, 255, 255, 0.787);
border: 3px solid rgba(255, 255, 255, 0.787);
border-radius: 3px;
}

Some part of my Website's CSS is not being implemented when uploaded on Github pages?

I recently made a simon game using JS,HTML5,CSS3 and Bootstrap v4.5.Now the issue occurs on phones i.e. when display of viewport is below 726px.While testing locally on Chrome developer tools the site looks the way I want the website to look.Below is the image on Chrome developer tools
https://www.flickr.com/photos/189671520#N03/50243919798/in/dateposted/
Below is the screenshot of the same page taken on actual pone https://www.flickr.com/photos/189671520#N03/50244763957/in/dateposted/
The key difference is on the edge of each color ,the border radius as well as the border color black is not being applied !. Looking forward for help.
the code for CSS is
body {
text-align: center;
font-family: "Press Start 2P", cursive;
background-color: #011f3f;
color: #fef2bf;
}
.btn {
margin: 3px 0px;
display: inline-block;
height: 210px;
width: 210px;
border: 10px solid black;
border-radius: 20%;
padding: 0px;
}
.btn-close:nth-child(odd) {
text-align: right;
}
.btn-close:nth-child(even) {
text-align: left;
}
.btn-close {
padding: 7px 10.5px;
}
footer {
font-size: 1rem;
margin: 0 0 1% 0;
}
.game-over {
background-color: red;
opacity: 0.8;
}
#level-title {
font-size: 2.85rem;
margin: 2% 5%;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
.simon-rules {
color: #fef2bf;
text-decoration: none;
}
.simon-rules:hover {
color: red;
text-decoration: none;
}
/*****************************************colors*****************************************/
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
#media (max-width: 726px) {
.btn {
margin: 0px;
height: 86px;
width: 86px;
border: 5px solid black;
}
.btn-close {
padding: 5px 2.5px;
}
footer {
margin-bottom: 5%;
}
#level-title {
height: 70px;
font-size: 1.85rem;
margin: 4% 5%;
}
}
the code in HTML is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Simon</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
</head>
<body>
<h1 id="level-title">Press Me To Start</h1>
<div class="container">
<div class="row">
<div class="col-6 btn-close">
<div type="button" id="green" class="btn green"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="red" class="btn red"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="yellow" class="btn yellow"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
</div>
<footer class="fixed-bottom">
<a
href="https://www.youtube.com/watch?v=1Yqj76Q4jJ4"
class="simon-rules"
target="_blank"
>What is Simon Game?</a
><br />
© Yash Salvi
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
If possible can anyone also help me know that on phone when user clicks on my "Press me to Start" i.e. on "h1" then I have used "h1" as a button and assigned the onclick function to it.Now the problem is that when user taps say on the "Press" it gets copied and browser asks if I want to do google search of the clicked word.
I want this "click to google search on any word" disabled.
[Text](https://raxy45.github.io/SIMON_GAME/) Link to github page

Div to show box shadow when button is clicked

I am wanting to have this button be clicked and then it highlight the div orange.. So far, I am only able to get it to highlight the button when clicked... Unfortunately, the div highlights whether the button click is done or not.. NO jquery please.
var addShadow = function(e) {
e = e || window.event;
e.preventDefault();
var el = e.target || e.srcElement;
el.className = 'highlight';
setTimeout(function() {
removeShadow(el);
}, 300);
};
var removeShadow = function(el) {
el.className = 'normal';
};
.normal{
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
.highlight{
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>
<div class="highlight">Want it to highlight orange here when button is clicked.</div>
You're adding the click handler to the button element, so when you click on it, the event target is going to be the button, which is why the button is getting highlighted instead of the div on click.
Instead of trying to grab the div from the event, you can just create a reference to it in your script by selecting it by its id. In the example below it's called divToHighlight.
var divToHighlight = document.getElementById('my-div');
var addShadow = function(e) {
e = e || window.event;
e.preventDefault();
divToHighlight.className = 'highlight';
setTimeout(function() {
removeShadow(divToHighlight);
}, 300);
};
var removeShadow = function(el) {
el.className = 'normal';
};
.normal {
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
.highlight {
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>
<div class="normal" id="my-div">Want it to highlight orange here when button is clicked.</div>
You can use CSS and the :active state for this:
.normal{
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
.normal:active + .normal{
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
<button class="normal" >
Click here to highlight div.</button>
<div class="normal">Want it to highlight orange here when button is clicked.</div>
Give this code a try:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
<style>
.normal {
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
.highlight {
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 normal" id="results">
My div
</div>
<button class="btn btn-primary" id="switchbtn">Click me</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
// clicking the button begins here
$('#switchbtn').click(function() {
// lets get the div we're targeting
var mydiv = $('#results');
// lets check if its highlighted or not
if (mydiv.hasClass('normal') == true) {
// if the div is in its normal state, lets highlight it
$(mydiv).removeClass('normal');
$(mydiv).addClass('highlight');
} else {
// if the div is highlighted, let's normalize it
$(mydiv).removeClass('highlight');
$(mydiv).addClass('normal');
}
});
</script>
</body>
</html>

How to Change Navigation Bar Background with Scroll?

I'm new to web-developing. For one of my projects, I want to change the navigation bar's background when the user scrolls.
I want it to look like exactly this:
https://www.nlogic.co/understanding-vlan-hopping-attacks/
Here's my code:
nav .row {
margin-right: 0px;
}
nav {
border: 2px ridge #999;
position: fixed;
}
nav li {
float: left;
list-style: none;
padding: 20px 30px;
}
nav a {
color: white;
font-size: 20px;
}
.btn button {
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover {
border: 2px solid white;
border-radius: 10px;
}
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About
</li>
<li>Contact
</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
I am not good at jQuery. In fact, I only know the basics of Javascript. I will be Very Very Grateful if someone can help me here.
Try this :
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
height: 1500px;
}
nav .row{
margin-right: 0px;
}
nav{
border: 2px ridge #999;
position:absolute;
}
nav li{
float: left;
list-style: none;
padding: 20px 30px;
}
nav a{
color:white;
font-size: 20px;
}
.btn button{
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover{
border: 2px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About</li>
<li>Contact</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
</script>
</body>
</html>
try this. change the sizes as your need. refer this example and implement it for your project.try below working demo.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
height: 1000px;
margin: 0;
padding: 0;
}
div.navbar{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
}
</style>
<body>
<div class="navbar"></div>
</body>
<script type="text/javascript">
$(window).scroll(function(){
var thescroll = $('body').scrollTop();
//alert(thescroll);
//in here, get the scroll position, if it is greater than you navbar height then change the color or whatever.
if (thescroll > 80)
{
$("div.navbar").css({"background-color":"pink"});
}
else
{
$("div.navbar").css({"background-color":"black"});
}
});
</script>
</html>

Categories