|
|
templating button actions using js
Hi there,
I'm currently using javascript to format buttons as follows.
<input type="submit" value="Submit" title="" onmouseover="this.style.background='blue'" onmouseout="this.style.background='#FF1199'">
What I would like to know is is there a way that I can have a templated button? This would mean that the if I change the formatting so that the onmouseover colour is 'red' instead in one place it would affect all buttons?
Cheers,
A
|
|
0
|
|
|
|
Reply
|
 aaron
|
3/26/2011 11:29:40 AM |
|
aaron wrote:
> I'm currently using javascript to format buttons as follows.
>
> <input type="submit" value="Submit" title=""
> onmouseover="this.style.background='blue'"
> onmouseout="this.style.background='#FF1199'">
>
> What I would like to know is is there a way that I can have a
> templated button? This would mean that the if I change the formatting
> so that the onmouseover colour is 'red' instead in one place it would
> affect all buttons?
You can do that without using Javascript at all, using just the CSS rules
input[type="submit"] { background: #f19; }
input[type="submit"]:hover { background: blue; }
This fails on some old versions of IE, but on the other hand, on supporting
browsers, it works even when Javascript is disabled. Note: It also fails on
modern versions of IE in "Quirks Mode", so if your page currently works in
"Quirks Mode", this might not be a feasible way. The simplest way to avoid
"Quirks Mode" is to have
<!DOCTYPE html>
as the first line of the HTML document.
If you want (or need) to do this in Javascript, you can use e.g. the
following (executed after the document is loaded, so e.g. put it in your
onload event handler or place the script element at the very end of the
document body):
var input = document.getElementsByTagName("input");
for(var i = 0; i < input.length; i++) {
if(input[i].type == "submit") {
input[i].onmouseover = function () {this.style.background = "blue"};
input[i].onmouseout = function () {this.style.background = "#f19"}; }}
--
Yucca, http://www.cs.tut.fi/~jkorpela/
|
|
|
0
|
|
|
|
Reply
|
Jukka
|
3/26/2011 1:16:11 PM
|
|
|
1 Replies
236 Views
(page loaded in 0.045 seconds)
Similiar Articles: Dynamicly add dropdown lists to a form populated with php/mysql ...... mysql to create the dynamic > dropdowns: <form action ... have a form with among other elements an add button and ... and MySQL Create Dynamic ... that us PHP as the template ... How to center a prompt box?? - comp.lang.javascriptI suspect that the button you are using does not have type ... So when your "show the prompt" button is clicked, the js runs ... jsProcessPromptBox(false);"> <form action ... forms using keyPress onChange to submit or not to submit - comp ...... won't help if the user edits the form without using the ... FDF responses. - comp.text.pdf ..... my submit button action ... onchange slow to fire - comp.lang.javascript JS (or ... Welford algorithm for computing standard deviation - comp ...(I don't have > access to TAOCP.) > > JS C++ header file: #include <cmath> template <class etype> class ... of DNA "There is nothing more amazing than stupidity in action ... Passing checkbox values from one JSP page to another - comp.lang ...... checkbox] .... .... n [checkbox] Submit button So the ... nbsp; </p> <form name="form1" method="post" action="B ... Figured out...>> Thanks..i think by using java script on ... How to similate HTTP POST request by JavaScript? - comp.lang ...<form action="whatever.php" method="POST"> <select name ... will send a HTTP POST request when the submit button is ... Keep a submit button available for non JS users. Dynamic form generation questions - comp.text.pdfMeanwhile, look for the book 'iText in Action ... you to replace the icon of an > existing button ... into specified "placeholders" in the > template... OK, we're using ... Populate form-fillable pdf from command line - comp.text.pdf ...Does that also mean that a FDF with JS-Code to fill ... OTOH, you could add a submit action, e.g., submit as HTML ... java from the iText Tutorial, the submit by email button ... How to add radio buttons, etc. programatically? - comp.text.pdf ...The part (b) is like a transparent template ... GUI where I'd like to add a Browse Button, lookup ... Can I load a JS ... java program in a separate process using GUI button ... programmatically select an option in "select" box in html - comp ...... s.selectedIndex = 1;"> <form method="get" action ... On select Radio Button / Change Combo box values - comp ... I bet most users would look for "html", "js ... JavaScript Button action event : Button « Form Control ...Ext JS: 10. Form Control: 11. GUI Components: 12. HTML: 13. Javascript Collections: 14. ... JavaScript Button action event < How to switch the 'action' field in an HTML form dynamicallyBased on a radio button. The example below shows a case where the action field is switched based on the selection ... form validator script--> <script src="gen_validatorv2.js ... 7/23/2012 2:59:42 PM
|
|
|
|
|
|
|
|
|
Search |
Post Question |
Groups |
Stream |
About |
Register
12 followers. 