We Keep Coding

Div overlay dialogue box won't display in Firefox

UPDATE: I was able to force the box and text to work by adding a "height" value in CSS but the BG image won't load in. Inspector shows the image is loading from the correct source but it will not display in Firefox. I tried setting the null check to false and droping the "!" operator from the getElementByID code but that did not fix it.
I made a simple typing game that is supposed to create an overlay with a dialogue box that allows the player to either go back to the selection page or repeat the game. The dialogue box displays just fine in Chrome and Edge (IE) but in Firefox the Inspector shows the box div as collapsed to 1px height.
here is the code:
HTML
...
<div className="overlay" id="overlay_2">
<div className="dialog">
<div className="dialogcontainer">
<img className="dialogbg"/>
<h3 className="dialogtext">Would you like to repeat this quest?</h3>
<h2 className="no">Go back</h2>
<h2 className="yes" onClick={repeat}>Repeat</h2>
</div>
</div>
</div>
...
JS
function endGame() {
var end = document.getElementById('audio_end')!;
(end as HTMLAudioElement).play();
document.getElementById('overlay_2')!.setAttribute("style","display: block; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); z-index: 20");
}
CSS
.dialog {
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%, -75%);
}
.dialogcontainer {
position: relative;
text-align: center;
}
.dialogbg {
position: relative;
width: 500px;
content: url("/Images/Video%20Page/dialog.jpg");
}
.dialogtext {
position: absolute;
width: 70%;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
}
.yes {
position: absolute;
width: 40%;
bottom: 30px;
right: 30px;
cursor: url('/Images/Main%20Menu/mouse2.png'), auto;
}
.no {
position: absolute;
width: 40%;
bottom: 30px;
left: 30px;
cursor: url('/Images/Main%20Menu/mouse2.png'), auto;
}
.yes:hover, .no:hover {
color: #555;
}
The black translucent overlay works fine in Firefox but the box does not show. I have disabled all ad-blockers in Firefox but that wasn't the problem. Any help is greatly appreciated.

Active accordion content pushes everything up

I'm making this accordion: https://codepen.io/rafaelmollad/pen/JjRZbeW but the problem is that when I click on one of the accordion item, the content expands and pushes the title up. I noticed that if the accordion is not vertically centered, then I get the result that I want but I need to center it.
I've added this code to the container in order to center it but it doesn't work:
position: absolute;
top: 50%;
transform: translateY(-50%)
If I remove those lines, the form will position on the top of the page and I'll get the result that I want (without the container being in the center of the page)

Update your container class like
.container {
width: 90%;
max-width: 96rem;
margin: 0 auto;
padding: 1rem;
background: #fff;
position: absolute;
top: 50%;
/* transform: translateY(-50%); */
}
i.e remove transform property, it works exactly like you want.

How to center a scrollable image that is larger than the screen

I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image.
The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.
Here is the fiddle that has some fixup javascript to make it work: http://jsfiddle.net/d3y0b8bd/
The code below will work for smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)
But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
/*aesthetic*/
background-color: red;
}
.lightboxImg {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*aesthetic*/
background-color: blue;
}
html:
<div class="lightboxRoot">
<div class="lightboxImg">
<img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
</div>
</div>

here's a fiddle in which JS is updating the position of scrollTop and scrollLeft, so to set the scroll to center of img.

Figured it out, in retrospect kind of silly: Just make a containing div that can't get any larger than the parent element, and make sure that it has the overflow property set so it gets the scrollbars. then the image inside can get is big as it wants: http://jsfiddle.net/abrady0/d3y0b8bd/2/
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
/*aesthetic*/
background-color: red;
}
.lightboxContainer {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
overflow: auto;
/*aesthetic*/
background-color: blue;
}
and the html:
<div class="lightboxRoot">
<div class="lightboxContainer">
<div>
<img id="imgElt" src="foo"></img>
</div>
</div>
</div>
one thing to fix in this case is that I'd still like the div's scroll centered with pure CSS, but this is a good first step.

How to position a div in the absolute center of a page?

Here's how I'm doing it and it does work:
#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
<div id="myDiv"></div>
But the problem is when I scroll down the page, the div no longer appears in the center because it is positioned 50% off the top relative to the original view port height, not the current one. So I guess I would have to listen for a document scroll event and update the position of the div dynamically. Any idea how to do that?
Basically the effect I'm after is for the div to always be in the center even when the user scrolls.
or maybe there's even a pure css solution?

Use position: fixed; instead of position: absolute;
The positioning (top, left etc) will remain the same, but in relation to the window, and not the document.
http://jsfiddle.net/jasongennaro/25WAg/

You're going to want position: fixed;.
To achieve the div in the center of the screen, you're going to want left: 50%; margin-left: -50px;
Note that the negative margin-left is half of the container's width

#myDiv {
background: red;
width: 100px;
height: 100px;
margin: auto;
position: fixed;
}
#container {
width: 90%;
height: 90%;
}
Then for your HTML :
<div id="container">
<div id="myDiv">DATA</div>
</div>
Tell me if it works.

How to create a modal popup using javascript and CSS

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?

Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.

I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}