Show warning message upon the overlay div - javascript

I disabled the entire page using the over-lay div and I want to show an warning message upon this overlay div . Please let me know , how to handle this.
If I add add div after overlay div , it showing hidden. I want have this warning message upon this overlay div.
<div id="overlay"></div>
#overlay {
background-color: rgba(0, 0, 0, 0.2);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
width: 100%;
height: 100%;
display: none;
}
$("#overlay").show();
Thanks

I tried this fiddle
Added some HTML, made a sibling to the overlay div
<div id="overlay"></div>
<div id="warning">
I am a warning
</div>
applied almost same css on #warning except the z-index
#warning{
width:200px;
height:20px;
border:solid 1px red;
position:absolute;
display:none;
z-index:1000;
}
and used callback of overlay to show warning div
$("#overlay").show(function(){
$('#warning').show();
});

Related

How to make a div element expand upwards using css and JS

I have found a lot of answers on this, but most of the answers include jquery and dont fully answer my question. I have a DIV with several elements nested within it, and those nested element expand upwards, but the DIV does not. This is what i have:
HTML:
<style>
.botnav {
display:flex;
align-items:flex-end;
height: 0;
width: 100%;
position: fixed;
z-index: 2;
top: 50%;
left: 0;
overflow-y:hidden;
background-color: #111;
transition: height 0.5s;
}
.botnav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: whitesmoke;
}
</style>
<div id='botNav' class='botnav'>
<a href='javascript:void(0)' class='closebtN' onclick='closeBotNav()'>×</a>
</div>
<h1 style='position:fixed;cursor:pointer;font-size:25px;color:ghostwhite;background-color:#111;width:25px;height:25px;top:95%;left:95%;' id='s2' onclick="openBotNav()">^</h1>
Javascript:
function openBotNav() {
document.getElementById('botNav').style.height = '300px';
}
function closeBotNav() {
document.getElementById("botNav").style.height = "0";
}
and as you can see the div will expand down, not up. this is my issue.
Remove top:50% and replace it to bottom:0% on "botnav" class. This will do the trick
Instead of changing styles with js, you could toggle a class that change the styles.
document.querySelector(".btn").addEventListener("click", () => {
document.querySelector(".botnav").classList.toggle("open")
})
.botnav{
background-color:orange;
height:0px;
overflow-y:hidden;
transition-duration:1000ms;
}
.botnav.open{
height:100px;
}
<button class="btn">open/close</button>
<div class="botnav">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Note that if you need 2 different element to open or close your div, you can make one event to open it with .classList.add("open") and an other with .classList.remove("open")

Absolutely Positioned elements Affecting Another elements on delete

I have more than one div that is positioned absolute and dynamically created by clicking on a button. Once clicked, they are placed in a container that is positioned relative, and I have a button on each div that when clicking on it, will delete the div, the problem is when deleting the div, it will affect the others positions.
function create() {
var $home = $('<div class="cabine"></div>');
$("#container").append($home);
}
.cabine { /*class that all div's share*/
position: absolute;
top:5%;
left:10%;
width:135px;
height:135px;
float:left;
background: red;
}
#container { /* Where the div's are placed*/
position: relative;
background-image: url(wall.jpg);
background-color: #FFFFFF;
border: 1px solid #000;
width: 100%;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="create()">Create Cabine</button>
<div id="container"></div>
In html you have #container instead of .container.

javascript dynamically create overlay background

I have a function that when clicked takes the div container and centers it on screen, enlarged with fixed position and z-index of 2. I would like to dynamically create an element to sit z-index of 1 underneath the div with a black background, partially transparent, that hides the main content. How do I create and place this element into the page and delete it afterwards?
This demo has on overlay that's loaded on window onload event (#overlay).
There's a password input in #overlay (#pass is "off")
#overlay will use classList to change it's class to.off once the password is entered, thereby rendering #overlay non-existent (display: none).
var ov = document.getElementById('overlay');
var ps = document.getElementById('pass');
ps.addEventListener('change', function(e) {
if (pass.value === "off" && ov.classList.contains('on')) {
ov.classList.add('off');
ov.classList.remove('on');
} else {
alert('password is incorrect');
}
}, false);
function init() {
ov.classList.add('on');
}
window.onload = init;
#overlay {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
}
.content {
border: 3px solid red;
width: 400px;
height: 200px;
margin: 50px auto;
padding: 10px;
}
p {
font: 600 16px/1.428'Arial' margin: 0 0 15px 10px;
}
#pass {
pointer-events: auto;
width: 100px;
line-height: 20px;
text-align: center;
margin: 25% auto 0;
display: block;
}
.off {
display: none;
}
.on {
display: block;
}
<div id="overlay" class="off">
<input id="pass" name="pass" type="password" placeholder="Enter Password">
</div>
<div class="content">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
I have a function that when clicked takes the div container and centers it on screen
Since you are doing this you have more control over it, All you have to so it is add this part of html along with this div of yours. (your div and this new div must be wrapped inside a parent div)
HTML
<div class="overlay-parent">
<div class="overlay"></div>
/* your div */
</div>
CSS
.overlay-parent{
width:100%;
height:100%;
overflow:hidden;
}
.overlay{
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: black;
opacity:0.3;
}
This should be the structure when you are centering the div to center of the screen. And appending this structure to the body tag will get you the desired result

How to dynicamlly center the center of a div based on screen size

I really thought this would be simple but i'm losing my mind! I just simple want to center a div in the div of the screen. But not that top left of the div to the center of the screen but the center of the div in the center.
Here is my div css
.box
{
padding-top:20px;
padding-left:5px;
background-color: #ffffff;
background-color: rgba(221,221,221,0.5);
border: 1px solid black;
border-radius: 25px;
filter: alpha(opacity=90);
height: 125px;
width: 250px;
z-index: 1;
}
<form id="form1" runat="server">
<div id="box"><div>
</form>
Thanks! I couldnt figure out how to get the html to side in a code block. This is center horizontally and vertically.
Use position:absolute if you need it centred both horizontally and vertically:
#box {
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
/* etc */
}
http://jsfiddle.net/wcFMw/
To center horizontally:
margin:auto;
To center vertically:
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
You could also use position: fixed to make the div centered even when scrolling the page.
Also note that you'll have to use # instead of . to select by id. . is the CSS selector used for class.
JsFiddle
margin:0 auto;
Add this property to your css class.

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/
To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?
If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO
try ..
$backWidth=$(window).width();
$backHeight=$(window).height();
As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>

Categories