I want to use the label for trick to create custom file input:
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
}
<section>
<label for="test">
<input type="file" id="test">
<button>Click me</button>
</label>
</section>
But when I click the button inside the label it doesn't not open the file popup, only when I click outside it's working. How can I do this?
<section>
<label for="test">
<input type="file" id="test">
<button onclick="document.querySelector('#test').click()">Click me</button>
</label>
</section>
You can trigger a click Event on your button that simulates a click on the input
Input should be in the front of button element and set the with as the width of button.
See the snippet, I made some change.
input[type="file"] {
opacity: 0;
overflow: hidden;
position: absolute;
width: 61px;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
position: relative;
}
<section>
<label for="test">
<input type="file" id="test">
<button>Click me</button>
</label>
</section>
You can give the label inside the button tag and try it.
Be sure to reset the button padding and give styles to the label tag.
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
}
button {
padding: 0;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
padding: 1px 7px 2px;
}
<section>
<input type="file" id="test">
<button><label for="test">Click me</label></button>
</section>
JSFiddle link
Related
I have 4 Html inputs, in each line two. My problem is now: I can´t change the position of all of these inputs. The Css part looks so:
.calculator-menu-container {
background-color: #1b1b23;
width: 725px;
height: 150px;
border: #fff solid 2px;
border-radius: 10px;
position: absolute;
top: 25%;
margin: 10px;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 75px 75px;
gap: 0px 225px;
justify-content: flex-start;
align-items: flex-start;
}
.mint-price-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
position: absolute;
top: 10;
margin: 10px;
border-radius: 5px;
color: #fff;
}
.quantity-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
.gas-limit-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
.custom-interval-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
This is the Html part for the inputs:
<div class="calculator-menu">
<div class="calculator-menu-container">
<div class="mint-price-input">
<h2>Mint Price</h2>
<input type="text" placeholder="Eth">
</div>
<div class="quantity-input">
<h2>Quantity</h2>
<input type="text" placeholder="Units of Tokens">
</div>
<div class="gas-limit-input">
<h2>Gas Limit</h2>
<input type="text" placeholder="Units of Gas">
</div>
<div class="custom-interval-input">
<h2>Custom Interval</h2>
<input type="text">
</div>
</div>
</div>
And my output looks so:
I don´t know now how can I move these 4 inputs more at the top from the container with the white border. What can I do? Have anyone an idea?
I searched already in the internet and tryed much things like "position" and much more. But anything wouldn´t worked.
You need to remove the postion:absolute; , top: , bottom: CSS properties.
As you have mentioned you need to display 4 input boxes in 2 rows containing 2 each, so you need to club them in separate <div> tags along with their respective headings.
You need to change the height of the <div> tag that contains all the other tags within it. (I would suggest using relative CSS units like 'em' or 'rem' which will help in scalability.)
I have attached my version of code with some changes. You can refer to it.
body {
background-color: #1b1b23;
}
.calculator-menu-container {
background-color: #1b1b23;
width: 40rem;
height: 20rem;
border: #fff solid 2px;
border-radius: 10px;
margin: 10px;
display: grid;
grid-template-columns: repeat(2,1fr) ;
gap: 5rem;
color: #fff;
}
.calculator-menu-container h2 {
display: flex;
padding: 10px;
}
.calculator-menu-container input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
<body>
<div class="calculator-menu">
<div class="calculator-menu-container">
<div>
<div class="mint-price-input">
<h2>Mint Price</h2>
<input type="text" placeholder="Eth">
</div>
<div class="quantity-input">
<h2>Quantity</h2>
<input type="text" placeholder="Units of Tokens">
</div>
</div>
<div>
<div class="gas-limit-input">
<h2>Gas Limit</h2>
<input type="text" placeholder="Units of Gas">
</div>
<div class="custom-interval-input">
<h2>Custom Interval</h2>
<input type="text">
</div>
</div>
</div>
</div>
</body>
remove position: absolute and top bottom ... properties then use margin-top and margin-bottom to move vertically
I am doing a website for college for apart of an assignment. Anyway I created a button and styled it with CSS. I want it so that once the user clicks the button, it will display text then if the user clicks the button again, it will disappear. I tried coding it with Jquery (because its much easier) but even though I think it's right it is not showing up the way I want to in the browser. Please help
Jquery
$(document).ready(function() {
$("Belfastbutton").click(function() {
$("Belfastcontactdetails").toggle();
});
});
#Belfastbutton {
position: absolute;
color: green;
top: 310px;
left: 130px;
height: 40px;
width: 120px;
background-color: #e0e0d1;
border-radius: 5px;
padding: 5px;
}
#Belfastcontactdetails {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="Belfast">Belfast</h1>
<button id="Belfastbutton">Click for Details</button>
<p id="Belfastcontactdetails">
34 Boucher Road, Belfast.
<br> Co.Antrim
<br> BT27
</p>
You're just missing the # when selecting your button and p.
$(document).ready(function() {
$("#Belfastbutton").click(function() {
$("#Belfastcontactdetails").toggle();
});
});
#Belfastbutton {
position: absolute;
color: green;
top: 310px;
left: 130px;
height: 40px;
width: 120px;
background-color: #e0e0d1;
border-radius: 5px;
padding: 5px;
}
#Belfastcontactdetails {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="Belfast">Belfast</h1>
<button id="Belfastbutton">Click for Details</button>
<p id="Belfastcontactdetails">
34 Boucher Road, Belfast.
<br> Co.Antrim
<br> BT27
</p>
For infos:
You could also relay on CSS:
[for="Belfastbutton"] {
position: absolute;
color: green;
top: 310px;
left: 130px;
line-height: 40px;
width: 120px;
background-color: #e0e0d1;
border-radius: 5px;
padding: 0 5px;
text-align:center;
box-shadow:2px 2px 2px 1px gray;
transition:0.05s;
}
#Belfastcontactdetails {
color: green;
display:none;
}
#Belfastbutton:checked ~ #Belfastcontactdetails {
display:block;
}
/* hide input */
#Belfastbutton {position:absolute;
right:100vw;
}
/* add visual behavior to label */
[for="Belfastbutton"]:active {
box-shadow:-2px -2px 2px 1px gray;
}
<h1 id="Belfast">Belfast</h1>
<label for="Belfastbutton">Click for Details</label>
<input type="checkbox" id="Belfastbutton"/>
<p id="Belfastcontactdetails">
34 Boucher Road, Belfast.
<br> Co.Antrim
<br> BT27
</p>
I have a editor. I want to make it fullscreen on certain button click.
Actually I want to acheive CKEditor like maximize feature through jauery,
Please see this link:
http://ckeditor.com/demo
This demo maximize button is there. I want to achieve same using jquery.
Besides from appending (and removing) a CSS class on it when a button is clicked with JavaScript, you can also use a few CSS tricks:
#full-screen-toggler:checked ~ #youreditor {
z-index: 9999;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
margin: 0px;
}
#youreditor #fslabel::after {
content: "enter fullscreen";
cursor: pointer; /* optional */
}
#full-screen-toggler:checked ~ #youreditor #fslabel::after {
content: "exit full screen";
}
/* Styles for preview */
#youreditor { background: green; padding: 10px; }
#youreditor #fslabel::after { color: white; padding: 3px 5px;
border-radius: 2px; border: 1px groove white; }
<input id="full-screen-toggler" type="checkbox" style="display: none;" />
<div id="youreditor">
<label id="fslabel" onclick="" for="full-screen-toggler" />
</div>
Assign the user window's dimension to container, by window.innerWidth and window.innerHeight
css:
.container { width:200px; height:100px; background:#ccc; }
html:
<div class='container'>
<button class='maximize'>Maximize</button>
<button class='minimize'>Minimize</button>
</div>
javascript:
$('.maximize').on('click', function(){
$('.container').css({'width': window.innerWidth, 'height': window.innerHeight});
});
$('.minimize').on('click', function(){
$('.container').css({'width':'200px' , 'height': '100px'});
});
working example
link: http://jsbin.com/raduqihibo/edit?html,css,js,output
Working Fiddle
You could acheive that using custom css class :
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Hope this helps.
$('#maximize').on('click', function(){
$('#container').toggleClass('full-screen');
})
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
div{
width:100px;
height:100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
<button id='maximize'>[]</button>
</div>
I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.
No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/
Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/
Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.
Okay so here is my code:
HTML
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="overlay-2"></div>
<div id="main">
</div>
CSS:
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
visibility: hidden;
}
JS
$('.custom_class_1').click(function() {
$('#overlay-2').fadeIn(300);
});
I want to toggle the visibility of #overlay-2 when I click on my button ".custom_class_1"
How can I do this?
Not sure if visibility: hiddenis the route to go in the css. But I do want it hidden on page load as it would cover the entire screen with a dark overlay.
Any help would be much appreciated!
Thanks
If you are using JQuery then use the .hide() method:
$("#overlay-2").hide();
http://api.jquery.com/hide/
This should work:
$('.custom_class_1').click(function() {
$('#overlay-2').toggle();
});
And in your main css, as others have suggested you should use Display: none in place of Visibility: hidden
Use display: none; instead of visibility: hidden;
Here is a pure CSS solution - FIDDLE
HTML
<input type='checkbox' id='inputstyle'></input>
<div class='centerme'>
<label for="inputstyle"><span>Click Me</span></label>
</div>
<div class='hideme'></div>
CSS
.centerme {
width: 80px;
margin: 0px auto;
}
.hideme {
width: 100px;
height: 100px;
background-color: red;
margin: 10px auto;
}
.clickme:active > .hideme {
display: none;
}
input[type=checkbox]:checked ~ .hideme {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type="checkbox"] + div label span {
display:inline-block;
width:80px;
height:30px;
background-color: gray;
border-right: 2px solid black;
border-bottom: 2px solid black;
line-height: 30px;
color: white;
text-align: center;
}
From THIS excellent page.