Me and a guy from work are working on a web application for our clients to log on and manage there details. One of the sections asks the user to upload there company logo but as we all know the html browes button or the tag as its also known is a hard cookie to style. this is how I want it to look:
But the reality is if I put a plain old file tag in there it would look bland, generic and out of place so I Googled for the solution and after a it of hunting I came across this code which yielded the image below the code (Which I also show the file upload without the opacity set to zero):
#divinputfile
{
height:85px;
width:250px;
margin:0px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#divinputfile #filepc
{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:16px;
cursor: pointer;
}
#filepc
{
margin-top: 12px;
}
#fakeinputfile
{
margin-top:-28px;
}
#fakeinputfile #fakefilepc
{
width:250px;
height:22px;
font-size:18px;
font-family:Arial;
}
<body>
<br />
<div id="divinputfile">
<div id="fakeinputfile">
<br />
<input name="fakefilepc" type="text" id="fakefilepc" />
</div>
<div align="right">
<input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/>
</div>
</div>
</body>
This is a basic hack and when I select the styled button I'm really selecting the invisible upload button, then the value of the upload is passed into the test box above to look like its really part of the upload. Two problem with this method and I hoping you'll be able to help me here is
a) Only the button can be click to upload. In most browsers(not including Chrome) you can click into the text box as well as the button to upload the image. Sure with this method the text of the file path is added to the textbox but any alteration to that box wont change the file eg: if you selected file1.jpg to upload but you really wanted file2.jpg, changing the file path in the textbox wont change a thing to the ACTUAL upload element
b) Some browers like Chrome and Opera add the \fakepath\ filepath to the textbox and this is just ugly, so any if statement that can strip this out also would be hugely useful.
Hope you guys can help me with this, if not via code hints then if anyone knows a good JavaScript plug that saves the day.
Thanks
You already have javascript for the textbox to display the new filepath value on change.
That’s where you will have to also remove any /fakepath/ parts etc.
You can also add a click event to the text-box which will activate the file-browse click event.
I can instantly tell you that’s rather easy with jQuery, but I don’t know how one would do it with plain JS.
/e:
In fact, it seems file-input actions can not be triggered. See related question In JavaScript can I make a "click" event fire programmatically for a file input element?
Question a:
No firing the click event. Security and all that. You could add a second invisible upload button just like the first. If one changes, clear out the other. And the hacks pile up...
Question b:
See Kissaki's answer. You'll need some JS to clear out that 2nd invisible field anyhow...
Here is a solution.
Question A is solved by making the <input type="file" /> the full size of your widget, and using divisions to create non-clickable areas.
Question B is solved using the trick I found here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Style the File Upload Input - Example</title>
<style type="text/css">
#file-upload {
position:relative;
top:0px;
left:0px;
width:250px;
height:65px;
overflow:hidden;
padding-top:15px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#file-upload input[type='file'] {
width:250px;
height:65px;
font-size:65px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:15px;
left:0px;
z-index:9;
}
#file-upload input {
width:97%;
}
#file-upload #no-click {
position:absolute;
bottom:0px;
left:0px;
z-index:10;
width:125px;
height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
<input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" />
<div id="fake-file-upload">
<input name="fakefilepc" type="text" id="fakefilepc" />
<div id="no-click"></div>
</div>
</div>
</body>
You might want to worry about graceful degradation... here's the same with the HTML, CSS and JavaScript more cleanly separated which should degrade cleanly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Style the File Upload Input - Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").addClass("js");
$("#file-upload").append("<div id=\"fake-file-upload\">" +
"<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" +
"<div id=\"no-click\"></div>" +
"</div>");
$("#file-upload input[type='file']").change(function() {
var clone = this.cloneNode(true);
clone.type='text';
document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;
});
});
</script>
<style type="text/css">
#file-upload {
position:relative;
top:0px;
left:0px;
width:250px;
height:65px;
}
body.js #file-upload {
overflow:hidden;
padding-top:15px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
body.js #file-upload input[type='file'] {
width:250px;
height:65px;
font-size:65px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:15px;
left:0px;
z-index:9;
}
body.js #file-upload input {
width:97%;
}
body.js #file-upload #no-click {
position:absolute;
bottom:0px;
left:0px;
z-index:10;
width:125px;
height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
<input size="0" name="filepc" type="file" id="filepc" />
</div>
</body>
I was using the following image as the image images/upload_file.gif (and its respective dimensions for everything related thereto)
I believe the following link might help you: "Ajax Upload; A file upload script with progress-bar, drag-and-drop".
Not really ajax, just a clever use of an iframe.
Hope it helps. Code well!
It's tough to do and even tougher to do cross-browser. Webkit (safari/chrome) has a very different way of handling this than the IEs and Mozilla. As shown, you'll end up resorting to a ton of hacks which you'll constantly need to check against each browser as they get released.
One way I've found is to progressively enhance to use a flash plug-in. You only need to check for flash being present and flashblock not blocking the element.
For example: http://www.uploadify.com/demos/ (although this doesn't seem to check for flashblock!)
Related
I'm trying to show an image, where when you zoom in on a particular spot, it should display that particular area completely on the screen. I created a fiddle. I want to view the image to be of the same resolution as shown in fiddle, but when I zoom in, the magnified zone of the picture should fill the entire original picture frame.
Below is the code :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<style>
/* styles unrelated to zoom */
body {
background-color: black;
margin:0 auto;
}
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
background-color: black;
z-index:1000;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:50px;
height:50px;
position:relative;
top:50;
right:70;
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex3 img:hover { cursor:-moz-zoom-in; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='js/jquery.zoom.js'></script>
<script>
$(document).ready(function(){
$('#ex3').zoom({ on:'toggle' });
});
</script>
</head>
<body>
<center>
<span class='zoom' id='ex3'>
<img src='images/cg_layout.jpg' width='918' height='655' alt=''>
</span>
</center>
</body>
</html>
EDIT
The above code works fine in zooming in a particular place now, when I click on view image in Firefox, I can see zoom work there also, and it works perfectly as I want it. What can I do to make zoom work like as in view image.
EDIT1
Now when I click on view image in Firefox, I can zoom this image. When I click the zoom the image the class changes from shrinktofit to overflowing. When I do the next click the image zoomouts from overflowing to shrinktofit. Now how can Get this feature embedded with my image
Here's another variation of the zoom, it's not click but directly hover (A build off of what Hardik did).
http://jsfiddle.net/4CHj2/1/
You can also different examples used here:
http://www.jacklmoore.com/zoom/
Note that there is an external resource hosted on Drive that Hardik attached to his fiddle.
With that code, you are free to test any example on the site as is.
Good Luck!
This problem only occurs on IE8 (not IE8 compatibility mode).
I have a file called sample.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'></script>
</head>
<body style='position:relative;z-index:1'>
<input>Click
<script>
function Popup(url) {
overlay = $("<div style='position:fixed; width:100%; height:100%; z-index:10005'><div style='position:absolute; width:100%; height:100%; background:black; -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\"; filter: alpha(opacity=50);'></div>");
iframe = $("<iframe name='Overlay' style='position:absolute; height:80%; width:80%; top:10%; left:10%;' src='" + url + "'></iframe>");
closebut = $("<img style='position:absolute; cursor:pointer; right:10%; top:10%;' width='24px' height='24px' src='/images/close.png' onclick='RemovePopup()' >");
overlay.append(iframe).append(closebut);
$('body').prepend(overlay);
}
function RemovePopup() {
overlay.animate({top:'100%'},800,'swing', function() { $(this).remove(); });
}
</script>
</div></body></html>
Here is the complete content of test1.html: <html><head></head><body><input></body></html>
So create these 2 files, open sample.htm in IE8, click the link to open the popup, type something in the textbox there, close the popup, try and type in the first textbox. If you can, repeat 2 or 3 times.
Eventually the first textbox becomes disabled.
Can anyone suggest a workaround?
Thanks for any help
Essentially I think this is a focus problem. If you can get the browser into the situation where the <input> seems disabled then you can actually Tab to the <input> and enter a value as expected.
I believe the $(this).remove(); call to remove the iframe at the end of the animation is causing the problem when an element in the iframe has focus. I'd suggest giving the first <input> focus before removing the iframe.
For example, use $('input:first').focus(); if it is the first input. It seems to work in my testing here.
In all browser I use the following css rules, and it works
// it fits the background image to container
background-size: contain;
background-size: cover;
Are there css rules to make it work in IE8 also, or should I use javascript?
In case of javascript I am using jquery.
What is the best way to active my goal?
I had also the same problem but by going through this below link my problem solved
http://css-tricks.com/perfect-full-page-background-image/
There's a jQuery plugin or this javascript fallback with filter
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Check the same page for more cross-browser methods
you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
<div class="frame">
<div class="contents">
page contents
page contents
page contents
page contents
page contents
</div>
</div>
</body>
</html>
css:
html {
background:#000;
}
html, body {
padding:0;
margin:0;
overflow:hidden;
height:100%;
}
.bgimg {
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
.frame {
color:white;
width:100%;
height:100%;
overflow:auto;
}
.contents {
padding:10px;
}
demo site: http://jsbin.com/enevov/1/edit
you can achieve different effects by changing
width:100%;
height:100%;
on .bgimg, to accomplish different effects, depending on whether you want a distortion or not, for instance just width: 100% will make it touch across the top, etc...
hope this helps -ck
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/
Having a problem. Once I drop the image into the left box, it doesnt display.
This is what happens:
Before i drag the image.
http://i.imgur.com/xIWDD.png
After I drag the image. it doesnt display.
http://i.imgur.com/vOOIm.png
the error on chrome says:
GET file:///C:/%22test Dropped
angelo.js:42
leftbox.innerHTML=e.dataTransfer.getData('text');
Here is my HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>angelos site</title>
<link rel="stylesheet" href="main.css">
<script src="angelo.js"></script>
</head>
<body>
<section id="leftbox">
i dare you to drop an image inme.
</section>
<section id="rightbox">
<img id="facepic" src="C:\test\face.png">
</section>
</body>
</html>
Here is my JS.
function doFirst(){
mypic=document.getElementById('facepic');//tell js to recognize facepic.
mypic.addEventListener("dragstart",startDrag,false);//when you start dragging facepic run startDrag function. "dragstart" is keyword in java that recognizes when you start dragging an object.
leftbox=document.getElementById('leftbox'); //tell js to recognize leftbox.
leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("drop",dropped,false);//call function dropped.
}
function startDrag(e){
var code='<img src="C:\test\face.png">';
e.dataTransfer.setData('Text',code);
}
Here is my CSS
#leftbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid blue;
}
#rightbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid green;
}
Seems to work fine for me, though, I'm just guessing what your dropped method looks like in this jsfiddle: http://jsfiddle.net/rgthree/aVrB4/
From above you can see your JS is probabl OK. I'm guessing that your browser isn't liking the local links. Try file:///c:/test/face.png for those img's src attributes, or just use relative paths.
I have a simple web page with a simple puzzle. There are some images that user is supposed to drag to their designated drop zones. I use solution in JavaScript generated by DreamWeaver.
I want to add a JavaScript function that will show a correct.png or wrong.png image next to the image a user just dropped. The straightforward way to do it is to just have correct and wrong div elements for each of the draggable images. But is there a more elegant way?
Another way to put it would be:Write a JavaScript functions Show(commonImageId, nextToImageId) and Hide(commonImageId, nextToImageId) that would be used like Show('correct', 'draggable1');.
Instead of having multiple divs that you show and hide, you can try this solution as well.
Create two styles, each with a different background image set. Whenever you trap the event that a given image should be marked as correct or wrong, simply swap the style of the div, which will have the affect of switching the background image.
Very quick (and in need of some cleanup) sample code below, you've got the right idea with setting the type with a function...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap</title>
<script language="javascript">
function setImage(id, value){
document.getElementById(id).className=value;
}
</script>
<style>
.blank{
width:80px;
height:80px;
float:left;
}
.correct{
background-image:url('correct.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.wrong{
background-image:url('wrong.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.item{
float:left;
height:80px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="correct1" class"blank"></div><div id="item1" class="item">Item 1</div><div class="clear"></div>
<div id="correct2" class="blank"></div><div id="item2" class="item">Item 2</div><div class="clear"></div>
<script language="javascript">
setImage('correct1','correct');
</script>
</body>
</html>