I'm trying to make Paint in JS here's the code.
I want to change color of the trail from black to red by clicking on div "red" for example,and I'm out of ideas (without jQuery).
let active = false;
const draw = function(e) {
if (active == false) {
return;
}
const x = e.clientX;
const y = e.clientY;
let div = document.createElement("div");
div.style.top = y + "px";
div.style.left = x + "px";
document.body.appendChild(div);
}
const drawActive = function() {
active = !active
}
function changeColor() {
//div.classList.add("mainColor");
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
height: 100vh;
margin: 0;
}
#containter {
width: 200px;
height: 200px;
border-radius: 0;
background-color: #fff;
position: fixed;
}
div {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
#red {
width: 25px;
height: 25px;
background-color: red;
border-radius: 0;
margin-top: 18%;
}
.blue {
width: 25px;
height: 25px;
background-color: blue;
border-radius: 0;
margin-top: 6%;
margin-left: 12%;
}
.yellow {
width: 25px;
height: 25px;
background-color: yellow;
border-radius: 0;
margin-top: 18%;
margin-left: 12%;
}
.green {
width: 25px;
height: 25px;
background-color: green;
border-radius: 0;
margin-top: 6%;
}
.first {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
.mainColor {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="containter">
<div id="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<script src="script.js"></script>
</body>
</html>
I tried to make it with setAttribute but I had some errors.
I don't know which details should I give.
I don't know which details should I give.ยด
#Edit from review: removed 6 more repetitions...
I used the querySelectorAll to find all div and added condition
if (!document.getElementById("containter").contains(item))
to except content within div id container.
document.querySelectorAll('div').forEach(function (item) {
if (!document.getElementById("containter").contains(item))
item.setAttribute('class', 'mainColor');
})
let active = false;
const draw = function(e) {
if (active == false || document.getElementById("containter").contains(e.target)) {
return;
}
const x = e.clientX;
const y = e.clientY;
let div = document.createElement("div");
div.style.top = y + "px";
div.style.left = x + "px";
document.body.appendChild(div);
}
const drawActive = function() {
active = !active
}
function changeColor() {
document.querySelectorAll('div').forEach(function(item) {
if (!document.getElementById("containter").contains(item))
item.setAttribute('class', 'mainColor');
})
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
height: 100vh;
margin: 0;
}
#containter {
width: 200px;
height: 200px;
border-radius: 0;
background-color: #fff;
position: fixed;
}
div {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
#red {
width: 25px;
height: 25px;
background-color: red;
border-radius: 0;
margin-top: 18%;
}
.blue {
width: 25px;
height: 25px;
background-color: blue;
border-radius: 0;
margin-top: 6%;
margin-left: 12%;
}
.yellow {
width: 25px;
height: 25px;
background-color: yellow;
border-radius: 0;
margin-top: 18%;
margin-left: 12%;
}
.green {
width: 25px;
height: 25px;
background-color: green;
border-radius: 0;
margin-top: 6%;
}
.first {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
.mainColor {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="containter">
<div id="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Related
I'm a beginner and I don't understand why it doesn't work. I have code that allows you to move a circle on the screen. I also need to make a popup appear when clicking on a circle.Also, I want a popup to appear in the middle of the screen when the circle is clicked
I have code that allows you to move a circle. It chooses a random point to move to. Also, I want a popup to appear in the middle of the screen when the circle is clicked
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">
<link rel="stylesheet" href="css/style.css">
<title>Circle</title>
</head>
<body>
<header></header>
<main>
<label name="popup" id="popup" class="popup"></label>
<div class="button">
<input type="checkbox" name="popup" id="popup" class="popup__check">
</div>
</main>
<footer></footer>
<script src="js/script.js"></script>
</body>
</html>
CSS:
*,*::before,*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
body main html{
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);;
position: absolute;
transition: linear 4s;
}
.popup {
display: none;
width: 1000px;
background: rgba(61, 55, 61);
height: 1000px;
overflow: auto;
font-size: 1rem;
padding: 20px;
position: absolute;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
align-self: center;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.popup__check:checked ~ .popup{
display: block;
}
JS:
let elem = document.querySelector('.button');
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.left = randYP;
elem.style.top = randXP;
};
setInterval(changePosition,1000);
It seems like you cant use checkboxes if you use appearance: none.
So you need to do it in JS:
HTML:
<main>
<div class="button" data-popup="false"></div>
<label name="popup" id="popup" class="popup"></label>
</main>
CSS:
.popup {
display: none;
width: 100px;
background: rgba(61, 55, 61);
height: 100px;
overflow: auto;
font-size: 1rem;
padding: 20px;
position: absolute;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
align-self: center;
}
.button[data-popup='true'] + .popup{
display: block;
}
JS:
const btn = document.querySelector(".button")
const onClick = () => {
console.log("onCLick")
const current = btn.getAttribute("data-popup") == "true";
btn.setAttribute("data-popup", !current);
}
btn.addEventListener("click", onClick);
This is how it should be done. You can use :checked to determine the state of checkbox, you just need correct CSS selectors and markup. Take a look below:
let elem = document.querySelector('.button');
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.left = randYP;
elem.style.top = randXP;
};
setInterval(changePosition, 1000);
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
main {
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
.popup {
display: none;
width: 100%;
height: 100%;
background: rgba(61, 55, 61);
font-size: 4rem;
padding: 20px;
position: fixed;
left: 0;
top: 0;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
justify-content: center;
align-items: center;
color: #fff;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.popup__check:checked+.popup {
display: flex;
}
<main>
<div class="button">
<input type="checkbox" name="popup" id="popup" class="popup__check">
<label name="popup" id="popup" class="popup">So you clicked on that thing...</label>
</div>
</main>
I am trying to learn coding in my freetime and have run into an issue. I am trying to have 'contact info' to be a on hover on profile picture so that it shows a way to contact me via phone, email, and shows my name. I'm hoping someone can help with this please.
Cut most of the HTML code in the process to allow post
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='Profile.jpg' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
You've missed ; after top: 30%; in CSS #contactInfo class
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%; /* missed ; */
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h50-n-l50-sg-rj' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
I want to show and hide the video player's elements details, play_pause_button and controls_bar when the video player itself is clicked but not when its elements are clicked. I have made some progress but the video player's elements hide when I click on the elements which shouldn't happen. So how can I detect that the video player was clicked but not the video player's elements.
index.html:
var play_pause_button = document.getElementById("play_pause_button");
play_pause_button.style.visibility = "hidden";
var details = document.getElementById("details");
details.style.visibility = "hidden";
var controls_bar = document.getElementById("player_controller_bar");
controls_bar.style.visibility = "hidden";
document.getElementById("video_player_box").onclick = function () {
if (controls_bar.style.visibility == "hidden") {
play_pause_button.style.visibility = "visible";
details.style.visibility = "visible";
controls_bar.style.visibility = "visible";
} else {
play_pause_button.style.visibility = "hidden";
details.style.visibility = "hidden";
controls_bar.style.visibility = "hidden";
}
}
body {
margin: 0;
}
#video_player_box {
position: relative;
height: 100%;
width: 100%;
display: block;
font-family: Helvetica, Arial, sans-serif;
color: rgb(22,22,23);
}
#video_player_box video {
height: 100%;
width: 100%;
pointer-events: none;
}
#video_player_box img {
width: 50px;
height: 50px;
}
#video_player_box #details {
width: 100%;
height: 12.5%;
background-color: rgb(108, 171, 247);
position: absolute;
top: 0;
}
#video_player_box #play_pause_button {
background-color: rgb(108, 171, 247);
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
#video_player_box #play_pause_button img {
width: 50%;
height: 50%;
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
margin: -25% 0px 0px -25%;
}
#video_player_box #player_controller_bar {
width: 100%;
height: 50px;
background-color: rgb(108, 171, 247);
position: absolute;
bottom: 0;
display: flex;
align-items: center;
}
.controller_bar_block1, .controller_bar_block3 {
text-align: center;
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}
.controller_bar_block2 {
flex: 7;
text-align: center;
padding: 0px 5px 0px 5px;
}
#video_player_box #seek_bar {
padding-top: 3px;
background: rgb(108, 171, 247);
border: rgb(22, 22, 23) 1px solid;
border-radius: 50px;
width: 100%;
float: left;
-webkit-appearance: none !important;
height: 4px;
flex: 7;
}
#video_player_box #seek_bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: rgb(22, 22, 23);
height: 1px;
width: 1px;
cursor: pointer;
border-radius: 100%;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="video_player_box">
<div id="details"></div>
<div id="play_pause_button">
<img src="https://image.flaticon.com/icons/png/512/31/31128.png">
</div>
<video poster="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg" src="https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4"></video>
<div id="player_controller_bar">
<div class="controller_bar_block1">00:00:00</div>
<div class="controller_bar_block2">
<input id="seek_bar" type="range" min="0" value="0" max="634">
</div>
<div class="controller_bar_block3">00:10:34</div>
</div>
</div>
</body>
</html>
You can use the event's target property. The target property references the element that was actually clicked, even when you attach the handler on a ascending element
(see https://developer.mozilla.org/en-US/docs/Web/API/Event/target)
you will receive the reference to the event as the first argument of your onClick handler
myElement.onclick = function (ev) {
if (ev.target.id === 'details') {
// the clicked element is the details element
}
}
you can also check if the target is the video element for example.
console.log(ev.target.nodeName === 'VIDEO')
After 500 milliseconds from the text inserted into the input text, I'm opening a div under the input text which contains a div with the inserted text on it. When inserted text is clicked it should console.log the text, but it is not able to do so because the onblur event occurs before the click. I want to keep my onblur event. But with the onblur event I can't make the div clickable. Please help
index.html:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onclick = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>
Unlike the onclick event, the onmousedown event is fired before the onblur event:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onmousedown = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>
I'm writing a bit of code that mimics the F12 inspect tool that most browsers have. When hovering over an element, a div is appended with a semi-transparent blue colour, indicating that it's selected:
The problem that I'm having is that when moving the cursor over the child of an 'inspected' element, the child element does not actually get hovered:
Before Hover:
After Hover:
Here's my code (JS Bin):
$('body *').on('mouseover', function(e) {
if ($(e.target).closest('.inspect_hover').length == 0) {
$('<div class=\'inspect_hover\'></div>').appendTo(e.target);
}
}).on('mouseout', function(e) {
var mouse = [e.pageX, e.pageY];
var min = [$(e.target).offset().left, $(e.target).offset().top];
var max = [($(e.target).offset().left + $(e.target).width()), ($(e.target).offset().top + $(e.target).height())];
if (!(mouse[0] >= min[0] && mouse[0] <= max[0]) || !(mouse[1] >= min[1] && mouse[1] <= max[1])) {
$('div.inspect_hover').remove();
}
});
.header {
position: absolute;
width: 400px;
height: 200px;
left: 20px;
top: 20px;
background-color: #efefef;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.header h3 {
position: relative;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
top: 40px;
left: 0px;
text-align: center;
margin: 0px 0px 0px 0px;
}
.inspect_hover {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px 0px 0px 0px;
background-color: rgba(126, 103, 238, 0.125) !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class='header'>
<h3>Hello, World</h3>
</div>
</body>
</html>
How would I change my JS so that when hovering over the child, the child element is also 'inspected'?
Thanks!
Use prependTo instead of appendTo
$('body *').on('mouseover', function(e) {
if ($(e.target).closest('.inspect_hover').length == 0) {
$('<div class=\'inspect_hover\'></div>').prependTo(e.target);
}
}).on('mouseout', function(e) {
var mouse = [e.pageX, e.pageY];
var min = [$(e.target).offset().left, $(e.target).offset().top];
var max = [($(e.target).offset().left + $(e.target).width()), ($(e.target).offset().top + $(e.target).height())];
if (!(mouse[0] >= min[0] && mouse[0] <= max[0]) || !(mouse[1] >= min[1] && mouse[1] <= max[1])) {
$('div.inspect_hover').remove();
}
});
.header {
position: absolute;
width: 400px;
height: 200px;
left: 20px;
top: 20px;
background-color: #efefef;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.header h3 {
position: relative;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
top: 40px;
left: 0px;
text-align: center;
margin: 0px 0px 0px 0px;
}
.inspect_hover {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px 0px 0px 0px;
background-color: rgba(126, 103, 238, 0.125) !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class='header'>
<h3>Hello, World</h3>
</div>
</body>
</html>