I have an angular 4 application with an input and I want to focus on this input when clicking on it. So I want to darken all the page except the input on focus. So I tried to add a div with a black background and 50% opacity.
But the input is always below the div whereas it has a z-index higher.
This is my html code :
<router-outlet></router-outlet>
<div id="blanket"></div>
The CSS code of the blanket :
#blanket {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
z-index: 100;
visibility: hidden;
}
In the component :
<input type="text" class="form-control" style="z-index: 2000000 !important;background-color: #fff" (focus)="focusOnInputName()" (blur)="blurOnInputName()" >
And the 2 functions :
focusOnInputName(){
console.log('focus');
let d = document.querySelector('#blanket');
this.renderer.setStyle(d, "visibility", "visible");
}
blurOnInputName(){
console.log('blur');
let d = document.querySelector('#blanket');
this.renderer.setStyle(d, "visibility", "hidden");
}
When focus or blur, the blanket div appears or disappears but the input is always hidden by the "blanket".
How can I do to have what I want?
EDIT
I want to do the same thing like the bootstrap modal but on the click on an input.
Just add position: relative to the input element.
.container {
position: relative;
width: 500px;
height: 200px;
top: 10px;
left: 50px;
border: #00f solid 2px;
}
.container input {
z-index: 2;
position: relative; /* Add this */
}
.blanket {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,0.6);
}
<div class="container">
<p>Some text</p>
<p>Some other text</p>
<input placeholder="Type something"/>
<p>Some more text</p>
</div>
<div class="blanket"></div>
Related
I have a div with class hide. Its essentially a div with a black background. This div is suppose to hide the food div. So, when you click on the black background, aka if you click on the hide div, it is suppose to make all the hide div's disappear and show the food div. However, my issue is that this is not happening. The hide div is not showing up. Below is my current code:
function make_disappear(){
document.getElementByClassName('hide').style.display = 'none';
}
.main {
position: relative;
display: inline-block;
width: 120px;
height: 120px
margin: 5px;
background: red;
}
.hide {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: url(https://i.imgur.com/Y8B7LsB.jpg);
}
.food {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
<div class="main">
<div onclick="make_disappear()" class="hide"></div>
<div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>
<div class="main">
<div onclick="make_disappear()" class="hide"></div>
<div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>
I like using a delegate pattern when animating/transitioning a bunch of elements of the same type or class. After adding z-index: 1 to the .hide elements to get them "on top" of the images in the stacking order, I add a class of disappear to the body when clicking any of the .hide elements. The CSS handles the rest, fading out all the .hide elements at once. This approach could be used on a wrapper element as well, if body feels too high up in the DOM.
const hide = document.querySelectorAll('.hide');
function handleClick() {
document.body.classList.add('disappear');
}
hide.forEach(el => {
el.addEventListener('click', handleClick);
});
.main {
position: relative;
display: inline-block;
width: 120px;
height: 120px margin: 5px;
background: red;
}
.hide {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: url(https://i.imgur.com/Y8B7LsB.jpg);
z-index: 1;
transition: .5s opacity;
}
.disappear .hide {
opacity: 0;
}
.food {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
<div class="main">
<div class="hide"></div>
<div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>
<div class="main">
<div class="hide"></div>
<div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>
https://jsfiddle.net/2rvte9y3/1/
Your problem is just how the divs are being rendered, the hide divs are being rendered first than the food divs over top of them since they're both have style of position: absolute. Just rearrange their html like this:
<div class="main">
<div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
<div onclick="make_disappear()" class="hide"></div>
</div>
Or change the z-index of the hide divs to be higher than those of the food divs:
.hide {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: url(https://i.imgur.com/Y8B7LsB.jpg);
z-index: 100; /* here */
}
Your JS also won't work, because, as #wentjun has pointed out, document.getElementsByClassName returns a node list. You just need to loop through the list to change each display style like so:
function make_disappear(){
var hideDivs = document.getElementsByClassName('hide')
for (var i = 0 ; i < hideDivs.length; i++) {
hideDivs[i].style.display = "none"
}
}
The getElementsByClassName() returns a NodeList collection of all elements in the document with the specified class name, and in your case, .hide.
Doing this document.getElementByClassName('hide').style without specifying the index will not work as it is a list.
You will need to iterate through the NodeList, or specifically select the index in the nodelist to target it
document.getElementsByClassName('hide')[0].style.display = 'none';
To hide all elements in the NodeList, you may do this:
[...document.getElementByClassName('hide')].map(node => node.style.display = 'none')
One solution is to add a greater z-index to hide elements. Also, note that getElementsByClassName() will return a HTMLCollection, not just one element as you was expecting. So you will have to loop over the collection to apply tthe style to each element.
function make_disappear()
{
var elems = document.getElementsByClassName('hide');
for (let e of elems)
{
e.style.display = "none";
}
}
.main {
position: relative;
display: inline-block;
width: 120px;
height: 120px
margin: 5px;
background: red;
}
.hide {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 99;
background: url(https://i.imgur.com/Y8B7LsB.jpg);
}
.food {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
<div class="main">
<div onclick="make_disappear()" class="hide"></div>
<div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>
<div class="main">
<div onclick="make_disappear()" class="hide"></div>
<div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
</div>
I have fixed positioned div which must be on the top of the page when opened.And it must stretch all over the page.
I have some inputs as a background elements on body.
I want to block/disable and prevent all the keyboard/click events from background elements(inputs).
Here is the code:
https://codepen.io/anon/pen/KyGzmN
<body style="
margin: 0;
">
<div style="
height: 100%;
width: 100%;
top: 0;
left: 0;
background: black;
z-index: 9999;
position: fixed;
background: rgba(0,0,0,0.5);
">
<div style="
height: 100px;
width: 200px;
background: yellow;
margin-top: 100px;
margin-left: 100px;
">My Content In Fixed Div
</div>
</div>
<input>
<input>
<input>
</body>
I can prevent mouse click events but when I press tab it focus the inputs.I don't want that.
I totally disable/block the background elements.How can I do that with css?
I can't use jquery.Maybe pure javascript.But I need that with css.
Add disabled="disabled" to your inputs, statically or using js if it has to change :
var inputs = document.getElementsByClassName('yourClass');
function disable() {
[].forEach.call(inputs , function(input) {
input.setAttribute('disabled', 'disabled');
});
}
function enable() {
[].forEach.call(inputs , function(input) {
input.removeAttribute('disabled');
});
}
https://jsfiddle.net/axn5wvye/8/
Today I come to you with an issue with jQuery / javascript and .fadeToggle();.
So I want to P elements with id.
Please see here:
$("#here").click(function(){
$(".overlay, .popup").fadeToggle();
});
$("#there").click(function(){
$(".overlay, .popup2").fadeToggle();
});
Here is my JSFiddle:
I want, ideally, to have several paragraphs with individual ids so I can add a pop up with differing content!
I'd usually use a custom data attribute for something like this. This way you can reuse the same function no matter how many elements you have...
$('.clickable').click(function() {
var popupTarget = $(this).data('popup');
$('.overlay, '+popupTarget).fadeToggle();
});
/* click overlay to close... */
$('.overlay').click(function() {
$('div').fadeOut();
});
html,
body {
height: 100%;
}
.overlay {
position:absolute;
display:none;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.7);
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.popup, .popup2 {
position: absolute;
width: 300px;
height: 150px;
display: none;
background-color: white;
text-align: center;
/* center it ? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="overlay"></div>
<div class="popup">Some popup text</div>
<div class="popup2">Hello world!!</div>
<!-- add a class to each element and a data attribute to identify the target element... -->
<p id="here" class="clickable" data-popup=".popup">Click 1</p>
<p id="there" class="clickable" data-popup=".popup2">Click 2</p>
I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/
I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image
While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>
The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.
I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)
I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}
I have a div and within that div is an image, and layed on top of those is 2 divs which have jquery hover attached to them (same issue with onmouseover though, so not jquery).
Problem is when the image is loaded, even though the divs are layed on top of the image they won't fire because the image is always on top (even though it isn't actually, and i've tried putting it lower down on z-index but it didn't help).
jquery:
<script type="text/javascript">
$(document).ready(function () {
$(this).find("#largeInset").find(".content").css("width","0");
$("#largeInset").hover (function() {
$(this).find(".content").animate({width: '100%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
$(this).find("#largeArticles").find(".content").css("width","0");
$("#largeArticles").hover (function() {
$(this).find(".content").animate({width: '40%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
});
</script>
Html:
<div class="largeContent">
<img src="<?php echo $img[0]; ?>" border="0" alt="" title="" />
<div id="largeInset">
<div class="content">
[content]
</div>
</div>
<div id="largeArticles">
<div class="content">
<ul> (loop fills this)
<li>
[content]
</li>
</ul>
</div>
<br style="clear: both;" />
</div>
</div>
Is this a known IE bug that I just haven't come accross before? Or is there a bug in my code? When filled with content the largeInset and largeArticles divs should fire on hover and slide out across the image, works in chrome but not IE as IE seems to select the image on top of the divs even though they are actually below it (Would work fine if the image didn't load).
Any ideas? Hopefully I made sense.
CSS:
.articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
.large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
.large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }
.largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
.filler { width: 100%; height: 100%; }
#largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
#largeInset .head { padding: 10px 0; }
#largeInset p { font-size: 0.9em; margin: 5px 10px; }
#largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }
#largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
#largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }
I've solved this for now by adding content to the divs. IE will only fire when you mouseover the content in the div (maybe because position is absolute?). I added a transparent 1px image to the divs, but stretched to 100% x 100%, so you hover over the image and it will fire.
This seems a bit hacked together though
See http://iamnotahippy.com/ice/web/?cat=5 (hover over sides of image)