I´m implementing a FileUpload and have created <div> with bootstrap button class to make it look better.
But since I did this the input is just clickable at a specific position (above 'aufnehmen').
Can someone tell me how to make the Window open when clicking anywhere on the div?
Here is a fiddle that demonstrates my problem.
.btn-lg{
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
value="">
</div>
You can use label instead of div to wrap file input.
<label for="cameraImg">
.btn-lg {
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="cameraImg" class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</label>
You got a bunch of answers to your problem quickly, but I think it is also important to show you how we found out what the problem is in such a short time, that is, how to debug such problems generally.
If you inspect the element(s) in your developer console and hover over it in the code, you can see the outlines highlighted.
That way, you can see that the input element itself is not as high as the button and that's why any click outside of that area didn't trigger the input's click event.
From that point on, you could have come up with your own solution (setting height: 100% as some answers suggested, or also top: 0; right: 0; bottom: 0; left: 0, etc.).
You can fix this by setting height: 100% on the input:
.btn-lg {
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
border: 1px solid #C00;
height: 100%; /* add this rule */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value="">
</div>
Set width:100%; height:100%; for input.upload it works... check below snippet
.btn-lg{
font-size: 36px !important;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fileUpload btn btn-primary btn-lg">
<span>Foto aufnehmen</span>
<input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)"
value="">
</div>
You can add:
.fileUpload input.upload {
width: 100%;
height: 100%;
}
Related
My message display out of my DIV HTML
How do I resolve this?
I need to display this message within the div. If I repeat this code, it appears in the same place every time, I just want to display it in its own div and not invade others. My big problem it's the display message. Does anyone know how to resolve this?
<html>
<head>
</head>
<body>
jhadfjadfjasf
ajdfhkhasdjfas
ajdfhjadfa
ajdfhkajsdfh
<div class="sidney">
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="220px" height="220px">
<div id="baselayer">
<input type="button" class="testx" value="SubLevel" onclick="showFrontLayer();" />
<input type="button" value="Job Description" onclick="showFrontLayers();"/>
<div id="bg_mask">
<div id="frontlayer">
<div class="containers">
<input type="button" value="X" onclick="hideFrontLayer();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner é a pessoa que define os itens que compõem o Product Backlog e os prioriza nas Sprint Planning Meetings.
</div>
</div>
</div>
<div id="bg_masks">
<div id="frontlayers">
<input type="button" value="X" onclick="hideFrontLayers();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner.
</div>
</div>
</div>
</div>
<style>
.sidney{
width: 250px;
height: 250px;
background-color: black;
border:20px;
}
</style>
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="170px" height="150px">
<style>
#testx{
position: absolute;
top: 0px;
left: 0px%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;}
#bg_mask{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
#bg_masks {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style>
<script>
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}
</script>
<script>
function showFrontLayers() {
document.getElementById('bg_masks').style.visibility='visible';
document.getElementById('frontlayers').style.visibility='visible';
}
function hideFrontLayers() {
document.getElementById('bg_masks').style.visibility='hidden';
document.getElementById('frontlayers').style.visibility='hidden';
}
</script>
</body>
</html>
How do I resolve this?
add position: relative; to this class .sidney (you can find it on line 31)
Hover effect on google font icon disappearing when trying to reach a link embedded in it. I implemented a similar concept but on image and it works perfectly. Pretty sure I am going wrong somewhwere in CSS
$('#LanguageQ').hover(function(){
$('.customtooltip').show();
}, function(){
$('.customtooltip').hide();
});
.customtooltip{
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position:absolute;
left:12%;
width: 36%;
font-size: 0.8vw;
display:none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div>
<div class="customtooltip">Can't find your language? Please contact us</div>
<div class="mandatory">
<div class="Input-icon material-icons"
id="LanguageQ">help_outline</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory"
list="huge_list" placeholder="Languages">
</div>
Expected:
I need to be able to go to the link when the hover text appears.
What I have tried so far:
Created a hidden div to increase the area of the hover able area (can add the code if required)
Any help or pointers will be appreciated. Thanks
Place the .customtooltip div after #LanguageQ div. This is necessary for the css code #LanguageQ:hover + .customtooltip {display: block;} to work.
Make the .customtooltip class's width: 100%;. Or change it's width/position as necessary.
Delete the jQuery code. I'm giving you a css only solution.
Add the following css:
#LanguageQ:hover + .customtooltip {
display: block;
}
.customtooltip:hover {
display: block;
}
.customtooltip{
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position:absolute;
left:12%;
width: 100%;
font-size: 0.8vw;
display:none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
#LanguageQ:hover + .customtooltip {
display: block;
}
.customtooltip:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div>
<div class="mandatory">
<div class="Input-icon material-icons"
id="LanguageQ">help_outline</div>
<div class="customtooltip">Can't find your language? Please contact us</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory"
list="huge_list" placeholder="Languages">
</div>
You can achieve this through many ways, one way is this:
$('.contain').hover(function() {
$('.customtooltip').show();
}, function() {
$('.customtooltip').hide();
});
.customtooltip {
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position: absolute;
left: 20%;
width: 75%;
font-size: 0.8vw;
display: none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mandatory">
<div class="contain">
<div class="customtooltip">Can't find your language? Please contact us</div>
<div class="Input-icon material-icons" id="LanguageQ">help_outline</div>
</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory" list="huge_list" placeholder="Languages">
</div>
Here, I have wrapped your .customtooltip and #languageQ div's together and applied the javascript hover function on the container itself. This way I have included both your elements in the hover function, which was previously including only the #languageQ div only, thus causing it to disappear as soon as you move out of the div.
Another way to work around the issue it to nest your target element (in your case: .customtooltip) inside the hovered one (#languageQ) without the need to use javascript at all. Just using css alone.
#Target:hover, #Hovered:hover + #Target
{
display: block;
}
I have choose file input code,i need to change the text of the choose file and there should be a required keyword this working fine,but i want show the selected file below the button. Here is the fiddle
here is my code:
<form>
<div>
upload
<input type="file" class="hide_file" required>
</div>
<br><br>
<button type="submit" id="save" class="btn btn-default wf-save" >SAVE</button>
</form>
css:
div{
padding:5px 10px;
background:#00ad2d;
border:1px solid #00ad2d;
position:relative;
color:#fff;
border-radius:2px;
text-align:center;
float:left;
cursor:pointer
}
.hide_file {
position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
font-size: 24px;
width: 100%;
}
how to show the file name below the upload button.can anyone suggest how to do.
Actually, it was there. It was just hidden because of your CSS. You may create a new element then it will hold the filename.
$('.hide_file').change(function() {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
$('#filename').text(filename);
});
div {
padding: 5px 10px;
background: #00ad2d;
border: 1px solid #00ad2d;
position: relative;
color: #fff;
border-radius: 2px;
text-align: center;
float: left;
cursor: pointer
}
.hide_file {
position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
font-size: 24px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
upload
<input type="file" class="hide_file" required value="">
</div>
<br><br>
<button type="submit" id="save" class="btn btn-default wf-save">SAVE</button>
</form>
<p id="filename"></p>
Reference from here.
I have fileupload control on my page and I have wrapped it around with fake button.Now I want to change the color of button to black.I tried various way but could not achieve. Here is my button and css:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<div class="col-xs-4">
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload" style="background-color: black" />
</div>
</div>
Please help.
For it to work, you have to put style="background-color: black" to div.fileUpload instead of input#fileUpload.
Code:
<div class="col-xs-4">
<div class="fileUpload btn btn-primary" style="background-color: black">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
Snippet:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-xs-4">
<div class="fileUpload btn btn-primary" style="background-color: black;border:0;">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload" />
</div>
</div>
bootstrap buttons has gradient background-image: linear-gradient... because for changes bg color u must set background-image: none and add tag name
to get a higher priority than bootstrap styles, than add background-color, sorry for my bad english.
div.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
background-color: black;
background-image: none;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Свіжа збірка мінімізованих CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Додаткові теми -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<div class="col-xs-4">
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
I can see you are using Bootstrap buttons (btn btn-primary), in order to change the button background color or hover color. You can right click the button then go to inspect element in your browser. Look in the inspector you will realize bootstrap has some classes that style the button as follows:
Overwrite this in your custom css to style the Bootstrap Button Background Colour
.btn-primary {
color: #fff;
background-color: #000;
border-color: #2e6da4;
}
Overwrite this class to style the Bootstrap Hover Button Attributes
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}
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>