Can you tell what to do so that when I click the box it disappears?
Here's what I've tried:
document.getElementById("box").addEventListener("click",
function(){
document.getElementById("box").style.display = "none";
});
Here are the box properties:
<div id="box" style="height: 150px; max-height: 600px; min-height:
5px; width:150px; max-width: 600px; min-width: 5px; opacity:
1; background-color:orange; margin:50px"></div>
You need a closing curly brace for the function and a closing parenthesis for invoking addEventListener.
document.getElementById("box").addEventListener("click",
function(){
document.getElementById("box").style.display = "none";
});
<div id="box" style="height: 150px; max-height: 600px; min-height:
5px; width:150px; max-width: 600px; min-width: 5px; opacity:
1; background-color:orange; margin:50px"></div>
Related
I am trying to make a game and I have been trying to get the character button to disappear and reappear on click. I think the if else statements is the best way to do it but I am probably wrong because I am new to javascript. I managed to make it disappear but couldn't make it appear again on click
html:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
By applying a display:none to the button ( as your code and the other answers do ) means that once the button is hidden there will be nothing to click a subsequent time to unhide the element. Did you instead intend something akin to the following which sets a visibility property rather than display so that the animation is not reset each time?
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Alternatively to hide the button itself the opacity property might be more suitable as the button still occupies the space but is merely invisible so can be clicked a second time to reveal itself?
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});
* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Try this:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display==="block") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
What are you going to click in order to show the hidden box,since you have made it disappear ?
I created this snippet below to explain the logic you could follow in order to toggle between visible and hidden black boxes,you definitely need to click something to initiate visibility for the desired elements so i created a button for that.
function showElements(arr) accepts an array of id's you want to bring them back to page.
.black-box {
height: 50px;
width: 50px;
background-color: black;
position: relative;
display: block;
margin:5px;
float: left;
}
<html>
<body>
<div id="game">
<div id="block"></div>
<button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button>
<button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button>
<button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button>
</div>
<script defer>
function hideThisElement(e){
e.style.display = "none";
}
function showElements(arr){
arr.forEach(el => {
let elId = document.getElementById(el)
if(document.body.contains(elId)){
if(elId.style.display == "none"){
elId.style.display = "block"
}
}
})
}
</script>
</body>
</html>
let x = 0;
document.getElementsByTagName('body')[0].addEventListener('click',function(){
let char = document.getElementById('character')
if(x%2 == 0){
x++;
char.classList.remove('show')
char.classList.add('hide')
}else{
x++
char.classList.remove('hide')
char.classList.add('show')
}
})
.hide{
display:none;
}
.show{
display:block;
}
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
}
<body>
<div id="game">
<div id="block"></div>
<button id="character" class='show'></button>
</div>
</body>
.container
{
width:500px;
height:500px;
background-color:grey;
}
.box
{
width:150px;
height:30px;
background-color:white;
position:relative;
top:130px;
left:10px;
color:black;
}
.window
{
height:300px;
width:250px;
background-color:red;
position:absolute;
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
Hello,
I have one question, is possible to detect focus and blur into div (class="box"). I would like to click in div class="box" (when div is active) and the red box (class="window") fadeOut and then when click outside "box" "window" fadeIn ?
Thank you for your time :)
You could do that using jQuery focus and blur event handler, .box on focus it hides .window and on blur it shows .window.
$(document).ready(function(){
$('.box').on('focus',function(){
$('.window').hide(200);
});
$('.box').on('blur',function(){
$('.window').show(200);
});
});
.container
{
width:500px;
height:500px;
background-color:grey;
}
.box
{
width:150px;
height:30px;
background-color:white;
position:relative;
top:130px;
left:10px;
color:black;
}
.window
{
height:300px;
width:250px;
background-color:red;
position:absolute;
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
You can detect focus/blur events on the .box and in those event handlers you can take the appropriate actions.
var boxEl = document.querySelector('.box');
boxEl.addEventListener('focus', function(e) {
console.log('focused');
});
boxEl.addEventListener('blur', function(e) {
console.log('blurred');
});
.container {
width: 500px;
height: 500px;
background-color: grey;
}
.box {
width: 150px;
height: 30px;
background-color: white;
position: relative;
top: 130px;
left: 10px;
color: black;
}
.window {
height: 300px;
width: 250px;
background-color: red;
position: absolute;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
This can be done w/o using script, here in combination with the :focus pseudo class and the immediate sibling selector +
Note, for an element other than form elements to get focus, it need the tab-index set.
Stack snippet
.container {
width: 500px;
height: 500px;
background-color: grey;
}
.box {
width: 150px;
height: 30px;
background-color: white;
position: relative;
top: 130px;
left: 10px;
color: black;
}
.window {
height: 300px;
width: 250px;
background-color: red;
position: absolute;
left: 200px;
transition: opacity 1s;
}
.box:focus + .window {
opacity: 0;
transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div tab-index="1" class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
I made this code so that once you click the "inner div", click go to the "outer div" using the "pointer-events: none;" in CSS.
$("#outer").click(function(){
alert("outer clicked")
});
$("#inner").click(function(e){
alert("inner clicked")
this.style.display = 'none';
e.stopPropagation();
});
#outer {
width:300px;
height:200px;
border:3px solid;
margin:auto;
background: green;
}
#inner {
pointer-events: none;
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
background: yellow;
border:3px solid;
margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">inner div</div>
Outer div
</div>
OK, the function is perfect. But if you click anywhere within the outer div, I need the inner div to hide. I tried using this.style.display = 'none';, but it does not work.
You only need one event listener on #outer, to hide the inner div when #outer has been clicked.
$('#outer').click(function (e) {
$('#inner').hide();
});
#outer {
width:300px;
height:200px;
border:3px solid;
margin:auto;
background: green;
}
#inner {
pointer-events: none;
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
background: yellow;
border:3px solid;
margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">inner div</div>
Outer div
</div>
$("#outer").click(function(){
alert("outer clicked")
});
$("#inner").click(function(e){
alert("inner clicked")
this.style.display = 'none';
e.stopPropagation();
});
#outer {
width:300px;
height:200px;
border:3px solid;
margin:auto;
background: green;
position:relative;
}
#inner {
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
background: yellow;
border:3px solid;
margin:auto;
z-index:10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">inner div</div>
Outer div
</div>
In your example, the use of pointer-events is to allow click or tap behaviour to “pass through” an element to another element.
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 6 years ago.
I'm trying to make inner div fixed relative to it's parrent div. I made an example of my code on jsfiddle. Problem is when you scroll div. It is no longer on it's position. My html looks like:
<div class="outer">
<div class="inner1">
Lorem ipsum dolor
</div>
<div class="inner2">
</div>
</div>
and css
.outer{
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
.inner1{
position: absolute;
width:50px;
height: auto;
border: 1px solid blue;
top: 10px;
right: 10px;
}
.inner2{
width: 500px;
height: 500px;
}
Is there any way to make inner1 fixed relative to outer only using css ?
try this...
<style>
.outer{
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
.inner1{
position: fixed;
width:50px;
height: auto;
border: 1px solid blue;
}
.inner2{
width: 500px;
height: 500px;
}
</style>
You can try this:
.inner1 {
position: fixed;
width: 50px;
height: auto;
border: 1px solid blue;
top: 10px;
right: calc(100% - 400px); // 400px is the outer div's width
}
Here is working JSfiddle
<div class="container">
<div class="header">title</div>
<div class="cont_elements">
<div class="element">......</div>
<div class="element">......</div>
<div class="element">......</div>
</div>
and css will be
.header {
position: absolute;
top:0;
/* scrolling out of view :-( */
z-index:2;
background-color:pink;
}
.container {
position:relative;
width:200px;
height:400px;
background:gold;
}
.cont_elements {overflow-y:scroll; height:100%;}
.element {
position: relative;
}
Just change .inner1
.inner1{
position: fixed;
width:50px;
height: auto;
border: 1px solid blue;
margin-top: 10px;
left: 330px;
}
I need to add a scrolling bar when there is not enough space on a div.
Also, I would like to insert rows from bottom of this div.
I tried overflow:auto but it doesn't seem to work.
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br>');
});
});
#mydiv {
position: absolute;
top: 1%;
bottom: 1%;
left: 2%;
width: 40vw;
height: 49vh;
max-width: 260px;
font-size: 12px;
border: 1px solid black;
background-color: white;
border-radius: 5px;
overflow: auto;
display: table-cell;
text-align: center;
vertical-align: bottom;
}
#content {
width:100%;
position:absolute;
bottom:0;
overflow: auto;
}
#add{
position:relative;
top:270px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
<div id="content">
</div>
</div>
<button id="add">add</button>
Add height:100% in #content. DEMO
#content{
width:100%;
height:100%;
position:absolute;
bottom:0;
overflow: auto;
}
You can also provide a down scroll for each new element. Test this Fiddle
var a=0;
var content=$('#content');
$(function(){
$('#add').click(function(){
a++;
content.append('line'+a+'<br>');
content.scrollTop(content.height());
});
});
in #content
you should have the following:
#content {
width:100%;
position:absolute;
bottom:0;
overflow: auto;
max-height:49vh;
}
If you want the scrolling bar to be down always, simply do in js:
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br>');
$('#content').scrollTop($(document).height());
});
});
Here's a working FIDDLE
Applying overlflow-y: scroll should've worked but instead made the scrollbars inert on both divs (never seen that before). I removed the outer div and changed the #content div position: absolute it works great now. As content grows, the scrollbar gets longer. If you want the box to expand as the content grows, use position: relativeI also changed the dynamic content from text lines to divs.
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br/>');
});
});
#content {
display: table-cell;
position: absolute;
/*Use relative if you want the box to expand with the content.*/
/*position: relative;*/
top: 1%;
bottom: 1%;
left: 2%;
width: 40vw;
max-width: 260px;
height: 70vh;
/*Use this if you want the box to strech to the edge */
/*min-height:100%;*/
font-size: 12px;
border: 1px solid black;
background-color: white;
border-radius: 5px;
text-align: center;
vertical-align: bottom;
bottom:0;
overflow-y: scroll;
}
#add {
position:absolute;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">
</div>
<button id="add">add</button>