I have a 3-columns template in my web application.
Imagine that the right-side div is <div id="right"> In some pages I want to disable all contents in this div using another div that has a transparent background.
How can I do it?
(please tell me your suggestions with a click on <input type="button" id="btn" value="Disable" /> as a handler)
HTML:
<div id="rigth" style="position: aboslute; left: 999px; top: 10px;">Whatever</div> -> your style here... I used some random values
<div id="rigthCover" style="position: aboslute; left: 999px; top: 10px; opacity: 0.3; background: #fff; display: none;">Whatever</div> -> same as the before one, works in mozilla/chrome, you have to filter opacity for IE (alpha filter, google it you find it fast)
<input type="button" id="btn" value="Disable" onclick="disable()" />
Javascript:
function disable()
{
document.getElementById("rightCover").style.display = "block";
}
Related
I've got a stepper component like this
Note the DOM is something like
<div class="my-stepper">
<button>-</button>
<input type='number' />
<button>+</button>
</div>
I was using .my-stepper:focus-within to ensure that the whole stepper looks focused when you're in the the input
But I don't like that when you focus a button, you end up with a doubled up focus
I was hoping to use something like .my-stepper:focus-within:not(button:focus) to ensure that if the focus is on the input, container should look focused, but if focus is on a button, the container should NOT look focused.
How can I get the effect I'm looking for without changing my DOM?
:has() should give you what you want. Though keep in mind the browser support isn't 100% currently. But I think this falls nicely under progressive enhancement.
MDN
.my-stepper:focus-within {
outline: 1;
}
.my-stepper:has(button:focus) {
outline: 0;
}
consider extracting your buttons outside of container. This will let you focus within stepper only:
.box {
position: relative;
width: 100px;
}
.btn-layer {
top:0;
position: absolute;
}
.minus {
left: 0;
}
.plus {
right: 0
}
input {
width: 20px;
}
<div class="box">
<div class="my-stepper">
<input type='number' />
</div>
<div class="btn-layer">
<button class="minus">-</button>
<button class="plus">+</button>
</div>
</div>
I would like to get the effect of a square image that when you click it you will be able to select another image from your files to replace that image.
So I have this image div:
<div class="uploader boxCorners">
<div class="imagePreview"> <img src="http://i.pravatar.cc/500?img=7"/></div>
</div>
And when clicking the imagePreview I need to be able to upload another image.
I know you upload a file with:
<input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
How to set the image to be the input (without getting that ugly upload button) and replace it with the new one?
You could try something like this:
Create relative container
Stretch absolutely positioned file input to the corners of the parent container
Set pointer-events: none on the image, so the click reaches the input
.imagePreview {
position: relative;
}
.imagePreview img {
pointer-events: none;
}
[type="file"] {
cursor: pointer; /* <-- Let people know it's clickable */
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="uploader boxCorners">
<div class="imagePreview">
<img alt="Super cute cat" src="http://placekitten.com/200/200" />
<input type="file">
</div>
</div>
jsFiddle
I am fairly new and just experiencing with some html/css . I was planning to make a login screen pop up in the middle of when a user clicks "login".
i've set up a div which is hidden on the screen and i want to make it visible when the user clicks on "login"
the problem i'm having is making the Div visible again . Here is the CSS:
#loginscreen {
position: absolute;
width: 400px;
height: 500px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid black;
border-radius: 40px;
background-color: lightgrey;
visibility: hidden;
z-index: 1000;
}
.loginbtn:active + #loginscreen
{
visibility: visible
}
:active only works for as long as the element is being clicked. As soon as the click is no longer being held the element will no longer be active.
Try using Javascript to do this, for example:
<button type="button" onclick="document.getElementById('<id-of-div>').style.visibility = 'visible'"> Login </button>
Where <id-of-div> is whatever id you have assigned to the div you wish to make visible.
You cannot trap a user event ("click") without using javascript (or, better yet, jQuery). As a beginner, I first suggest you use jQuery rather than pure javascript. For one thing, it's much less typing and (imho) far easier to master. You code in jQuery, and behind the scenes jQuery turns that into javascript at runtime. To use jQuery, all you must do is include the jQuery library in the <head> tags of each page, like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
The jQuery to show the login form would look something like this:
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
Here is an example you can use for ideas:
jsFiddle Demo
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
$('#loginscreen').fadeOut(800);
});
div{position:relative;box-sizing:border-box;}
#loginscreen {
position: absolute;
width: 400px;
height: auto;
top:0;
right: 0;
border: 1px solid #ddd;
border-radius: 4px;
background-color: lightgrey;
z-index: 1000;
display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
#headLeft{float:left;width:80%;}
#headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
<div id="logHead">
<div id="headLeft">Login:</div>
<div id="headRight"><div id="logX">X</div></div>
</div>
<div id="logTop">
<div id="logUN"><input type="text" id="username" placeholder="user"/></div>
<div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
</div>
<div id="logBott">
<button>Login</button>
</div>
</div>
<input type="button" id="mybutt" value="Login" />
Since you are new to jQuery, here are some free beginner-level tutorials to get you started. (It's where I learned myself, and they're free)
I found a way to make my own custom file upload control , by placing a fake control over it, and when i click the fake one , i am actually cliking the real control below.
Anyways the image for the browse button is a little to the top.
How can i lower it down a little?
Here is the js fiddle.
JsFiddle
Here is the html and css:
<div>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.jpg" />
</div>
</div>
</div>
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
I believe this is what you are looking for. jsFiddle
CSS
.moveimage
{
position: relative;
top: 3px;
}
Modified HTML
<img class="moveimage" src="search.jpg" />
I just made my search button/icon clickable by adding a transparent button onto the input field. Not sure this is the right way to go about it but I couldn't think of anything else outside of jQuery/javascript which I'm not very experienced with. Seems to work fine except the hidden button isn't totally hidden... I've made the background transparent and said border: none but I can see a little shadow of it. See screenshot below and put on some glasses because it's barely noticeable. Still bugs me very much. I've looked through my stylesheet and can't find any shadow setting for inputs so unsure how to fix this.
HTML:
<div id="SearchForm" style="width: 120px; height: 29px; position: relative; top: 16px; right: 17px; padding-left: 20px;">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form()">
<span class="add-on" style="position: absolute; top: 6px; right: 4px;"><i class="icon-search"></i></span>
<input type="text" class="input-small" name="search_query" id="search_query" placeholder="Search..." value="%%GLOBAL_OriginalSearchQuery%%" title="Search" />
<input type="submit" value="" name="Search" title="Search" style="position: absolute; top: 2px; right: 0; background: transparent; border: none; width: 35px; height: 22px;" />
</form>
</div>
CSS:
input[type="submit"] {
cursor: pointer;
-webkit-appearance:none;
}
That is I guess border-top of the button, or the button is not totally hidden. So you can try this out:
<input type="submit" />
And then use CSS to change the image, to the background-image for the submit button. So when you will click the form will be submitted!
input[type="submit"] {
/* here, you can change the background-image
* background-image: url('../link/to/file.png');
*/
}
If you really wanna get rid of it, then remove the above image, and use it as the background-image of the button. This way you won't have to worry about the button.
You can hide the button using:
input[type="submit"] {
opacity:0.0;
filter:alpha(opacity=00); // for ie..
}
Also, if you provided a link to the website then we might have noticed what was causing the issue, or just the source code.