[WSG] Unobtrusive JavaScript (was: generate data)
Hi, I've written a small set of helper functions that will allow you to unobtrusively add JavaScript to a web page. It's built on the back off the prototype library so you'll need that as well. See the details here: http://www.stillbreathing.co.uk/projects/performer/performer.html A couple of examples. 1) If you want to create a toggling element you can do this: pa href=# class=togger rel=toggleelementToggle the visibility of the toggleelement element/a/p div class=hider id=toggleelementThis element will be toggleable (is that a word?)/div The hider class on the toggleable element will hide the element only if JS is enabled, so if it's not the element will never be hidden. Of course you can add additional classes both to the link and the toggleable element, and you can set the href attribute of the link to whatever you want. 2) Loading remote content into an element (known as AJAX) pa href=# class=loader rel=targetelement rev=targetpage.phpLoad content/a/p p id=targetelementTarget element/p When the link with class loader is clicked the element with the id targetelement will be filled with the content from the targetpage.php page. If anyone needs any more information please get in touch. Chris -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ray Leventhal Sent: 25 February 2008 20:20 To: wsg@webstandardsgroup.org Subject: Re: [WSG] re: generate data tee wrote: Hi, I really enjoyed reading this thread, especially the responses from Georg and Breton, and thank you Dwain for asking the question. I have heard a lot about unobtrusive js but thus far it's more like a buzzword to me because I understand no JS. Can one recommend which JS library is more accessibility user-friendly (is there such word?!). I know the jquery, mootool, prototype, Dojo, Extjs, YUI libraries, and have recently used the jquery for accordion menu and prototype for glider (sliding gallery like the one in Panic.com), but I don't know enough to settle for one that is relatively small size and unobtrusive. Everybody claims he is unobtrusive, and I have difficulty to settle down with one. Thanks! Hi tee, An interesting thread indeed. I can't recommend any JS libraries as I'm only now cutting my teeth on JS, but I can wholeheartedly recommend a book on JS which focuses on graceful degradation and manipulation of the DOM: DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith HTH, -Ray *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** This message has been scanned for malware by SurfControl plc. www.surfcontrol.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Unobtrusive JavaScript (was: generate data)
Hi, Although I'm a jQuery man myself, it's good to see someone actively encouraging the use of unobtrusive javascript although I would make one or two tweaks. Wouldn't it be better to add your class hooks to the p rather than to an a as at present, if the user had javascript disabled then they would have a link saying toggle that would take them to the top of the page if clicked. Even better would be to insert the a using javascript so that if you have javascript disabled you don't even get the option to toggle visibility - the item is just there. Just a thought! Cheers, Ben -- e: [EMAIL PROTECTED] w: http://www.bendodson.com/ On 26/02/2008, Chris Taylor [EMAIL PROTECTED] wrote: Hi, I've written a small set of helper functions that will allow you to unobtrusively add JavaScript to a web page. It's built on the back off the prototype library so you'll need that as well. See the details here: http://www.stillbreathing.co.uk/projects/performer/performer.html A couple of examples. 1) If you want to create a toggling element you can do this: pa href=# class=togger rel=toggleelementToggle the visibility of the toggleelement element/a/p div class=hider id=toggleelementThis element will be toggleable (is that a word?)/div The hider class on the toggleable element will hide the element only if JS is enabled, so if it's not the element will never be hidden. Of course you can add additional classes both to the link and the toggleable element, and you can set the href attribute of the link to whatever you want. 2) Loading remote content into an element (known as AJAX) pa href=# class=loader rel=targetelement rev=targetpage.phpLoad content/a/p p id=targetelementTarget element/p When the link with class loader is clicked the element with the id targetelement will be filled with the content from the targetpage.php page. If anyone needs any more information please get in touch. Chris -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ray Leventhal Sent: 25 February 2008 20:20 To: wsg@webstandardsgroup.org Subject: Re: [WSG] re: generate data tee wrote: Hi, I really enjoyed reading this thread, especially the responses from Georg and Breton, and thank you Dwain for asking the question. I have heard a lot about unobtrusive js but thus far it's more like a buzzword to me because I understand no JS. Can one recommend which JS library is more accessibility user-friendly (is there such word?!). I know the jquery, mootool, prototype, Dojo, Extjs, YUI libraries, and have recently used the jquery for accordion menu and prototype for glider (sliding gallery like the one in Panic.com), but I don't know enough to settle for one that is relatively small size and unobtrusive. Everybody claims he is unobtrusive, and I have difficulty to settle down with one. Thanks! Hi tee, An interesting thread indeed. I can't recommend any JS libraries as I'm only now cutting my teeth on JS, but I can wholeheartedly recommend a book on JS which focuses on graceful degradation and manipulation of the DOM: DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith HTH, -Ray *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** This message has been scanned for malware by SurfControl plc. www.surfcontrol.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Unobtrusive JavaScript (was: generate data)
Good ideas Ben, thanks. I did think about that but went for the option which means the least amount of work for the developer. I don't pretend that Performer is suitable for really advanced stuff, just the basics. The reason I hook the events into the a element is because it gives the developer the opportunity to use the link as a link in the even of a non-JS user. For example: pa href=index.php?toggle= toggleelement class=togger rel=toggleelementToggle the visibility of the toggleelement element/a/p The querystring parameters in the href of this link could tell some server-side code to apply a class to the element. It's a simple example, but I'm sure you can see how this could be used to provide both a standard and enhanced interface to the user. Chris From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ben Dodson Sent: 26 February 2008 11:30 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Unobtrusive JavaScript (was: generate data) Hi, Although I'm a jQuery man myself, it's good to see someone actively encouraging the use of unobtrusive javascript although I would make one or two tweaks. Wouldn't it be better to add your class hooks to the p rather than to an a as at present, if the user had javascript disabled then they would have a link saying toggle that would take them to the top of the page if clicked. Even better would be to insert the a using javascript so that if you have javascript disabled you don't even get the option to toggle visibility - the item is just there. Just a thought! Cheers, Ben -- e: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] w: http://www.bendodson.com/ On 26/02/2008, Chris Taylor [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] wrote: Hi, I've written a small set of helper functions that will allow you to unobtrusively add JavaScript to a web page. It's built on the back off the prototype library so you'll need that as well. See the details here: http://www.stillbreathing.co.uk/projects/performer/performer.html A couple of examples. 1) If you want to create a toggling element you can do this: pa href=# class=togger rel=toggleelementToggle the visibility of the toggleelement element/a/p div class=hider id=toggleelementThis element will be toggleable (is that a word?)/div The hider class on the toggleable element will hide the element only if JS is enabled, so if it's not the element will never be hidden. Of course you can add additional classes both to the link and the toggleable element, and you can set the href attribute of the link to whatever you want. 2) Loading remote content into an element (known as AJAX) pa href=# class=loader rel=targetelement rev=targetpage.phpLoad content/a/p p id=targetelementTarget element/p When the link with class loader is clicked the element with the id targetelement will be filled with the content from the targetpage.php page. If anyone needs any more information please get in touch. Chris -Original Message- From: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]mailto:[EMAIL PROTECTED]] On Behalf Of Ray Leventhal Sent: 25 February 2008 20:20 To: wsg@webstandardsgroup.orgmailto:wsg@webstandardsgroup.org Subject: Re: [WSG] re: generate data tee wrote: Hi, I really enjoyed reading this thread, especially the responses from Georg and Breton, and thank you Dwain for asking the question. I have heard a lot about unobtrusive js but thus far it's more like a buzzword to me because I understand no JS. Can one recommend which JS library is more accessibility user-friendly (is there such word?!). I know the jquery, mootool, prototype, Dojo, Extjs, YUI libraries, and have recently used the jquery for accordion menu and prototype for glider (sliding gallery like the one in Panic.comhttp://Panic.com), but I don't know enough to settle for one that is relatively small size and unobtrusive. Everybody claims he is unobtrusive, and I have difficulty to settle down with one. Thanks! Hi tee, An interesting thread indeed. I can't recommend any JS libraries as I'm only now cutting my teeth on JS, but I can wholeheartedly recommend a book on JS which focuses on graceful degradation and manipulation of the DOM: DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith HTH, -Ray *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] *** This message has been scanned for malware by SurfControl plc. www.surfcontrol.comhttp://www.surfcontrol.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED
Re: [WSG] Unobtrusive JavaScript (was: generate data)
Hi Chris Thought I'd let you know - I looked at your web page and the first two examples, when I clicked on the link, didn't work for me at all! No extra paragraph appearing (or disappearing!) and no time change. I'm on a Mac using Firefox 2.0.0.12 ... It sounds good - I'd like to access a version that works ... :) Cheers susie On 26/2/08 8:16 PM, Chris Taylor [EMAIL PROTECTED] wrote: Hi, I've written a small set of helper functions that will allow you to unobtrusively add JavaScript to a web page. It's built on the back off the prototype library so you'll need that as well. See the details here: http://www.stillbreathing.co.uk/projects/performer/performer.html A couple of examples. 1) If you want to create a toggling element you can do this: pa href=# class=togger rel=toggleelementToggle the visibility of the toggleelement element/a/p div class=hider id=toggleelementThis element will be toggleable (is that a word?)/div The hider class on the toggleable element will hide the element only if JS is enabled, so if it's not the element will never be hidden. Of course you can add additional classes both to the link and the toggleable element, and you can set the href attribute of the link to whatever you want. 2) Loading remote content into an element (known as AJAX) pa href=# class=loader rel=targetelement rev=targetpage.phpLoad content/a/p p id=targetelementTarget element/p When the link with class loader is clicked the element with the id targetelement will be filled with the content from the targetpage.php page. If anyone needs any more information please get in touch. Chris -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ray Leventhal Sent: 25 February 2008 20:20 To: wsg@webstandardsgroup.org Subject: Re: [WSG] re: generate data tee wrote: Hi, I really enjoyed reading this thread, especially the responses from Georg and Breton, and thank you Dwain for asking the question. I have heard a lot about unobtrusive js but thus far it's more like a buzzword to me because I understand no JS. Can one recommend which JS library is more accessibility user-friendly (is there such word?!). I know the jquery, mootool, prototype, Dojo, Extjs, YUI libraries, and have recently used the jquery for accordion menu and prototype for glider (sliding gallery like the one in Panic.com), but I don't know enough to settle for one that is relatively small size and unobtrusive. Everybody claims he is unobtrusive, and I have difficulty to settle down with one. Thanks! Hi tee, An interesting thread indeed. I can't recommend any JS libraries as I'm only now cutting my teeth on JS, but I can wholeheartedly recommend a book on JS which focuses on graceful degradation and manipulation of the DOM: DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith HTH, -Ray *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** This message has been scanned for malware by SurfControl plc. www.surfcontrol.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
