RE: [WSG] Styling Submit buttons with JavaScript by making them anchors
This might be a stupid question, but why can't you just style your form submit buttons to look like links using CSS? - Primarily because some browsers don't support styling of inputs very well, but also because I need to add a span in for styling the links/inputs as tabs. If I do this in a browser that doesn't support styling of inputs (Safari for example) then I end up with the span still displaying the left edge of the tab and then a normal submit button. I also don't want to use the Button tag due to its incorrect behaviour in IE (http://www.peterbe.com/plog/button-tag-in-IE) Whilst this method is relatively long winded, it delivers the result I want across our supported browsers effectively and degrades to an acceptable form in the absence of JavaScript (inputs displayed instead of tabs) Hope that makes some sense of my madness *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling Submit buttons with JavaScript by making them anchors
Quoting Matthew Pennell <[EMAIL PROTECTED]>:
This might be a stupid question, but why can't you just style your form
submit buttons to look like links using CSS?
button {
border: 0;
background: none;
text-decoration: underline;
color: #006;
cursor: pointer;
}
I was going to suggest that as well, but then I seemed to remember
that old(er) versions of Safari don't allow for such radical form
widget styling. Also, underline (if needed) doesn't seem to work
consistently (at least in Firefox).
P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
Take it to the streets ... join the WaSP Street Team
http://streetteam.webstandards.org/
__
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Styling Submit buttons with JavaScript by making them anchors FIXED
I guess that you have to count down in your for-loop. You modify the
DOM while iterating over the nodes, so the model changes while you
are working at it. If you start with the last element, you don't
mess up the references.
for(var j=inputs.length-1; j>=0; j--) { ... }
--
Thanks so much Martin, that works perfectly (and makes sense)
James
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Styling Submit buttons with JavaScript by making them anchors
On Dec 17, 2007 2:28 PM, James Leslie <[EMAIL PROTECTED]> wrote:
> I'm trying to use some code so that submit buttons on a form are (using
> JavaScript if available) removed and replaced with anchor tags that then
> have event handlers added to them to submit a form if clicked. The reason
> for this is that I have some tabs I want to style in a similar way though
> some are anchors and some are inputs and it means I should be able to style
> submit buttons in the same way as anchor tags whilst managing to keep the
> text resizable (as opposed to using an image for the submit button).
>
This might be a stupid question, but why can't you just style your form
submit buttons to look like links using CSS?
button {
border: 0;
background: none;
text-decoration: underline;
color: #006;
cursor: pointer;
}
Your button looks and acts (almost) exactly like a regular link.
- Matthew
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Styling Submit buttons with JavaScript by making them anchors
James,
I guess that you have to count down in your for-loop. You modify the
DOM while iterating over the nodes, so the model changes while you
are working at it. If you start with the last element, you don't
mess up the references.
for(var j=inputs.length-1; j>=0; j--) { ... }
regards
Martin
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Styling Submit buttons with JavaScript by making them anchors
Hi,
I'm trying to use some code so that submit buttons on a form are (using
JavaScript if available) removed and replaced with anchor tags that then
have event handlers added to them to submit a form if clicked. The
reason for this is that I have some tabs I want to style in a similar
way though some are anchors and some are inputs and it means I should be
able to style submit buttons in the same way as anchor tags whilst
managing to keep the text resizable (as opposed to using an image for
the submit button).
I have used this before on an implementation without problems but that
was finding the only submit button by ID rather than through a list of
inputs and my new code seems to have a problem now where only the first
input is changed and it doesn't seem to iterate to the second input).
A simplified version of the code is below (DOM checks etc removed)...
can anyone see what is wrong? I'd love to do it this way as it is nice
and unobtrusive and means I can style things whilst keeping them
accessible (hopefully). The same code is also online at
http://jamestesting.metafaq.com/clients/jamestesting/test.html
Many Thanks
James
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; lang="en">
Entry: jamestest2
function changeInputs(){
// find all uls
var uls = document.getElementsByTagName("ul");
// break if no uls present
if (uls.length < 1) return false;
// find uls with class = tabNav
for (var i=0; i
