A file input button for all browsers, is this possible? - javascript

Is it possible to use uploadify to allow any user to select a file from the file dialogue and insert it into the file input element of a form? I only need to use uploadify as a way to style the "upload button" as an image.
I have tried other approaches here, here and here. All are not compatible with all browsers.
What else can I use / do to have my file input element as an image?
I would like to have my file input button to look consistent in all browsers.

I can't remember the source of the technique but this seems to be cross-browser. Tested in:
Google Chrome 9
FireFox 3.6
Internet Explorer 6-9
Opera 10
Safari for Windows
Here is the complete code:
HTML:
<div>
<button><!-- this is skinnable -->Pick a file ...</button>
<input type="file" />
</div>
CSS:
div
{
position:relative;
width: 100px;
height: 30px;
overflow:hidden;
}
div button
{
position: absolute;
width: 100%;
height: 100%;
}
div input
{
font: 500px monospace; /* make the input's button HUGE */
opacity:0; /* this will make it transparent */
filter: alpha(opacity=0); /* transparency for Internet Explorer */
position: absolute; /* making it absolute with z-index:1 will place it on top of the button */
z-index: 1;
top:0;
right:0;
padding:0;
margin: 0;
}
The idea is to make the <input type="file" /> transparent and place it on top of some style-able content (a <button> in this case). When the end user clicks the button she will actually click the <input type="file" />.

The simple way to use a "label" tag and "for" property. Like this http://jsfiddle.net/Txrs6/ but in this case we don't see a chosen file.
CODE
<label for="inputFile" class="col-sm-3" style="padding-left: 0px;"><a class="btn btn-info">Выбрать...</a></label>`
<input style="display: none;" type="file" id="inputFile">
Another way with js http://jsfiddle.net/PZ5Ep/

Your best bet in that case would be to use a flash uploader. This would introduce a complete separate control and would have no dependency on the browser. There are plenty of them on the net. Here's one : http://swfupload.org/

If it's only the upload button you want to style, why can't you use CSS? That should work across all browsers.
If you put your code on jsFiddle, I can tell you more about what you can do.

Related

Tooltips work in Firefox but not in Chrome

In my web-app, I implemented some tooltips on buttons with images. In Firefox, they work as expected, that is, they appear right below the button when you hover over that button. However, in Chrome, they appear far left of the button.
CSS:
.tooltip {
display: none;
}
button:hover .tooltip {
display: block;
position: absolute;
background: #ffffaa;
z-index: 10;
padding: 2px;
font-style: italic;
font-family: Times;
}
HTML:
<div id="simulationButtons">
<button id="playPauseButton">
<img
src="play.svg"
alt="play"
id="playImage"
style="display: inline"
/>
<img
src="pause.svg"
alt="pause"
id="pauseImage"
style="display: none"
/>
<span class="tooltip">Play/Pause</span>
<!--Didn't know modern browsers don't display alts automatically
when you hover over an image.-->
</button>
This works as expected in Firefox (this is Firefox for Android, but it looks similar on desktop):
However, for some reason, in Chrome, tooltips are moved to the left of the button (this is Chrome on Android, I haven't managed to install Chrome on my Linux, but I think it will look similar in Chrome on desktop):
So, what is going on in Chrome? How can I fix it?
You need to set position:relative in <button id="playPauseButton"> or in <div id="simulationButtons">
You are using position:absolute to position the tooltip so the parent "button" should have position:relative
Add this code in your css and it will work fine.
#playPauseButton, #fastForwardButton, #singleStepButton, #stopButton {
position: relative;
}
Whenever you make new buttons like these, make sure to add position:relative to that button too.

Trying to make a button in html with javascript

I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website
You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}
It may possible that path to your images not found at other place.

How to style the microphone of the Google Chrome speech input control

Google Chrome has the following input control:
More info on how to use it can be found here.
I need to make the microphone bigger. It would also be nice if I could use a custom image for the microphone. I found that adjusting the width and height of the input element does not make the microphone larger.
#speech {
-webkit-transform: scale(4,4)
}
This is what I worked out:
and the html for that is:
<html>
<body>
<img src="Capture.JPG" alt="Smiley face" width="80" style="margin-top:70px; margin-left:120px; position:absolute;" />
<input style="-webkit-transform: scale(8,8); opacity:.001; width:50px; border:none; margin-left:00px; margin-top:100px;" type="text" speech="speech" x-webkit-speech="x-webkit-speech" />
</body>
</html>
anyways now I could use the events:
onspeechchange="processspeech();"
onwebkitspeechchange="processspeech();"
to place the text where appropriate...
Currently, the only way to increase the size of the microphone is to increase the font-size of the input element.
HTML:
<input type="text" id="speech" value="some text here" x-webkit-speech />
CSS:
#speech {
font-size: 20px;
}
For people still looking for this: I managed to style it by setting the opacity of the speech element to 0, then overlaying it with a visible element that you can style yourself. Then I used jQuery to trigger a click on the speech element when you click on your overlayed element :) This way you can even use your own image!
As a note, as far as I know there will be an edited version of the W3C spec for the speech element in the future, that should give developers more control over the look and feel (source: http://www.adobe.com/devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html)
In Webkit you can enter the shadow DOM to alter the layout of default browser elements. This is how I did it using a custom icon font from icomoon.io (font "Font Awesome" has a nice microphone), but you can of course also use any background image on the input::-webkit-input-speech-button element itself.
input::-webkit-input-speech-button {
-webkit-appearance: none; /* Important to undo default styling. */
height: 100%;
padding: 0 1em;
cursor: pointer;
&:before {
content: '\e601';
font-family: icomoon;
}
}

Resize the input type="file" browse button in firefox?

Is there anyway using CSS or JS that you can resize the input type="file" Browse button in firefox?
I know you cannot change the text of the button but all I need to do is make this button wider for firefox. So using a -moz css rule would be perfect.
Styling file input buttons is very limited for security reasons. There are some workarounds, but none are perfect. Check out this post on QuirksMode:
http://www.quirksmode.org/dom/inputfile.html
Edit: As others have noted firefox does not suuport the method below I would refer to the following link http://www.quirksmode.org/dom/inputfile.html
The following is a pretty simple solution. I would advise adding a class to the label though. Basically you style the label instead of the input avoiding cross browser issues and width and height bugs:
<label>
<input type=file>
</label>
CSS
label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;}
label {background:green;width:200px;height:100px;display:block; /* more styles here */}
http://jsfiddle.net/DVLxp/
Here is the main idea: http://www.quirksmode.org/dom/inputfile.html
And this might be helpfull for resizing input area
input{font-size: 100px;}
Works fine for me.
What websites often do when they need a "customized" file upload widget: have the "real" file upload field hidden. Add a text field that will show the current value of the file upload field and a button that will trigger file selection in the file upload field. Here an example:
<input id="file" type="file" style="display: none;"
onchange="document.getElementById('text').value = this.value;">
<input id="text" type="text" readonly><input type="button"
onclick="document.getElementById('file').click();" value="Choose file">
Try this one: http://jsfiddle.net/CnHj5/
Works in Firefox and a nice pointer cursor is available.
HTML:
<div class="upload">
<input class="upload" type="file" />
</div>
CSS:
input.upload {
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
position: absolute;
right:0;
font-size: 200px;
cursor: pointer;
}
div.upload {
background-color:green;
width:200px;
height:100px;
position: relative;
display:block;
overflow:hidden;}
As for me, Zhenya Shevchenko gave one of the best working solutions. Using his method, we can create cross-browser file input button: http://jsfiddle.net/JHcFR/
<div class="fileInput">
<input type="file" />
</div>
.fileInput {
overflow: hidden; width: 500px; height: 200px; background: red;
}
.fileInput input {
font-size: 200px; opacity: 0;
float: right; filter: alpha(opacity=0); /*IE*/
}

Javascript DIV Background issue

I currently have a web site in which I am using some Javascript to change the Background of a DIV.
The DIV is defined as follows :
<td style="width: 750px; height: 300px; background-color: Black; border: 0px;">
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
and the Javascript I am using is as follows :
var docEl = document.getElementById('outerscreen');
docEl.style.backgroundImage = "url('pics/intro.gif')";
My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.
Can anyone shed any light on what the problem is and how I might be able to resovle this.
Thanks in advance
Chris
Assuming that you have some content inside #mainscreen, the most likely explanation is that #mainscreen is floated, so it isn't used when calculating the height of it's parent, but that you have a Doctype (or no Doctype at all) that triggers Quirks mode in Internet Explorer, so it doesn't allow floats to fall through the bottom of their containers.
Add a Doctype that triggers standards mode (so IE will be more consistent with other browsers)
set overflow: hidden on #outerscreen
This does work in FF4 and Opera10. You need to specify the height and width of <div id="outerscreen">, or have some content inside which takes up screen real estate for this effect to be visible.
Although i don't recommend using a table for your layout here is a solution that works better and gives you more control
<style type='text/css'>
.outerCell {
width: 750px; height: 300px; background-color: Black; border: 0px;
}
.outerScreen {
background-image : url('pics/intro.gif');
height: 300px;
}
</style>
<td class='outerCell' >
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
now the javascript:
var docEl = document.getElementById('outerscreen');
docEl.className = "outerScreen";
Having your style defined in a css is more flexible when you want to make changes,
code seperation is always good
I think the problem is with the '
try:
docEl.style.backgroundImage = "url(pics/intro.gif)";

Categories