Re: [WSG] unobtrusive js, document.submit IE
Hi Chris,
Perhaps your question is more suited to a JS/DOM list/blog (e.g.
evolt.orgor others [1]) than WSG? More JS-type guys there, but I'll
give it a go:
An example page would be helpful (I've mocked-up a quickie at [2])... but I
wonder if the probem is your assumed DOM structure?
On 04/03/07, Chris Price [EMAIL PROTECTED] wrote:
I have built a standard form with a list of options using radio buttons.
The form is for internal use only but I still want to maintain standards and
accessibility.
To improve the look of it for the client I have added some javascript
which hides the buttons and uses onclick events on the labels so that
the submit button doesn't need to be clicked.
That's a design decision that removes the expected behaviour of the radio
buttons and hence makes the form less usable (IMO) accessible ... is it
really necessary? (You use display:none; which IIRC makes the inputs
inaccesible to screen readers.)
This works fine on Firefox but does not work on IE with javascript enabled.
window.onload = initElement
function initElement() {
var inputs,i;
if (document.library_form) { //See PS: below...
inputs=document.getElementsByTagName('input')
for(i=0;iinputs.length;i++) {
inputs[i].style.display = 'none'
inputs[i].onclick = function() { submitform(); return false }
}
n = i - 1
o = document.getElementById('library_form')
p = o.getElementsByTagName('div')[n]
o.removeChild(p)
}
}
inputs[i].style.display = 'none'
hides the input element but the next line:
inputs[i].onclick = function() { submitform(); return false }
attaches an onclick event handler to the (now hidden) element -- it's
possible that IE does not honour the label relationship after the element is
hidden so a click on the label fails to trigger the hidden input's onclick.
Try attaching the onclick to the label element itself, e.g. the following
seems to work for me in IE6:
inputs[i].parentNode.onclick = function() { submitform(); return false }
However I think it'd be better to have the radio's kept visible so users can
understand what they do...
HTH,
James
PS: Your 1st function uses if (document.library_form)... the second
document.getElementById('library_form') to do the same thing, namely locate
a DOM object representing your form: the second is correct DOM1, the 1st is
a hold-over from IE that most browsers support but it's less satisfactory,
IMO, though it's not IE's problem...
To make document.library_form work you need the name attribute:
form id=library_form name=library_form
which is unnecessary if you stick with document.getElementById('library_form')
in the 1st function:
form id=library_form would suffice.
[1] http://archivist.incutio.com/viewlist/css-discuss/21558
[2] http://staffnet.kingston.ac.uk/~ku13043/test/20070305choctaw.html
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] two column equal width fixed centred layout
On 8/19/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is there a best practice for having two columns of equal width side by side in a fixed width layout? I mean, is it better to float both columns left, or one left and one right etc. Are there any examples of this somewhere? You could try the css-discuss mailing list their wiki, e.g. http://css-discuss.incutio.com/?page=TwoColumnLayouts http://css-discuss.incutio.com/?page=TwoColumnFloat or Google the whole wiki for more discussion: http://www.google.com/search?q=site:css-discuss.incutio.com+two%20column HTH, James ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Printed web pages with text cut in half at the bottom of the page?
Hi Bennie [EMAIL PROTECTED], On 8/11/05, Bennie, Jack [EMAIL PROTECTED] wrote: Has anyone encountered the problem, when printing a web page, where the last line of text is being cut in half? By this I mean that the top half of the letters print on one page and the bottom half print on the next. Any suggestions as to what might be causing this and how to stop it? I've run some tests and it doesn't seem to be browser specific... Can you quote an example? According to discussion on css-d (e.g. [1]) it's often related to floated elements -- it seems best to simplify your layout as much as possible using a print style sheet to help current browsers to print sensibly. See [2] for some more info. HTH, James [1] http://archivist.incutio.com/viewlist/css-discuss/60217 [2] http://css-discuss.incutio.com/?page=PrintStylesheets ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Firefox JS Image function
Hi Ben all @WSG:
On 8/2/05, Ben Logan [EMAIL PROTECTED] wrote:
The following website uses a Javascript function and a target layer to
display a new image every time the page refreshes.
http://www.theleadsgroup.co.uk/
This works fine in IE browsers and in Firefox/Mozilla browsers it seems to
not display the images at all?
Anything I am doing wrong or any advice?
Firstly this is the Web Standards Group so I'd recommend adding a
character encoding meta tag tio the head block, like:
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
Then validate your HTML document! [1] For simplicity I'd recommend
switching from XHTML 1.0 Strict to HTML 4.01 Strict (that way a larger
proportion of your current code will be valid.) There's no shame in
using HTML4 Strict, IMO, but it is a bad idea to use a Strict XHTML
DOCTYPE with HTML4-style code!
Once the HTML validates, validate the CSS[2] too...
As for the problem, your JS code includes:
randomimage.innerHTML = imageArray[picknum];
where randomimage is a reference to an object in the document object
model (DOM) that corresponds to the HTML element:
div id=randomimage style=height: 157px;
In Internet Explorer, non-standardly, this object can be referenced by
its ID name, as you do, but in most other browsers you need to create
a reference to the object before using it, e.g. with something like:
var randomimage = document.getElementById('randomimage');
This'll work in IE and Firefox, for example.
HTH,
James
[1] http://http://validator.w3.org or straight to
http://http://validator.w3.org/check?verbose=1uri=http%3A//www.theleadsgroup.co.uk/
[2] http://jigsaw.w3.org/css-validator/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] AJAX and accesibility
Check out Derek Featherstone's follow-up to his talk at @media for some interesting viewpoints: http://www.boxofchocolates.ca/archives/2005/06/12/javascript-and-accessibility#more-72 1. You probably always have to do the back end stuff anyway, even if you can process lots of stuff that used to be back end on the client using AJAX -- what if your most important visitor has JS disabled or something (his firewall mabe?) breaks AJAX? 2. Some screenreaders DO detect JS-driven changes to the DOM (e.g. JAWS using IE) but I don't think it's definite what they see and what they don't and as far as AJAX is concerned it's early days :-) Just my 2p ... James On 6/29/05, Maarten Stolte [EMAIL PROTECTED] wrote: Hello, I'm trying to find out if there are any resources on AJAX and accesibility. It seems to me that if I would employ AJAX technologies on my site to enable a richer application experience, I would still need to code for non-JavaScript useragents . I also think that with screenreaders, lots of AJAX tricks would be hard to parse, even if such a reader would have JavaScript. Do these things hold true, and are there other things that I need to take into account? regards, Maarten Stolte ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] javascript/DOM resources
Hi Ted [EMAIL PROTECTED], Just trawling through list emails this seems to have had no replies so my 2p: I'm sure I remember Jeremy Keith (http://adactio.com/) proposing a central archive of modern JS scripts but can't quite find it right now ... try starting from e.g. http://adactio.com/journal/search.php?query=dom+scripting (he told the @media audience that DOM Scripting is the way to throw off the DHTML bad vibes...) A few JS gurus met up after @media PPK's site seems to be a good starting point for ensuing discussion: http://www.quirksmode.org/blog/archives/2005/06/you_shouldve_be_1.html Googling for ajax dom scripting throws up loads, including: http://www.andybudd.com/links/javascript_and_the_dom/index.php and a mention of the Sitepoint book DHTML Utopia: Modern Web Design Using JavaScript DOM. HTH, James On 5/3/05, Drake, Ted C. [EMAIL PROTECTED] wrote: Hi All I'm in the middle of a site reconstruction. The backbone is ready, the style sheets are ready, what's next? The javascript. We are still using a cookie script copyright 1996. I know there are tons of free javascript archives, but they are equally filled with scripts that live in the old days of tag soup. Is there a resource for javascripts that are designed for standards-compliant web sites. An archive of scripts that work with DOM and degrade well in non-javascript enabled browsers? I would love to approach the scripting team and say, can we replace this with this all-new javascript that will make our lives sooo much better? Thanks ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Blockquote or Q?
Apologies for being a bit slow on the uptake but the always informative Roger Johansson (456bereastreet) has this useful article [1] which supports what's been said and provides useful links to the HTML4 spec. James [1] http://www.456bereastreet.com/archive/200411/quotations_and_citations_quoting_text/ http://www.456bereastreet.com/archive/200411/quotations_and_citations_quoting_text/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] DOM tutorials/books?
On 5/3/05, Zulema [EMAIL PROTECTED] wrote: Are there any good books or tutorials that I can read/follow to learn all about the DOM? If you're looking for a book my favourite is Flanagan's JavaScript: The Definitive Guide (O'Reilly) James ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Imaginary Borders
Hi Chris [EMAIL PROTECTED], On Thu, 27 Jan 2005 10:39:42 -0800, Chris Kennon [EMAIL PROTECTED] wrote: In the following code the tr#n rules are not taking. I've looked around and have no reason for this failure. Would someone assist? This has been discussed on css-discuss before, e.g. [1]. There seem to be inconsistencies between browsers (IE vs Opera and Mozilla?) although the CSS 2 spec's suggest how it ought to work [2]. In Firefox it seems to behave kinda sensibly: the blue border collapses with the black top border of #row2 (which becomes invisible) whilst the #row3 border-top is visible. HTH, James PS: The grey background shows up in IE if you spell it gray ;-) Ff is happy with either -- weird! [1] http://archivist.incutio.com/viewlist/css-discuss/49334 [2] http://www.w3.org/TR/REC-CSS2/tables.html#borders ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] DOM and Standard
On Tue, 7 Dec 2004 16:33:27 -0500, berry [EMAIL PROTECTED] wrote: Thanks, but I already found this link. What I was looking for was theory. I'd heartily recommend the O'Reilly JavaScript: The Definitive Reference by David Flanagan -- it has a good section on HTML4 events as well as DOM (Gecko) and IE event models. James ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] QuickTime and XHTML validation
Hi Antonio all @ WSG, On Thu, 4 Nov 2004 09:28:24 +0100, Antonio wrote: Could someone tell me what to do to get validated an XHTML page with a QuickTime video embedded? Here is the page : http://www.temposi.com/index.html The validator doesn't like the embed tag as it's not in the XHTML DOCTYPE. Similar problems occur with Flash and there has been a lot of discussion of Flash and XHTML on various forums, including Evolt [1] and WSG (most recently in October!) Advice seems to be to either validate using the HTML4 DOCTYPE and keep embed or maybe adapt Flash Satay [2] for Quicktime? James [1] Evolt http://www.google.com/search?q=site:lists.evolt.org+flash%20satay [2] http://www.alistapart.com/articles/flashsatay/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] heading background continues across container width
On Sat, 02 Oct 2004 16:16:43 +1000, Neerav [EMAIL PROTECTED] wrote:
Im experimenting with some techniques from dan cederholms book Web
Standards Solutions and found that setting a background image like so
h1 , h2 , h3 , h4 , h5
{
text-align : left;
padding-bottom: 14px;
background: url(/img/under_heading.gif) repeat-x bottom;
}
caused the background image to continue across the whole container div
width, my guess is that this occurs because Hx tags are BLOCK elements,
repeat-x makes the background image repeat across the whole width
and by default h elements are 100% wide. Replacing it with
no-repeat would ensure only one copy of the image appears. E.g. see
http://www.w3schools.com/css/pr_background.asp
James
PS: inline worked because it made the heading shrink-wrap but you
were probably lucky that it remained on a line of its own. I guess it
was surrounded by other block elements.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] New website launch
On Mon, 20 Sep 2004 00:20:04 +0100, Ian Fenn wrote: I've launched my first website using web standards for a client: http://www.housedoctor.co.uk/ Checking the website in browsercam: http://www.browsercam.com/public.aspx?proj_id=98657 ...it doesn't seem to be rendering quite right in IE5 or IE5.5 in Windows 2000. It's also a bit screwy in Opera 6.0 on the Mac. In Firefox (1.0PR) and Mozilla (1.7.2) on WinXP no horizontal scroll bars appear when the page exceeds the browser window (Opera 7.2.3 and IE6 seem fine). This seems weird to me as the layout uses a fixed width centred div of 700px and html has min-width:700px specified + there's an extra div#mozscroll which is also 700px so the browser really ought to add scrollbars when its width falls below 700px ... or am I misinterpreting min-width? Any ideas anyone? James ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] New website launch
On Mon, 20 Sep 2004 08:08:29 -0400, Ryan Christie [EMAIL PROTECTED] wrote:
This seems weird to me as the layout uses a fixed width centred div of
700px and html has min-width:700px specified + there's an extra
div#mozscroll which is also 700px so the browser really ought to add
scrollbars when its width falls below 700px
James
That wort of seems like beating a dead horse right there. If something
has width:700px;, declaring min-width:700px; defeats the purpose.
min-width is the maximum allowed shrinkage a site will allow with a
resized browser window *before* it will not shrink further and adds in
scrollbars. To be effwctive in this case, the min-width would need to be
a smaller value than 700px.
Making html {min-width} smaller (500px) does not help.
As for div#mozscroll, it doesn't sound absolutely necessary to be there.
That's kinda my point (sorry, not being clear!) The page has all these
rules to tell the browser that its size is 700px yet Moz Ffox refuse
to show a horizontal scroll bar where Opera and IE6 do. Is this a
known bug or something more subtle on the page?
James
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] So stuck.. Nested UL's and IE 6
On Fri, 10 Sep 2004 15:01:25 -0400, J Rodgers [EMAIL PROTECTED] wrote: Why is IE 6 doing what it does to the left nav on this page? http://pole.uwaterloo.ca/cpadev/engtest/howdoesitwork.html I want it nested, I know li id= would save me a load of grief. IE 6 seems to take the line from the li above the ul and insert it after the /ul. IE 5 doesn't even do this.. Best I can tell listomatic has no working list like this, and google hasn't been any help thus far. Is there a site that details IE 6's nested UL navigation woes? Dunno about IE, but XHTML does not allow ul within ul, the submenu ul needs to be enclosed in a li element which is probably why the submenu is not nested. It often helps to validate your code [1] -- always a good idea [2] as different browsers might treat invalid code differently. HTH, James [1] http://validator.w3.org/check?verbose=1uri=http%3A//pole.uwaterloo.ca/cpadev/engtest/howdoesitwork.html [2] http://webstandardsgroup.org/mail/guidelines.cfm ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Comments + browser tests sought for web page (novel?) scripting
Dear [EMAIL PROTECTED], I'm a newbie to the list but a fan of standards-based design and am hopefully beginning to get the hang work of some accessibility issues. I'm currently experimenting with some scripting ideas in an existing site. The old site is at http://www.kingston.ac.uk/maths but I'm seeking some help with the test version at http://king-maths.kingston.ac.uk/~test/maths/ CSS for the latter is partly in the head but mostly here http://king-maths.kingston.ac.uk/~test/maths/style/style.css Both pages use (I hope still) valid CSS and XHTML Strict 1.0. The layout and JavaScript behaviour has been tested only on Windows in IE 5.0, 5.5, 6, Opera 7.23, Firefox 0.9.3 (currently). I'd be grateful for Mac and Linux tests if anyone can oblige. (I have no interest in NN4.) The menus are JS-driven with onmouseover and onfocus behaviour (for keyboard navigation.) With JS disabled the menus should appear fully expanded inline (bland styles currently.) The various news items in the body of the page should be summarised onload by another JS/DOM-based script which sets up summary and detail views that can be clicked between (not so good accessibility as the short, small text version is the default.) Any comments would be appreciated, particularly about the script-driven functionality, page accessibilty and its behaviour in other browsers. Thanks, James (who longs to be in Sydney for we04 but it's the start of term here...) PS: Oddly my version of Opera 7.23 won't tab into the page so no onfocus testing was possible ... must upgrade! ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Browsing without images
On Sat, 04 Sep 2004 14:16:26 +0100, Patrick H. Lauke [EMAIL PROTECTED] wrote: You just realised it, but this has been a huge part of the whole image replacement discussion from the beginning. http://www.google.com/search?q=accessibility+image+replacement+css No, there's no way to test if images are turned off. If I read it correctly Peter-Paul Koch's DOM-based FIR does: http://www.quirksmode.org/dom/fir.html Neat -- loads a test image into the DOM and only does the image-replacement once that's loaded. Dunno if the assumption about screen readers not loading images is correct, though... James ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
