I have a browse button that I want to edit. Here is how I made it:
<input type = "file" id = "myBrowseButton" class = "BrowseButtons" name = "Browse" />
The button looks like you regular browse button but I want it to look like this:
I have been asking around and doing research, and from what I can tell the only (not incredibly long and time consuming) way to edit this would be to find some utility that will do it for me and mess around with that. Where would I be able to find said utility/ is there another (not extremely time consuming) way to edit this?
This is just little trick, maybe you can use.
I'm using a span to cover the file button.
<script type="text/javascript">
$(function() {
$("#button1").button();
$("#button1").click(function() {
$("#fileUpload1").click();
});
});
</script>
<span id="span1" style="overflow: hidden;width: 300px;white-space: nowrap; display: inline-block;">
<input type="file" id="fileUpload1" name="fileUpload1" size="100" style="width: 400px;"/>
</span>
<input type="button" id="button1" value="Browse Custom 1"/>
This works for me, using Firefox & IE but not in Chrome, because the UI is different.
Second, when using a jQuery dialog with file upload in it, the width of file upload is changed back according to span width. So the trick is to set the width again after opening the dialog:
$("#button3").click(function() {
$('#dialog1').dialog('open');
$("#fileUpload2").width(1000);
$("#span2").width(200);
//$("#fileUpload2").css('margin-left', '300');
});
<div id="dialog1" style="display: none;">
<span id="span2" style="overflow: hidden;width: 300px;white-space: nowrap; display: inline-block;">
<input type="file" id="fileUpload2" name="fileUpload2" size="100" style="width: 400px; margin-left: 300px;"/>
</span>
<input type="button" id="button2" value="Browse Custom 2"/>
This is just a trick, I don't think it works for everyone, sorry if can't help you all. A simple solution for a simple case.
I've started doing all my form buttons (and many links for that matter) using Jquery's UI Button functionality. With a relatively small grouping of files, it automatically rounds, styles, and improves functionality while the included Theme Roller system allows you to change styling with a simple, configurable download...or even allows switching on the fly.
Getting this look is as simple as adding: class="fg-button ui-state-default ui-corner-all" These styles work on other elements too, so you can round divs, images, etc.
Here's a primer: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
Once you become familiar with ThemeRoller, it's even possible to use it to style other elements of your page/app. I have one application that I've done entirely this way, so to re-theme the app for a different client I simply generate a new ThemeRoller theme.
Related
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 8 years ago.
In order to use an image as a form's submit button, I have come across two ways and would like to know which one is correct/best-practice.
Version 1:
<button type="submit">
<img src="mybutton.jpg" alt="Submit" />
</button>
Version 2:
<input type="image" src="mybutton.jpg" border="0" alt="Submit" />
I personally feel that the first version is better because it makes semantic sense and has a type of "submit". In the second version its saying the input is of type "image" which doesn't mean much to me as a human.
Which one should I go with?
Personally I would set it as a background rather than an image inside the button. So you would get the following.
<button type="submit" class="styledButton></button>
<style>
.styledButton {
background: url('mybutton.jpg') no-repeat;
}
</style>
That is just a matter of style, there is not really a "better" way, use the way you feel your code to be more clean with.
My personal opinion is that all form elements should be "<input>" because that feels more natural for me. I don't like it when things doing the same stuff (being form-elements in this case) looks different of having a different syntax, so I declared this to my personal standard.
However the most annoying thing is that an image, or <input type="image"> will not transfer name="" and value="" when submitting a form, that's why it is bad to use incase you have multiple "buttons" decorated as images in a form and you want to know which one was pressed.
In that case the best opinion is to make an <input type="submit"> and let it look like an image using CSS.
However, my statement for this question is: do it the way you feel best but keep it that way and don't switch around. Decide for one "standard" and use it always. Will make your code more strict and easier to read.
I personally use CSS to apply an image to submit button
Reason behind this is : you don't need to write the same code everywhere, just calling the css class will be sufficient
Instead of above 2 versions mentioned by you.
Try This:
<div id="submitForm">
<input type="submit" value="Submit" name="submit">
</div>
CSS
div#submitForm input {
background: url("mybutton.jpg") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
So, I decided to make page where all content is in hidden DIV. Basicly page start blank without any content. After clicking on radio-buttons it show one DIV, and hide another.
This is buttun named "Button_name" that will open "opt3" div's content.
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" value="opt3"/>
<label for="tab-3" class="tab-label-3"> BUTTON_NAME </label>
After clicking this will open "opt3" div:
<div id="opt3" class="desc" style="display: none;">
content of div
</div>
And now:
How to make some text appear in new DIV when page is opened (or refreshed by F5), but closed directly after clicked any button in menu options?
EDIT:
Script for buttons
$(document).ready(function(){
$("input[name=radio-set]").change(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
OK I figure it out in easiest way, I think!
If someone want same effect as me - you just have to put in main div (where any other div will show after clicking on menu buttons) normal "opt" div, but without display:none.
<div id="opt20" class="desc" >
Ble ble 20
</div>
This will show "ble ble 20" only when page start, and after clicking on any menu button will hide away. Be sure that in future, you will not use again "opt20" button, because it will show you your start content.
There are tons of tutorials and info on jQuery. It really takes playing with it and studying the different options it has. Here is a quick sample of what you can do. Not exactly what you might need, but it might give you a start. jQuery is quite powerful. You will have to include the jQuery library js file in your code. http://jquery.com/
Some HTML
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" value="opt3"/> Check me
<br /><input id="btn1" type="button" value="Click Me">
<div id="opt3" class="desc" style="display: none;">
I'm opt3 hidden from the start
</div>
<div id="otherdiv" class="desc" style="display: none;">
some other div that is shown when opt3 is clicked
</div>
and the jQuery
$(document).ready(function(){
$("#btn1").click(function(){
$("#opt3").show();
if($("#otherdiv").is(':visible')){
$("#otherdiv").hide();
}
});
$("#tab-3").change(function(){
$("#otherdiv").show();
if($("#opt3").is(':visible')){
$("#opt3").hide();
}
});
});
See it in action http://jsfiddle.net/8fUXW/1/
BTW Google specific things you need then piece them together instead of trying to find an exact solution. That would be pretty difficult.
I saw some results via the related questions but didn't actually seem to show what I want.
Looking for a way to simply style the button in all major broswers easily.
<input type="file" name="file" id="file" size="29" class="formButton" />
<span class="smalltext">(.txt only)</span>
I want the browse button to use the CSS, I have seen some results that put a fake button on top of the real one, is that really the best approach to take?
Currently, there's no way to consistently style a file input field across browsers. You could use one of the various "tricks" out there (which as you mentioned simply overlay the button), but beware that you might interfere with keyboard access to the field.
Don't try this!
Even if you get it working, there's still browsers like Safari that use non-standard file selection widgets!
It's best to let the native file widget show through.
The best solution I've found is to either overlay your own as you've mentioned, or use something like Dojo, which effectively does the same thing. As far as I know, you can't style the file input button.
Actually, with JqueryUI you can do it by simply:
Javascript for rollover (not required):
$(".fg-button:not(.ui-state-disabled)")
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
)
Button Code:
<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all">
Not that due to IE being a Microsoft product, the rounded corners gracefully degrade.
This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 7 years ago.
How do I make a <input type=button> act like a hyperlink and redirect using a GET request?
You can make <button> tag to do action like this:
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
or:
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
It's simple and no javascript required!
NOTE:
This approach is not valid from HTML structure. But, it works on many modern browser. See following reference :
For <button>; and
For <input type="button />
There are several different ways to do that -- first, simply put it inside a form that points to where you want it to go:
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
This has the advantage of working even without javascript turned on.
Second, use a stand-alone button with javascript:
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
This however, will fail in browsers without JavaScript (Note: this is really bad practice -- you should be using event handlers, not inline code like this -- this is just the simplest way of illustrating the kind of thing I'm talking about.)
The third option is to style an actual link like a button:
<style type="text/css">
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
// :hover and :active styles left as an exercise for the reader.
</style>
<div class="my_content_container">
Go to my link location
</div>
This has the advantage of working everywhere and meaning what you most likely want it to mean.
<script type="text/javascript">
<!--
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>
Here's the other way, it's simpler than the other one.
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
It's simpler.
For those who stumble upon this from a search (Google) and are trying to translate to .NET and MVC code. (as in my case)
#using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
This will show a button labeled "Process" and take you to "/Process/RemoveLostRolls".
Without "FormMethod.Get" it worked, but was seen as a "post".
Do not do it. I might want to run my car on monkey blood. I have my reasons, but sometimes it's better to stick with using things the way they were designed even if it doesn't "absolutely perfectly" match the exact look you are driving for.
To back up my argument I submit the following.
See how this image lacks the status bar at the bottom. This link is using the onclick="location.href" model. (This is a real-life production example from my predecessor) This can make users hesitant to click on the link, since they have no idea where it is taking them, for starters.
You are also making Search engine optimization more difficult IMO as well as making the debugging and reading of your code/HTML more complex. A submit button should submit a form. Why should you(the development community) try to create a non-standard UI?
I think that is your need.
a href="#" onclick="document.forms[0].submit();return false;"
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.