I am trying to be able to just show my img class on my view .But also use that img to be able to click on it to pop up the file selector.
How am I able to do so I not sure. I thought might be able to do it with java-script but unsure how. Do not want "No File Selected To Show.
<div class="form-group">
<label for="input-image" class="col-lg-2 col-md-12 col-sm-2 col-xs-12"><?php echo $entry_image; ?></label>
<div class="col-lg-2 col-md-2 col-sm-10 col-xs-12">
<img class="thumbnail" src="<?php echo $image; ?>" style="width:100px; height:100px;"/>
</div>
</div>
<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="$('#file').click();">
with jQuery
or without it:
<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="document.getElementById('file').click();">
File selector is raw behavior of browser,you can only emulate the "Raw File Input" by image background and hide the raw input button by setting "opacity" style.
Refer: the profile setting page in twitter, use chrome debugger to look into elements and styles.
https://twitter.com/settings/profile
this is a sample code taken from the folllowing Source
css:
<style>
.element{
background-color:red;
width:200px;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
width:200px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
html:
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload">
<div class="element">Upload</div>
<input id="uploadBtn" type="file" class="upload" />
</div>
js:
<script>
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
</script>
Related
HTML
<div class="dep-adm-inp" <?php if(!empty($adm_f) || $adm_f != "") echo "style='display:block'"; ?> id="fees-inp">
<label>Admission Fees(<i class="fa fa-inr"></i>)</label>
<div class="input-group">
<span class="input-group-addon remove-inp"><i class="fa fa-close"></i></span>
<input type="text" class="form-control expected" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Amount Expected">
<input type="text" class="form-control paid" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Paid Amount">
</div>
</div>
Javascript
$(".dep-adm-inp").hide();
the div is hidden when page loads but if the php variable is not empty then i want to show the div when.
set the class variable dep-adm-inp as hidden by default in css. If the variable $adm_f is not empty, set style='display:block;'. With this logic you don't need to call the statement $(".dep-adm-inp").hide(); in your javascript. This way the div will be shown only if the variable $adm_f is not empty.
.hide() method sets display:none; on your element.
You can override it by setting display: block!important; (or whatever your display property is) in CSS:
setTimeout(() => {
$('.item').hide();
}, 2000);
.container {
display: flex;
}
.item {
width: 200px;
height: 100px;
background-color: darkgoldenrod;
margin: 10px;
}
/* This makes .item visible even after .hide() */
.item-visible {
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item item-visible">Will be visible</div>
<div class="item">Will be hidden</div>
</div>
I want to make a gallery for my website. I developed the code to add an image, but I want to add an edit button to images, like Facebook.
I want it so when you pass the mouse on the image, you can the see an edit button.
I've searched a lot but without anything helpful.
Here's my code:
<?php
if(isset($_POST['upload_img'])){
$file_name = $_FILES['images']['name'];
$file_type = $_FILES['images']['type'];
$file_size = $_FILES['images']['size'];
$file_tmp = $_FILES['images']['tmp_name'];
if($file_name){
move_uploaded_file($file_tmp,"img/$file_name");
}
}
?>
<html>
<head>
<title>Test upload img</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload Image</label><br>
<input type="file" name="images"><br><br>
<input type="submit" value="upload img" name="upload_img">
</form>
<?php
$folder="img/";
if(is_dir($folder)){
if($handle = opendir($folder)){
while(($file=readdir($handle))!=false){
if($file==='.' || $file==='..')
continue;
echo'<img src="img/'.$file.'"width="150" height="150">
<form>
<input type="file" value="Edit">
</form>
';
}
closedir($handle);
}
}
?>
</body>
</html>
hope this help.
HTML:
<div class="image_container">
<input type="file" class="edit_btn" value="Edit">
<img src="img.jpg">
</div>
CSS:
.image_container{ position: relative; }
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; }
.image_container:hover .edit_btn{ display: block; }
I have implemented the following file upload which is an input-group based on this answer and its source. I need to reset the file input and its text input on the click of "Reset" button. For this I have used the wrap and unwrap methods based on this answer and this comment to reset it. The reset is not working in eclipse but works fine in JSFiddle and Bootply(Not working in IE 11). Can anyone help me find out what's wrong?
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="CustomStyleSheet.css">
<script src="CustomJavaScript.js"></script>
</head>
<body>
<div class="container-fluid">
<form class="form-horizontal" id="fileUploadForm">
<div class="row" style="margin-top:15px">
<div class="form-group">
<label class="control-label col-xs-4 col-sm-4 col-md-4">Select File</label>
<div class="controls col-xs-6 col-sm-6 col-md-6">
<div class="input-group" id="fileGroup">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse <input type="file" id="files" multiple>
</span>
</span>
<input type="text" id="fileName" class="form-control" readonly>
</div>
</div>
</div>
</div>
<div class="row" style="margin-right:15px">
<div class="pull-right">
<button type="button" class="btn btn-default" id="resetFileUpload">Reset</button>
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
</body>
</html>
JavaScript
$(document).on('change', '.btn-file :file', function () {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready(function () {
$('.btn-file :file').on('fileselect', function (event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if (input.length) {
input.val(log);
} else {
if (log) alert(log);
}
});
});
function reset_form_element(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
$('#resetFileUpload').on('click', function (e) {
reset_form_element($('#files'));
reset_form_element($('#fileName'));
e.preventDefault();
});
CSS
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
input[readonly] {
/*background-color: white !important;*/
cursor: text !important;
}
Just to confirm: are you attempting to remove an uploaded file client-side?
Try this in your reset button click event, where the variable "id" is the id of the file upload input. It simply sets the innerHTML of the element to the same element's innerHTML. This works in ie9 and google chrome, I've not had to test other browsers.
By the way, I've no idea why this works (stole it from a web site), if anyone does know please leave a comment.
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML;
Try this
var $input = $('#inputId').parents('.form-group').find('input');
$input.val('').trigger('change');
$input.trigger('cleared');
I just encountered this same issue in my application. For some reason in IE 11, a .reset() on the form does not work to clear out the value. The reset works fine in IE 10, FF, and Chrome though. I was able to explicitly set value="" on the input control in IE 11 and that cleared it.
I couldn't think of any better title, so I will try to explain my question here as clear as possible. I'm quite a newbie in JQuery so this is probably a very easy question.
I have some divs with a button on it. When you click the button, another div should pop-up.
My question is: How can I make the div, which is already open, close when clicking on another button?
I made a fiddle with some example code: http://jsfiddle.net/zuvjx775/1/
And the example code here:
HTML:
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2"value='click!' />
</div>
<div class="show_2">
</div>
</div>
JQuery:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
$('.show_'+id).show();
});
When show_1 for example is visible, and I click on the button in div2, I want show_2 to come up, which it does, but show_1 to dissapear.
Can someone point me in the right direction?
You can hide all divs that their class starts with 'show' before show the one you want. For example:
$('.showDiv').on('click', function() {
var id = $(this).attr('id');
$("div[class^='show']").hide();//find div class starts with 'show' and hide them
$('.show_' + id).show();
});
.test {
border: 1px solid black;
height: 100px;
width: 450px;
float: left;
}
.show_1 {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
display: none;
}
.show_2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
display: none;
}
.wrapper {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2" value='click!' />
</div>
<div class="show_2">
</div>
</div>
Is the structure of the document fixed?
is so... I guess the easiest way of doing this is to just do the following:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
if(id == 1){
$('.show_1').show();
$('.show_2').hide();
}else{
$('.show_2').show();
$('.show_1').hide();
}
})
I have already seen similar threads on SO.
I have index.php on button click url.php get loaded through ajax in the <div> present in index.php
On url.php there are couple of <div>. I want some of them to be visible only after button click. I got solution for this.
But only 1 div become visible rest hidded Is it due to z-index property?
index.php:
<script>
$("#load_url").click(function(){
$.ajax({
url:"url.php",
success:function(response) {
$("#view_port").html(response);
$("#load_url").hide();
}
});
});
function show2() {
//alert("hi");
document.getElementById("txtHint").style.display = "block";
document.getElementById("rateit99").style.display = "block";
document.getElementById("cb1").style.display = "block";
}
</script>
url.php
<body style="height: 560px">
<div class="rateit bigstars" id="rateit99" style="z-index: 1; display:none;" ><b>Rate Me </b></label>
</div>
<label2 color="red" id="l1" style="z-index: 1; left: 438px; display:none; top: 180px; position:absolute" ><b><u>Add comment</u> </b></label2>
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
<div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">
<label>Enter URL: <input type="text" id="t1" value="http://www.paulgraham.com/herd.html" name="sent" style="width: 400px; height:40px;" ></label><br/>
</div>
<div style="z-index: 1;" > <button onclick="show2();"> Get Sentiment </button>
</div>
</form>
<div style="z-index: 1; left: 720px; top: 110px; position: absolute; margin-top: 0px">
</div>
<h4>
<div id="txtHint" align="justify" style="z-index: 3; "> </h4>
</div>
<div class="fb-comments" id='cb1'" ></div>
</div>
</body>
when button Get Sentiment clicked. Only id="txtHint" and lable Rate me appears.
cb1, rateit99 remains invisible, what is the bug here?
Link to full code:
index.php
http://codetidy.com/6857/
url.php
http://codetidy.com/6858/
Its not a answer but because I can not comment-
Actually this is happening because of css conflicts. try to give display none every such element through class and then apply direct style as ur doing. you can also use !important to give higher preference.