I am trying to change Text Box position when the button is clicked. I get the following error message : "Cannot set property 'top' of undefined"
when I remove the following line: " var user = document.getElementById("user").value;"
it works fine
any suggestions
#canvas{
position: absolute;
background-color: red;
margin-left: 50px;
margin-top: 10px;
}
#user{
top:160px;
right:1000px;
position: absolute;
border-radius: 10px ;
width: 180px;
border: 3px solid #BADA55;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
background: rgba(255,255,255,0.0);
color: blue;
font-size: 40px;
font-weight: bold;
margin: 0 0 10px 0;
display: inline;
visibility: visible;
}
#btn{
position: absolute;
bottom :200px;
right:1100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="main.css">
<script>
function changePosition(){
var user = document.getElementById("user").value;
user.style.top= "100px";
user.style.rigth = "100px";
console.log(user);
}
</script>
</head>
<body>
<div id="wra">
<canvas id="canvas" width="350" height="350"></canvas>
<input type="text" id="user" value=""><br>
</div>
<button onclick ="changePosition()" id="btn" type="button">Submit</button></p>
</body>
</html>
Change
function changePosition(){
var user = document.getElementById("user").value;
user.style.top= "100px";
user.style.rigth = "100px";
console.log(user);
}
To
function changePosition(){
var user = document.getElementById("user");
user.style.top= "100px";
user.style.right = "100px";
console.log(user.value);
}
Related
I'm trying to make a simple light switch. My code turns off lights on first click but doesn't turn it back on on second click.
The problem is that my check variable is always false and I don't know why that is.
I was able to make a light switch with classList.toggle. But I still want to know why my code doesn't work.
Can someone please explain why variable "check" is always false in my code?
HTML
<!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>Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<button class="btn">LIGHTS ON</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
padding: 30px 100px;
font-size: 30px;
font-family: monospace;
text-shadow: 1px 1px 1px #eee, -1px -1px 3px #333;
background-color: orange;
border: none;
box-shadow: 0 0 3px 2px orange, 0 0 20px orange;
cursor: pointer;
transition: all 0.1s;
}
.btn:active {
transform: scale(0.97);
box-shadow: 0 0 3px 2px orange, 0 0 10px orange;
}
.clickedClass {
background-color: rgb(30, 30, 30) !important;
color: #eee !important;
text-shadow: 0 0 6px #eee !important;
box-shadow: none !important;
}
JS
'use strict';
const btn = document.querySelector('.btn');
const clickedClass = document.querySelector('.clickedClass');
const check = btn.classList.contains('clikedClass');
function clicked() {
if (!check) {
btn.classList.add('clickedClass');
btn.textContent = `LIGHTS OFF`;
console.log(`${check}`);
} else {
btn.classList.remove('clickedClass');
btn.textContent = `LIGHTS ON`;
console.log(`${check}`);
}
}
btn.addEventListener('click', clicked);
The problem is that you access the class list initially and never check it after
const check = btn.classList.contains('clikedClass');
You should do this inside your event handler
function clicked() {
const check = btn.classList.contains('clikedClass');
if (!check) {
...
}
EDIT
I provide a working codepen of your code here : https://codepen.io/aSH-uncover/pen/yLKReWp
You will never believe what the problem was... :D
Carefully read the two lines of code below and you will find it :D (and this is the perfect opportunity to learn about the usage of constant rather than free strings)
const check = btn.classList.contains('clikedClass');
btn.classList.add('clickedClass');
From the above comment ...
"Why does the OP want to script a button element when the expected behavior can be achieved without JS by an adequately styled checkbox control ... <input type="checkbox"/>?"
body {
margin: 0;
padding: 5px;
background: #333;
}
[data-lightswitch] {
position: relative;
display: inline-block;
margin: 0 10px 10px 10px;
}
[data-lightswitch] > [type="checkbox"] {
position: absolute;
left: 10px;
top: 10px;
z-index: -1;
}
[data-lightswitch] > [data-light-on],
[data-lightswitch] > [data-light-off] {
/* OP's styling rules */
padding: 30px 100px;
font-size: 30px;
font-family: monospace;
text-shadow: 1px 1px 1px #eee, -1px -1px 3px #333;
background-color: orange;
border: none;
box-shadow: 0 0 3px 2px orange, 0 0 20px orange;
cursor: pointer;
transition: all 0.1s;
}
[data-lightswitch] > [type="checkbox"] ~ [data-light-off],
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-on] {
display: none;
}
[data-lightswitch] > [type="checkbox"] ~ [data-light-on],
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-off] {
display: inline-block;
}
[data-lightswitch] > [type="checkbox"]:focus ~ [data-light-on],
[data-lightswitch] > [type="checkbox"]:focus ~ [data-light-off] {
outline: 3px dotted black;
}
[data-lightswitch] > [type="checkbox"]:checked ~ [data-light-off] {
/* OP's styling rules */
background-color: rgb(30, 30, 30) !important;
color: #eee !important;
text-shadow: 0 0 6px #eee !important;
box-shadow: none !important;
transform: scale(0.97);
box-shadow: 0 0 3px 2px orange, 0 0 10px orange;
}
<label data-lightswitch>
<input type="checkbox" checked />
<span data-light-off>Light on</span>
<span data-light-on>Light off</span>
</label>
<label data-lightswitch>
<input type="checkbox" />
<span data-light-off>On</span>
<span data-light-on>Off</span>
</label>
I'm trying to make the background (only the search bar) to be a backdrop blur background without blurring the whole background image behind it.
I've tried webkit filter: blur & filter: blur, but they both blur the whole body and not just make the transparent background of the search bar blurred.
Note: I'm not using a background image in the code below because I'll embed this code in an iframe, which the background before it will be an image.
EDIT: I have removed the domain name in the ORIGINAL code so it doesn't conflict in search results for that domain name. Thanks everyone for helping me fix this issue! You're amazing!
<html>
<head>
<base target="_blank" />
<base target="_blank" />
<script type="text/javascript">
function submitSearch() {
var siteSearchUrl = "https://*DOMAIN_NAME*/_/search?query="; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query;
if (typeof IE_fix != "undefined") {
// IE8 and lower fix to pass the http referer
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
window.open(url, "_blank");
} // All other browsers
}
function searchKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById("search-icon").click();
return false;
}
return true;
}
</script>
<link
rel="stylesheet"
type="text/css"
href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 14px 6px 0 6px;
background-color: transparent;
font-family: "Roboto", sans-serif;
overflow: hidden;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding: 8px;
height: 24px;
vertical-align: middle;
cursor: pointer;
}
#search-icon:hover {
background: rgba(155, 153, 176, 0.2);
border-radius: 100px;
}
#search-query {
background: inherit;
}
body:before {
background: inherit;
}
#search-query:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(10px);
}
#search-query {
width: max-content;
margin: 0 auto;
overflow: hidden;
border: 0;
border-radius: 14px;
color: #212121;
font-size: 16px;
line-height: 24px;
transition: 0.4s;
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
line-height: 24px;
}
#search-query-input {
width: 60vw;
height: 24px;
font-size: 16px;
font-stretch: normal;
letter-spacing: normal;
line-height: 24px;
border: 0;
color: #000;
background-color: transparent;
cursor: text;
margin-left: -5px;
text-align: start;
vertical-align: middle;
}
#media (max-width: 500px) {
#search-query-input {
width: 80vw;
}
}
#media (min-width: 900px) {
#search-query-input {
width: 60vw;
}
}
</style>
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img
id="search-icon"
alt="Search"
onclick="submitSearch();"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII="
/>
<input
type="text"
id="search-query-input"
placeholder="Search"
enterkeyhint="go"
onkeypress="return searchKeyPress(event);"
style="box-shadow: none"
;=""
/>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.sections {
background-image: url(https://images.pexels.com/photos/3293148/pexels-photo-3293148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
height: 100vh;
padding-top: 15vh;
}
.search-bar {
border: 1px solid transparent;
width: 300px;
align-items: center;
display: flex;
margin: 0 auto;
padding-left: 2vh;
border-radius: 10px;
transition: 0.5s;
}
.search-bar:hover {
border: 1px solid rgb(142, 141, 141);
backdrop-filter: blur(5px);
}
.search-text {
padding: 4vh 8vh;
background: transparent;
border: none;
height: 100%;
width: 100%;
border-radius: 50px;
font-size: 18px;
color: #424242;
font-weight: 500;
}
.search-text:focus {
outline: none;
}
.fa-search {
color: #fff;
}
<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="style.css" />
<script src="https://kit.fontawesome.com/2dba9f6187.js" crossorigin="anonymous"></script>
<title>Blur Background Project</title>
</head>
<body>
<header>
<div class="center">
<div class="sections">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search" class="search-text" />
</div>
</div>
</div>
</header>
</body>
function submitSearch(){
var siteSearchUrl = 'https://support.yssf.ml/_/search?query='; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search-icon').click();
return false;
}
return true;
}
body {
margin:0;
padding:14px 6px 0 6px;
background-color:transparent;
font-family: 'Roboto', sans-serif;
overflow:hidden;
background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
}
#search-query{
background: transparent;
width:max-content;
margin:0 auto;
overflow:hidden;
border:0;
border-radius:14px;
color: #212121;
font-size:16px;
line-height:24px;
transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
font-size:16px;
line-height:24px;
backdrop-filter:blur(3px);
}
#search-query-input {
width:60vw;
height:24px;
font-size:16px;
font-stretch: normal;
letter-spacing: normal;
line-height:24px;
border:0;
color:#000;
background-color:transparent;
cursor:text;
margin-left:-5px;
text-align:start;
vertical-align:middle;
}
#search-query-input:hover{
color:white;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding:8px;
height:24px;
vertical-align:middle;
cursor:pointer;
}
#search-icon:hover {
background: rgba(155,153,176, 0.2);
border-radius: 100px;
}
#search-query-input:hover::placeholder{
color:white;
}
#media (max-width:500px) {
#search-query-input {
width:80vw;
}
}
#media (min-width:900px) {
#search-query-input {
width:60vw;
}
}
<html>
<head>
<base target="_blank">
<base target="_blank">
<link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
<input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
</div>
</body>
Use CSS filter on any page element. This may require you to duplicate the existing background into the #search-query Div (so that there is an image present to be blurred, it then appears like a blur of the original image behind it) but also try it with no background as a test. It's been a while since I used it but you may find that the blur applies to everything behind it regardless.
#search-query{
filter: blur(10px);
}
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>
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>
I have put my close button in div but it didn't work? I should keep the display:none;but when I remove display it works!
function myFun() {
var button = document.getElementById("myBtn");
button.onclick = function() {
var div = document.getElementById('title');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
</head>
<body>
<div id="title" style=" display:none; font-family: Helvetica, Arial, sans-serif; margin-left:auto; margin-right:auto; position:absolute; top: 50px; right: 16px; padding: 30px; z-index:10; width:290px; height:500px; box-sizing: border-box; background-color:#fcfcfc ; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-align:center; float:center;"><input type="button" id="myBtn" onclick="myFun()" value="close" style= "bottom: 2px; right: 60px; margin: 1px 200px;"></div>
You should remove visibility:hidden.
Thus you will get what you want, because div will appear with your button without visibility:hidden.
Its working Fine Bro. You just need to remove visibility:hidden
function myFun() {
var x = document.getElementById("myBtn").value;
document.getElementById("title").innerHTML = x;
alert(x);
}
#title{
background-color: #fcfcfc;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Helvetica,Arial,sans-serif;
height: 500px;
margin-left: auto;
margin-right: auto;
padding: 30px;
position: absolute;
right: 16px;
text-align: center;
top: 50px;
width: 290px;
z-index: 10;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="title">
<input type="button" id="myBtn" onclick="myFun()" value="close"></div>
</body>