We Keep Coding

Show overlay fullscreen div then hide it by clicking on it

I'm new to the html/css/jquery languages, so please pardon me if my question seems too obvious.
My aim is to make a fullscreen overlay div appear when clicking on a div (this step actually worked with the toggle function) and then make this same div disappear by just clicking on it.
I've browsed many related topics but I can't seem to find a way to resolve my issue. How can I make the full screen div disappear by clicking anywhere on it (clicking back on the first div is not an option since it's intentionally hidden)?
Here's my code so far:
JavaScript (jQuery):
$(function() {
$("#bandeau").click(function() {
$("#full_screen").toggle();
});
});
HTML:
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">content</div>
</div>
CSS:
#bandeau {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width: 100%;
height: auto;
color: white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}

Pure CSS solution with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 0;
left: 0;
display: inline-block;
height: 100%;
width: 100%;
background: url('http://i.imgur.com/bv80Nb7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.item {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
#warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target><h1 id=warning>FULLSCREEN CONTENT</h1></div>
</label>

This will toggle full screen on or off
https://jsfiddle.net/42atLz1g/1/
$("#bandeau, #full_screen").click(function(){
$("#full_screen").toggle();
});

Below is a simple and easy way to do it with one command and full explination. Enjoy and welcome to website development!
Note: scroll to end of answer to see a short list of helpful links
// this is simply jQuery shorthand for document.ready = function ...
$(function(){
// this is how to dynamically assign events
// why is this important? let's say, in the future,
// you decide to add elements after the page is loaded,
// this allows the NEW elements to still use the same events you've assigned
$(document)
// .on and .off are as simple as they appear,
// on adds an event to a group of elements and off removes
// as you'll notice, I assign just one method to both elements
// the reason is this move is extremely simple
// all you need is to have one element hide or show, based on
// clicking one of the divs
.on('click', '#bandeau, #full_screen', function(e) {
// .toggle accepts a booleen argument
// if true = show, if false = hide
// thus i simply test the id name within the parameter!
$('#full_screen').toggle(this.id == 'bandeau');
})
});
#bandeau{
background-color: black;
color: green;
overflow: hidden;
cursor: crosshair;
width:100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width:100%;
height: auto;
color:white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">tnetnoc</div>
</div>
See more about jQuery Dynamic Events here (.on) && here (.off)
More you should read about dynamic entry
.toggle()

Try to replace your jQuery code with this
$(function(){
$("#bandeau").click(function(){
$("#full_screen").show();
});
$("#full_screen").click(function(){
$(this).hide();
});
});

On display of hidden element it shows on wrong place because of scroll, only in chrome

I don't realy know how to explain this thing in short sentence.
I don't know if it is bug or not..
In parent div with fixed height and overflow-y scroll, I have multiple children elements, which has jquery function click, what displays hidden element in these divs. When I scroll down to last div, after click, hidden element displays in wrong place.
I tried to search for this problem, cause it should be pretty common. But nothing came up.s
It's realy hard to explain with words. Just look at this jquery example with mozilla and after that with chrome.
https://jsfiddle.net/zvwcdzjz/2/#
P.S. I need my original example work and look exactly the same on chrome and mozilla, cause right now on mozilla everything looks exactly as i want it to be, but it bugs on chrome.
It can be solved with jQuery too, makes no difference for me.
HTML:
<div id="el">
<div class="content">
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
</div>
</div>
CSS:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
margin-left: 300px;
background-color: red;
display: none;
}
JS:
$(function(){
$(".button").click(function(){
$(this).parent(".block").children(".blocktoopen").show();
});
$("#el").scroll(function(){
$(".blocktoopen").hide(); });
});

The set height of #el was causing the red box to appear in the incorrect location. I have removed this. See the example below:
Change:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
To:
#el {
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
And then you're good to go.

To make your life simpler make the parent .bloc relative so the blocktoopen will be computed relatively. Will help with the responsiveness.
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
bottom: 50%;
background-color: red;
display: none;
right: 0;
}

I can't post comment so here is another try with jsfiddle. I am not sure if you have horizontal scroll as well. remove margin-right from .blocktoopen and add right:0; Also wrap all your internal content inside a div and set the width to maybe 225px
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
display: none;
top: 50%;
bottom: 50%;
right: 0;
}
.internal{
width: 225px;
}

Have you tried to click on 2 buttons without scrolling? Try it. Looks like you were using visibility: hidden; and not display: none;. Maybe trying to set the position: relative; ...
Just seen the jquery script. Show() and hide() appears to work as visibility css property.
If u look with Chrome DevTools the jsFiddle example you will see that you can't see the red boxes but they are still there.

JQuery drop functionality not working as expected?

I've been trying to implement drag and drop functionality using JQuery. I've got 3 'draggable' divs and 3 'droppable' divs. Div with id 'draggable1' should be accepted by div with id 'droppable1' and so on. However, it only works for one pair of the divs(draggable1 and droppable1). It doesn't work for the other two.
I think it's somehow related to the css positioning. When I don't set the margin properties for the individual divs, it works. However, if I want to position the divs elsewhere, the functionality doesn't work anymore.
Here's a jsfiddle I've created: https://jsfiddle.net/3ews8j8x/
HTML
<center><h3>Drag and Drop</h3></center>
<div class="wrap">
<div class="draggables" id="draggable1"></div><br>
<div class="draggables" id="draggable2"></div><br>
<div class="draggables" id="draggable3"></div><br>
</div>
<div id="droppable1"></div>
<div id="droppable2"></div>
<div id="droppable3"></div>
CSS
body{
margin: 0;
}
.wrap{
width: 400px;
height: 300px;
background: #e3e3e3;
position: relative;
margin-top: 80px;
}
.draggables{
width: 20px;
height: 20px;
margin: auto;
position: absolute;
margin-left: 30px;
}
#draggable1{
background: #003366;
position: relative;
}
#draggable2{
background: #ffff00;
position: relative;
margin-top: 90px;
}
#draggable3{
background: #ff0000;
margin-top: -150px;
margin-left: 220px;
}
#droppable1{
width: 50px;
height: 50px;
background: #0000FF;
margin-left: 600px;
margin-top: -200px;
}
#droppable2{
width: 50px;
height: 50px;
background: #008080;
margin-left: 700px;
margin-top: -50px;
}
#droppable3{
width: 50px;
height: 50px;
background: #00cc00;
margin-left: 800px;
margin-top: -50px;
}
Javascript code is provided in the link.
I want to know why it doesn't work when I try to change the positioning of the divs. Can it not be done or am I doing something wrong? I've been stuck with this problem for over 3 days now. Any help would be appreciated.
Thank you in advance.

So there were a few fundamental errors. Firstly the .draggables are set to position:relative; These need to be absolute. You were positioning these .draggables with margins, you should be positioning them with top & left:
JSFiddle
.draggables{
width: 20px;
height: 20px;
position: absolute;
}
#draggable1{
background: #003366;
}
#draggable2{
background: #ffff00;
top: 90px;
}
#draggable3{
background: #ff0000;
top: 150px;
left: 220px;
}

Is there a way to start css transition without using trigger events?

I looked for hours on the internet but didn't find anything about starting css transition without using trigger events.. I'm not using it for a website but for a kind of advertisement.
this is what i got: [(jsfiddle)][1]
body{
width:1920px;
height:1080px;
margin:0;
padding:0;
background: #FFF;
}
#box{
position: absolute ;
left: 0px;
top: 0px;
width: 800px;
height: 140px;
border:solid 5px #000;
transition: width 5s linear 2s;
overflow:hidden;
}
#box:hover{
left: 0px;
height: 140px;
width: 0px;
}
img{
display: inline-block;
left: 100px;
margin-top: 20px;
width: 100px;
height: 100px;
position: absolute
}
.song1{
position: absolute;
left: 250px;
margin-top: 20px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
.song2{
position: absolute;
left: 350px;
margin-top: 40px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
</style>
<script>
</script>
</head>
<body>
<div id="box">
<img src="/Users/ts/Desktop/1.png" class="album">
<div class="song1">NOW --> </div>
<div class="song2">NEXT --></div>
</div>
</body>
</html>
Hope someone can help me

You can replicate your width animation using keyframes. The animation would still start on page load (or other trigger, like adding a class, which is something you want to avoid), but the difference is that with keyframes you can completely control when the actual visible animation starts.
For example, you can set a 15 second animation, and set the keyframes from 0% to 66% to be the same (static) and only do the width animation between 67% and 100% (which equals to 10-15 seconds).
Helpful resources:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes

No. In programming, you have to have a trigger to do something. Now, that trigger can be a set amount of time, which would not require a click, scroll, etc. There is a good question about timing here.

Positioning <div> element at center of screen

I want to position a <div> (or a <table>) element at the center of the screen irrespective of screen size. In other words, the space left on 'top' and 'bottom' should be equal and space left on 'right' and 'left' sides should be equal. I would like to accomplish this with only CSS.
I have tried the following but it is not working:
<body>
<div style="top:0px; border:1px solid red;">
<table border="1" align="center">
<tr height="100%">
<td height="100%" width="100%" valign="middle" align="center">
We are launching soon!
</td>
</tr>
</table>
</div>
</body>
Note:
It is either way fine if the <div> element (or <table>) scrolls with the website or not. Just want it to be centered when the page loads.

The easy way, if you have a fixed width and height:
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}​
Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.

With transforms being more ubiquitously supported these days, you can do this without knowing the width/height of the popup
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Easy! JSFiddle here: http://jsfiddle.net/LgSZV/
Update: Check out https://css-tricks.com/centering-css-complete-guide/ for a fairly exhaustive guide on CSS centering. Adding it to this answer as it seems to get a lot of eyeballs.

Set the width and height and you're good.
div {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
}
If you want the element dimensions to be flexible (and don't care about legacy browsers), go with XwipeoutX's answer.

It will work for any object. Even if you don't know the size:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Now, is more easy with HTML 5 and CSS 3:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<div>TODO write content</div>
</div>
</body>
</html>

Use flex. Much simpler and will work regardless of your div size:
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>

If you have a fixed div just absolute position it at 50% from the top and 50% left and negative margin top and left of half the height and width respectively. Adjust to your needs:
div {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-left: -250px;
margin-top: -150px;
}

I would do this in CSS:
div.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
then in HTML:
<div class="centered"></div>

Now you can do this using grid layout with fewer lines of code.
.center-this{
display: grid;
place-items: center;
align-content: center;
}
<div class="center-this">
<div>
Hello
</div>
</div>

try this
<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
<tr>
<td>
<div style="text-align: left; display: inline-block;">
Your Html code Here
</div>
</td>
</tr>
</table>
Or this
<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
<div style="display: table-row">
<div style="display: table-cell; vertical-align:middle;">
<div style="text-align: left; display: inline-block;">
Your Html code here
</div>
</div>
</div>
</div>

If there are anyone looking for a solution,
I found this,
Its the best solution i found yet!
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
http://dabblet.com/gist/2872671
Hope you enjoy!

Another easy flexible approach to display block at center: using native text alignment with line-height and text-align.
Solution:
.parent {
line-height: 100vh;
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
line-height: 100%;
}
And html sample:
<div class="parent">
<div class="child">My center block</div>
</div>
We make div.parent fullscreen, and his single child div.child align as text with display: inline-block.
Advantages:
flexebility, no absolute values
support resize
works fine on mobile
Simple example on JSFiddle: https://jsfiddle.net/k9u6ma8g

Alternative solution that doesn't use position absolute:
I see a lot of position absolute answers. I couldn't use position absolute without breaking something else. So for those that couldn't as well, here is what I did:
https://stackoverflow.com/a/58622840/6546317 (posted in response to another question).
The solution only focuses on vertically centering because my children elements were already horizontally centered but same could be applied if you couldn't horizontally center them in another way.

try this:
width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;