I have a survey that I am creating, but it may be difficult to complete if the respondents do not have additional information about the topic.
I would like to create a button to redirect the respondents to a specific pdf for more information.
I can very easily have them click the link. But a button would be more professional and pleasing to the eye.
Here is the link: http://sfrc.ufl.edu/Extension/FFSnl/FL_Land_Steward_5.1.pdf
Add this to your question text (in HTML mode):
<button type="button" onclick="window.open('http://sfrc.ufl.edu/Extension/FFSnl/FL_Land_Steward_5.1.pdf');">Click me</button>
You can add the following to the HTML view of your question or "Source View" of the Rich Content Editor (You may consider making a new descriptive text question for the button alone). It essentially is a link that opens the PDF in a new tab but looks like a button.
<div style="display:block; background: #0077CC; padding: 8px 15px; border-radius:3px; color: #fff; width:95px; font-family: sans-serif; text-align: center">View PDF</div>
What the button would look like
You can edit the style attributes to change the background color, font color, or whatever else you want to change.
I have a problem, i have 2 buttons that you can see below. I need to add errorIcon but want to maintain the looks in button 1. Button 1 have browser specifik style, i have done nothing to button1.
HTML:
Button1: <input type="button" value="Button1" />
Button2: <input type="button" class="errorIcon" value="Button2" />
CSS:
.errorIcon{
background: url("errorIcon.png") no-repeat scroll top left;
padding-left: 10px;
width: 10px;
}
Please note that i cant use example below because it triggers something i cant do anything about. Something else in the program runs on "button". This example gives me Button1 with error img as i want it to be.
<button><span class="errorIcon></span></button>
You need to style both buttons cause of you leave first button unstyled it will change look depending on browser and system. So style both of them
You can style button using gradients like this
http://www.cssbuttongenerator.com/
And add image via ::before or ::after
I'd like to create a file upload field that displays an input type=text (displaying the filename), with the upload button replaced with a custom image.
Something like this:
A simple solution without any hacks would be appreciated.
You won't find any solutions that aren't hacks due to how browsers handle the file upload field. Due to security concerns they restrict the amount of styling you can do to them to prevent a malicious website from making them look like something they are not. How limited you are varies from browser to browser but without using JavaScript and hacky tricks you will not be able to style a file upload field to your liking through straight HTML/CSS.
<INPUT type="image" class="myButton" value="">
.myButton {
background:url(YOUR IMAGE) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
using buttons
<button type="submit" style="border: 0; background: transparent">
<img src="/images/Btn.PNG" width="90" heght="50" alt="submit" />
</button>
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (with configurable classes), similar in all browser and will show selected file names (or selection errors) beautifully.
Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
I am making a web app that plays sounds. The interface I would like to use is that of a piano/keyboard. User will press a key and sound is played.
I have used <button> to call the functions and embedded images of keys inside them but it does not look good and has a border around each key.
<button onclick="freqA4()">
<img src="keyboardpics/key1.jpg" />
</button>
Is there a GUI designer for HTML5 that will allow me to use attratcive high res images and assign events to them?
Or should I use canvas to animate a keyboard and assign function calls to certain areas like image mapping?
A large emphasis of this app will be on the appearance.
Any help would be great as I have very little experience in html/html5.
First include this in your HTML: http://meyerweb.com/eric/tools/css/reset/
Define each button as CSS style
.button {
width: <button width>
height: <button height>
}
#key1 {
background: url('/keyboardpics/key1.jpg') no-repeat
}
#key2 {
background: url('/keyboardpics/key2.jpg') no-repeat
}
In your HTML
<div id="key1" class="button"></div>
<div id="key2" class="button"></div>
...
You can use normal links links (<a> tags), or you can use input elements of type image <input type="image" src="keyboardpics/key1.jpg" onclick=freqA4()" />.
You can of course use CSS to style any of them (even the button you use)
How can I internationalize the button text of the file picker? For example, what this code presents to the user:
<input type="file" .../>
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
See the following links for some approaches:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.quirksmode.org/dom/inputfile.html
http://www.dreamincode.net/forums/showtopic15621.htm
Pure CSS solution:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file (Click me)</label>
source: http://tympanus.net/codrops
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what you want it to.
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
There are very hacky workarounds that attempt this (e.g. like those mentioned in #ChristopheD's answer), but none of them truly succeed:
To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
Many of them look nothing like the native control, so might look strange on non-standard devices.
Keyboard support is typically poor.
An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
Modern browsers support drag & drop into the native file upload control.
Some techniques may trigger heuristics in security software as a potential ‘click-jacking’ attempt to trick the user into uploading file.
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
Sorry. :-(
--
This answer is for those looking for any justification not to localise the file upload control.
You get your browser's language for your button. There's no way to change it programmatically.
much easier use it
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
I could achieve a button using jQueryMobile with following code:
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
Actually, it is possible to customize the Upload File button with its pseudo selector: ::file-selector-button.
Check this for more info: MDN ::file-selector-button - CSS