Simple question (I hope). Can anyone explain to an Ajax newbie (and even JS newbie) how to go about toggling the display of one or two divs when a link is clicked? Thanks, Gavin
prototype.js ships with a Element.toggle method On 4/22/05, Gavin Sinclair <gsinclair-81uBx+iSpXA0n/F98K4Iww@public.gmane.org> wrote:> Simple question (I hope). > > Can anyone explain to an Ajax newbie (and even JS newbie) how to go > about toggling the display of one or two divs when a link is clicked? > > Thanks, > Gavin > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- Tobi http://www.snowdevil.ca - Snowboards that don''t suck http://www.hieraki.org - Open source book authoring http://blog.leetsoft.com - Technical weblog
On Apr 22, 2005, at 9:53 AM, Gavin Sinclair wrote:> Simple question (I hope). > > Can anyone explain to an Ajax newbie (and even JS newbie) how to go > about toggling the display of one or two divs when a link is clicked? > > Thanks, > Gavin >A simple way would be: <div id="mydiv"> Foo </div> <%= link_to_function "Toggle it", "Element.toggle(''mydiv'');" %> Or by hand: <a href="#" onclick="Element.toggle(''mydiv''); return false">Toggle it</a> -Scott _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
> Can anyone explain to an Ajax newbie (and even JS newbie) how to go > about toggling the display of one or two divs when a link is clicked?This is really just Javascript, nada to do with Ajax. If you''ve got the latest Rails, look for Element.toggle(). Older ones can use Toggle.display(). So something like: <div id="foo">foo</div><a href="#" onclick="Element.toggle(''foo''); return false;">toggle foo</a> Jason
Gavin Kistner
2005-Apr-22 14:21 UTC
Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On Apr 22, 2005, at 8:11 AM, Jason Foreman wrote:> So something like: <div id="foo">foo</div><a href="#" > onclick="Element.toggle(''foo''); return false;">toggle foo</a>(This is not directed at you, Jason, just using your code as an example.) As a web purist, I (and many others) assert that the above is a terrible way to provide an HTML element that invokes a client-side HTML event. Please read: http://tom.me.uk/scripting/links.asp on why it''s bad, and things you should do instead. Another (perfectly valid) option is the <button> element. (The few other short articles at http://tom.me.uk/scripting/ are also all worth a read.) -- (-, /\ \/ / /\/
Jason Foreman
2005-Apr-22 14:33 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On 4/22/05, Gavin Kistner <gavin-XtLdkLkwz3ZWk0Htik3J/w@public.gmane.org> wrote:> On Apr 22, 2005, at 8:11 AM, Jason Foreman wrote: > > So something like: <div id="foo">foo</div><a href="#" > > onclick="Element.toggle(''foo''); return false;">toggle foo</a> > > (This is not directed at you, Jason, just using your code as an > example.) > > As a web purist, I (and many others) assert that the above is a > terrible way to provide an HTML element that invokes a client-side HTMLI absolutely agree with you. Using anchors this way is horrible for accessibility and for graceful degredation. I was merely using it as a simple demonstration of how the Element.toggle function works. However I should have realized that a proper example would be better served. Thanks for pointing this out! No hurt feelings. Jason
Thomas Fuchs
2005-Apr-22 15:46 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
Hmm. A) <a href="#" onclick="doSomething(); return false;">Link text</a> vs. B) <style type="text/css"> .link { color: #00f; text-decoration: underline; cursor: pointer; cursor: hand; } </style> <span class="link" tabindex="0" onclick="doSomething();">Link text</span> Where (B) is not standards-compliant and does not work in all browsers. I know what I would choose. Of course, for this special circumstances, a <button> element would be much closer to what the HTML spec has in mind. BTW: As per RFC 2396 an URI of "#" is perfectly valid, as the fragment identifier (that is, what follows the #) is defined as *uric (where * means 0 or more charaters). -- thomas Am 22.04.2005 um 16:21 schrieb Gavin Kistner:> On Apr 22, 2005, at 8:11 AM, Jason Foreman wrote: >> So something like: <div id="foo">foo</div><a href="#" >> onclick="Element.toggle(''foo''); return false;">toggle foo</a> > > (This is not directed at you, Jason, just using your code as an > example.) > > As a web purist, I (and many others) assert that the above is a > terrible way to provide an HTML element that invokes a client-side > HTML event. Please read: > http://tom.me.uk/scripting/links.asp > on why it''s bad, and things you should do instead. > > Another (perfectly valid) option is the <button> element. > > (The few other short articles at http://tom.me.uk/scripting/ are also > all worth a read.) > > > -- > (-, /\ \/ / /\/ > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
Ben Schumacher
2005-Apr-22 15:55 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
In addition, I believe that the anchor version is, in fact, *more* accessible with regard to software used to aid the blind and visually impaired, since most software won''t check the clickability of <span> elements, but always treat anchors as tab-stops. (Try it out on IE.) This was one of the early complaints about Gmail when it was first released. Now arguably, I would question how well those same software packages would handle elements being hidden/exposed, but regardless, I think this use of anchors is a widely accepted norm. bs. On 4/22/05, Thomas Fuchs <thomas-9D208sng4xU@public.gmane.org> wrote:> Hmm. > > A) <a href="#" onclick="doSomething(); return false;">Link text</a> > > vs. > > B) > > <style type="text/css"> > .link { > color: #00f; > text-decoration: underline; > cursor: pointer; > cursor: hand; > } > </style> > <span class="link" tabindex="0" onclick="doSomething();">Link > text</span> > > Where (B) is not standards-compliant and does not work in all browsers. > > I know what I would choose. > > Of course, for this special circumstances, a <button> element would be > much > closer to what the HTML spec has in mind. > > BTW: As per RFC 2396 an URI of "#" is perfectly valid, as > the fragment identifier (that is, what follows the #) is defined > as *uric (where * means 0 or more charaters). > > -- > thomas > > Am 22.04.2005 um 16:21 schrieb Gavin Kistner: > > > On Apr 22, 2005, at 8:11 AM, Jason Foreman wrote: > >> So something like: <div id="foo">foo</div><a href="#" > >> onclick="Element.toggle(''foo''); return false;">toggle foo</a> > > > > (This is not directed at you, Jason, just using your code as an > > example.) > > > > As a web purist, I (and many others) assert that the above is a > > terrible way to provide an HTML element that invokes a client-side > > HTML event. Please read: > > http://tom.me.uk/scripting/links.asp > > on why it''s bad, and things you should do instead. > > > > Another (perfectly valid) option is the <button> element. > > > > (The few other short articles at http://tom.me.uk/scripting/ are also > > all worth a read.) > > > > > > -- > > (-, /\ \/ / /\/ > > > > _______________________________________________ > > Rails mailing list > > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
Ramin
2005-Apr-22 16:01 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
Why is there so much talk about accessibility and graceful degredation? Why is it SO important that we make everything so backwards compatible, accessible, degredable, etc.? If a href="#" onclick="" works and works 99.9%of the time for 99.9% of the population, then use it. It really doesn''t matter THAT much. Now if you are developing a web site or an application that will be used by users with accessbility issues (blind, old, def, etc.), then you should pay more attention to how you do things. Even in that case almost every screen reader will know how to deal with such cases. I care about clean code and semantically correct markup, but sometimes people take it to a different level. I think some people care a little TOO much. They''ll spend hours trying to figure out how to make their buttons or links "backwards compatible" so that non graphical browsers and users on Lynx can have access to their content. How many people do you really know that use a non graphical browser like Lynx? I know 0. I say, who cares.. let them get a real browser. If they cant access my javascript enabled content area, then thats fine with me. If the rest of the 99.9% of the population can see it and it saves me 3 hours of development time, then I''ll worry about that 99.9% and save myself the trouble. Sorry.. had to get that out. Sometimes it just feels like people spend way too much time regarding things that really don''t matter. Please spend that same time making your designs nicer, your layout cleaner, your content more interesting and don''t worry so much about your anchor links. My $0.02 On 4/22/05, Thomas Fuchs <thomas-9D208sng4xU@public.gmane.org> wrote:> > Hmm. > > A) <a href="#" onclick="doSomething(); return false;">Link text</a> > > vs. > > B) > > <style type="text/css"> > .link { > color: #00f; > text-decoration: underline; > cursor: pointer; > cursor: hand; > } > </style> > <span class="link" tabindex="0" onclick="doSomething();">Link > text</span> > > Where (B) is not standards-compliant and does not work in all browsers. > > I know what I would choose. > > Of course, for this special circumstances, a <button> element would be > much > closer to what the HTML spec has in mind. > > BTW: As per RFC 2396 an URI of "#" is perfectly valid, as > the fragment identifier (that is, what follows the #) is defined > as *uric (where * means 0 or more charaters). > > -- > thomas > > Am 22.04.2005 um 16:21 schrieb Gavin Kistner: > > > On Apr 22, 2005, at 8:11 AM, Jason Foreman wrote: > >> So something like: <div id="foo">foo</div><a href="#" > >> onclick="Element.toggle(''foo''); return false;">toggle foo</a> > > > > (This is not directed at you, Jason, just using your code as an > > example.) > > > > As a web purist, I (and many others) assert that the above is a > > terrible way to provide an HTML element that invokes a client-side > > HTML event. Please read: > > http://tom.me.uk/scripting/links.asp > > on why it''s bad, and things you should do instead. > > > > Another (perfectly valid) option is the <button> element. > > > > (The few other short articles at http://tom.me.uk/scripting/ are also > > all worth a read.) > > > > > > -- > > (-, /\ \/ / /\/ > > > > _______________________________________________ > > Rails mailing list > > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
One thing to keep in mind in regards to the display attribute of an element and how javascript handles it. If you have a DIV and you have set the display: ''none'' within your style sheet (meaning, not inline on the element itself), then trying to access the style.display attribute of that element using javascript will NOT return ''none'', but rather an empty string. This is because javascript has no concept of the styles defined on an element unless it is specifically defined inline on that element itself. Not sure how Element.toggle handles this. It might assume that if an element returns an empty string then it is visible or hidden. You can''t really be sure. So what I do is I always set <div style="display: none"></div> on the element itself and not within the stylesheet definition. This way the javascript code knows for a fact that its hidden and toggle will know what to do... On 4/22/05, Jason Foreman <threeve.org-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > Can anyone explain to an Ajax newbie (and even JS newbie) how to go > > about toggling the display of one or two divs when a link is clicked? > > This is really just Javascript, nada to do with Ajax. > > If you''ve got the latest Rails, look for Element.toggle(). Older ones > can use Toggle.display(). > > So something like: <div id="foo">foo</div><a href="#" > onclick="Element.toggle(''foo''); return false;">toggle foo</a> > > > Jason > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
I use classnames for my toggling. Sometimes there''s more to my on/off states than display:none/block. I set the on/off states as two CSS classes and toggle them with JS. Maybe I''ll bust off a quick ToggleClass helper method for that if anyone''s interested. -- rick http://techno-weenie.net
Joost Diepenmaat
2005-Apr-22 16:27 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On Fri, Apr 22, 2005 at 12:01:44PM -0400, Ramin wrote:> Why is there so much talk about accessibility and graceful degredation? Why > is it SO important that we make everything so backwards compatible, > accessible, degredable, etc.?I''ve done a fair amount of government websites here in the Netherlands, and I can tell you they''ll just *insist* on it. They basically enforce the WCAG level 1 or 2: http://www.w3.org/TR/WCAG10/ IIRC, the US have more or less the same policy.> Now if you are developing a web site or an application that will be used by > users with accessbility issues (blind, old, def, etc.), then you should pay > more attention to how you do things.For any general website, I would assume that: # of blind visitors + # of visually impaired visitors (colour blind, elderly etc.) would be > 10%, possibly a lot more if you''re actually proving a useful service. Remember that for a blind person, the internet is a *very* useful source of information precisely because you *don''t* need any special braille/audio editions of electronic text.>Even in that case almost every screen > reader will know how to deal with such cases.<div onclick="document.location.href="some/url.html"> ? probably not. screen readers also have a hard time with popups, frames, dynamically generated/hidden content etc.> I care about clean code and semantically correct markup, but sometimes > people take it to a different level. I think some people care a little TOO > much. They''ll spend hours trying to figure out how to make their buttons or > links "backwards compatible" so that non graphical browsers and users on > Lynx can have access to their content.The hard work usually has nothing to with graphical browsers, but with providing a workaround for a much too complex (and usually buggy) javascript system. I usually prefer to work the other way around: make it work without JS first, and then add it to speed up the process for people who''ve got it available.> How many people do you really know > that use a non graphical browser like Lynx?I do, when my X configuration is messed up :-) Then I''m very glad I can still get at some useful information on correcting the problem.> I know 0. I say, who cares.. let > them get a real browser. If they cant access my javascript enabled content > area, then thats fine with me. If the rest of the 99.9% of the population > can see it and it saves me 3 hours of development time, then I''ll worry > about that 99.9% and save myself the trouble. > > Sorry.. had to get that out. Sometimes it just feels like people spend way > too much time regarding things that really don''t matter. Please spend that > same time making your designs nicer, your layout cleaner, your content more > interesting and don''t worry so much about your anchor links.If you have a clean layout, providing a site that just works without javascript isn''t hard at all.> My $0.02Likewise. Joost.
Andrew Semprebon
2005-Apr-22 16:46 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On 4/22/05, Joost Diepenmaat <joost-wg/WqLBuUjRmR6Xm/wNWPw@public.gmane.org> wrote:> I''ve done a fair amount of government websites here in the Netherlands,and> I can tell you they''ll just *insist* on it. They basically enforce theWCAG> level 1 or 2: > > http://www.w3.org/TR/WCAG10/ > > IIRC, the US have more or less the same policy.Yes, they do (Section 508 <http://www.section508.gov/>). I''ve developed a web application for a government agency, and was responsible for making sure it was accessible.> If you have a clean layout, providing a site that just works withoutjavascript> isn''t hard at all.Exactly. If you know what the basic rules are, making a site accessible is not difficult. And I''ve found there are plenty of other benefits, like easier functional testing, better functioning across different browsers, etc. _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
Jason Foreman
2005-Apr-22 17:13 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On 4/22/05, Ben Schumacher <benschumacher-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> In addition, I believe that the anchor version is, in fact, *more* > accessible with regard to software used to aid the blind and visually > impaired, since most software won''t check the clickability of <span> > elements, but always treat anchors as tab-stops. (Try it out on IE.) > This was one of the early complaints about Gmail when it was first > released.I think Gavin''s point was that for things like client side Javascript, that simply does some visual trickery, that an anchor is a semantically incorrect thing to use. An anchor implies navigation... ''click'' this, and i''ll take you here... This is an assumption that I believe is used in all reader software. So using a button or something else which does not have this assumption attached to it makes for a more accessible (in terms of compliance with accepted standards) website. Jason
David Morton
2005-Apr-22 18:02 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 Jason Foreman wrote: | So using a button or something else which does not have this | assumption attached to it makes for a more accessible (in terms of | compliance with accepted standards) website. An interesting note, though. The extensive use of ajax creates a new type of use for web pages and browsers. Instead of a "web page", the view is now an application. A new set of "standards" is needed for this type of application. Granted, it doesn''t fit with old standards. Does that mean we are doomed to never come up with new ways of doing things? Funny, I thought rails was a whole new way of doing things. I guess we better stop developing rails. I haven''t tried, but does google maps work for everyone? In the design of some applications, a requirement may be to have a line of text that is clickable and then causes an action... probably some change in the page. A button may simply look wrong. In this case, an anchor seems to be the right thing to do. If you are concerned about accessability, provide a browser sniffer or something to display a different view that the browser can handle. and on to rabbit trail... That brings up an issue that I would like to see implemented... themeable views. I would like to be able to put all views in a subdirectory per theme: app/ ~ views/ ~ /theme1 ~ /index.rhtml ~ .... ~ /theme2 ~ /index.rhtml That way, you could have totally different designs availble, which could also be designed for different types of clients. wap, blind, high-tech... - -- David Morton Maia Mailguard server side anti-spam/anti-virus solution: http://www.maiamailguard.com -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.2.5 (GNU/Linux) Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org iD8DBQFCaTwlSIxC85HZHLMRAqfnAJ92DSBGAzGadMRAClUbAjxp9p7RhgCfQkko 7IzOUwD2Sx9tBU0MkND+tdQ=MVVX -----END PGP SIGNATURE-----
using class names to toggle the display is an iteresting approach. I use the same technique when I''m highlighting rows of a table onmouseover. I guess the same logic can be applied to the display attribute of an element. Instead of creating a toggleclass help, maybe you should add it to the Prototype project as one of the js functions. Element.ToggleClass(element) On 4/22/05, Rick Olson <technoweenie-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > I use classnames for my toggling. Sometimes there''s more to my on/off > states than display:none/block. I set the on/off states as two CSS > classes and toggle them with JS. Maybe I''ll bust off a quick > ToggleClass helper method for that if anyone''s interested. > > -- > rick > http://techno-weenie.net >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
David Morton wrote:> That brings up an issue that I would like to see implemented... > themeable views. I would like to be able to put all views in a > subdirectory per theme: > > app/ > ~ views/ > ~ /theme1 > ~ /index.rhtml > ~ .... > ~ /theme2 > ~ /index.rhtml > > That way, you could have totally different designs availble, which could > also be designed for different types of clients. wap, blind, high-tech...You''re probably better off trying as hard as you can to use the same templates but different CSS per-theme. However: class ApplicationController < ActionController::Base before_filter :choose_theme private def choose_theme ActionController::Base.template_root = File.join(RAILS_ROOT, ''app/views'', @params[''theme'']) end end Best, jeremy By the way, you can get rid of the leading ~ by turning off flowed text support in enigmail prefs.
Julian ''Julik'' Tarkhanov
2005-Apr-22 19:49 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On 22-apr-05, at 18:01, Ramin wrote:> Why is there so much talk about accessibility and graceful > degredation? Why is it SO important that we make everything so > backwards compatible, accessible, degredable, etc.? If a href="#" > onclick="" works and works 99.9% of the time for 99.9% of the > population, then use it. It really doesn''t matter THAT much.This kind of opinion is exactly what someone says when he slaps an ActiveX control into an IE-only page and dares to call this "accessible web-application". Guess what I want to do with him as a Mac user? Chainsaw. And then fried on the biggest stove on the lowest possible level down there somewhere. Slowly. -- Julian "Julik" Tarkhanov
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 Jeremy Kemper wrote:> You''re probably better off trying as hard as you can to use the same > templates but different CSS per-theme. However:For most themes, I agree, it would be better, but there are a few types of renderings that may be drastically different.> > class ApplicationController < ActionController::Base > before_filter :choose_theme > > private > def choose_theme > ActionController::Base.template_root = File.join(RAILS_ROOT, > ''app/views'', @params[''theme'']) > end > endOh, nifty!> By the way, you can get rid of the leading ~ by turning off flowed text > support in enigmail prefs.Thank you! That was bugging me! - -- David Morton Maia Mailguard server side anti-spam/anti-virus solution: http://www.maiamailguard.com -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.2.5 (GNU/Linux) Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org iD8DBQFCaV9NSIxC85HZHLMRAvgSAJ0d9Y05PX/5aR6JdBOqMth4oYT8dwCePBj/ ngCIfKE6OyRAO36FkzJ7AXI=vKqV -----END PGP SIGNATURE-----
On Saturday, April 23, 2005, 12:11:05 AM, Jason wrote:>> Can anyone explain to an Ajax newbie (and even JS newbie) how to go >> about toggling the display of one or two divs when a link is clicked?> This is really just Javascript, nada to do with Ajax.> If you''ve got the latest Rails, look for Element.toggle(). Older ones > can use Toggle.display().> So something like: <div id="foo">foo</div><a href="#" > onclick="Element.toggle(''foo''); return false;">toggle foo</a>Thanks very much, Jason! (And everyone else, too.) This worked a charm, and even took account of my crusty old 0.11 Rails :) Gavin
Gavin Kistner
2005-Apr-23 01:44 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On Apr 22, 2005, at 9:46 AM, Thomas Fuchs wrote:> Of course, for this special circumstances, a <button> element would be > much > closer to what the HTML spec has in mind.Indeed. And for me, I feel that it''s a useful metaphor for the user if links (underlined text) always open a new page, while buttons (visually different) perform action on the current page. But that''s personal preference, not a definitive argument against using an anchor for text.> BTW: As per RFC 2396 an URI of "#" is perfectly valid, as > the fragment identifier (that is, what follows the #) is defined > as *uric (where * means 0 or more charaters).Absolutely. However, there are a great deal of things you can do which are syntactically correct, but not in the best interest of all users. (And conversely, there is also markup which is syntactically invalid but which makes logical sense and/or is a boon to usability or accessibility.) -- (-, /\ \/ / /\/
Gavin Kistner
2005-Apr-23 01:54 UTC
Re: Abusing HTML Anchors (was Re: Using Ajax to toggle the display of a div)
On Apr 22, 2005, at 10:01 AM, Ramin wrote:> Why is there so much talk about accessibility and graceful > degredation? Why is it SO important that we make everything so > backwards compatible, accessible, degredable, etc.? If a href="#" > onclick="" works and works 99.9% of the time for 99.9% of the > population, then use it. It really doesn''t matter THAT much.I hear what you are saying. However, note that: a) Simply on the matter of javascript alone, roughly 4-5% of the population does not have it enabled/available [1] b) If you can code something that works for the 96% AND also works for the additional 4%, isn''t that a noble goal? (You certainly may decide that you don''t have time to do it given the constraints of your deadline/free time, but the ideal should still be out there, no? :)> How many people do you really know that use a non graphical browser > like Lynx? I know 0. I say, who cares.. let them get a real browser. > If they cant access my javascript enabled content area, then thats > fine with me. If the rest of the 99.9% of the population can see it > and it saves me 3 hours of development time, then I''ll worry about > that 99.9% and save myself the trouble.I understand that attitude, and appreciate your position. I personally don''t know anyone who uses Lynx, nor any impaired people (except for one color-blind friend). The counterpoint that I offer (and that I strive for, though I will admit I don''t always achieve it) is that spending 3 hours of your time might save 30 seconds of time for 1% of 10,000 users, with each user experiencing the savings every time they visit your site (3 times? 5 times?). With these particular made-up numbers, that''s 5 man hours you''ve managed to save, and 100 people you''ve made happy (and perhaps saved them from leaving your site). Separate from those numbers, the laziness (and I''m not referring to you specifically) of programmers will always come back to haunt their users several thousand fold. Thanks for sharing the opposing view. A site is certainly no good if you can''t make it function correctly for the majority of users, so that should of course be your first goal. I simply contend that extra effort spent in development pays off in the long run. [1] http://www.thecounter.com/stats/2005/April/javas.php
On Apr 22, 2005, at 10:11 AM, Rick Olson wrote:> I use classnames for my toggling. Sometimes there''s more to my on/off > states than display:none/block. I set the on/off states as two CSS > classes and toggle them with JS. Maybe I''ll bust off a quick > ToggleClass helper method for that if anyone''s interested.It''s not Ajax, but if it helps: http://phrogz.net/JS/AddClassKillClass_js.txt The benefits of those classes are the ability to handle space-delimited CSS class strings with some precision. (If you wrap it into free code to include in rails, I''ll happily grant a license to freely include the code in rails without attribution.)
I am curious how you would construct the ToggleClass helper. I am a newbie and working through a similar problem. thanks, Steve On 4/22/05, Rick Olson <technoweenie-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I use classnames for my toggling. Sometimes there''s more to my on/off > states than display:none/block. I set the on/off states as two CSS > classes and toggle them with JS. Maybe I''ll bust off a quick > ToggleClass helper method for that if anyone''s interested. > > -- > rick > http://techno-weenie.net > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
Thats funny... i have very similar methods in my own library, but I call mine addClassName, removeClassName and containsClassName. Me thinks the next version of javascript should have these methods built in. They are very helpful. And I dont care what you purists say, document.getElementsByClassName is an awesome function and should be added to the javascript API as well. On 4/22/05, Gavin Kistner <gavin-XtLdkLkwz3ZWk0Htik3J/w@public.gmane.org> wrote:> > On Apr 22, 2005, at 10:11 AM, Rick Olson wrote: > > I use classnames for my toggling. Sometimes there''s more to my on/off > > states than display:none/block. I set the on/off states as two CSS > > classes and toggle them with JS. Maybe I''ll bust off a quick > > ToggleClass helper method for that if anyone''s interested. > > It''s not Ajax, but if it helps: > http://phrogz.net/JS/AddClassKillClass_js.txt > The benefits of those classes are the ability to handle space-delimited > CSS class strings with some precision. > > (If you wrap it into free code to include in rails, I''ll happily grant > a license to freely include the code in rails without attribution.) > >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
On Apr 23, 2005, at 10:59 PM, Ramin wrote:> And I dont care what you purists say, document.getElementsByClassName > is an awesome function and should be added to the javascript API as > well.Man, I''d never argue against that. Greater flexibility and power in DOM selection methods would be very nice, just like XPath. Heck, using CSS selectors to pick DOM elements is one of the things that makes Microsoft''s (non-standard) HTC so appealing to web developers. FWIW, here''s a JS implementation of what you ask for (untested, but should work): document.getElementsByClassName = function( className ) { var matchingTags = [], matchCount=0; var allTags = document.getElementsByTagName( ''*'' ); for ( var i=allTags.length-1; i>=0; --i ) { var theTag = allTags[ i ]; if ( HasClass( theTag, className ) ) { matchingTags[ matchCount++ ] = theTag; } } return matchingTags; } //Relies on http://phrogz.net/JS/AddClassKillClass_js.txt for the HasClass function
I made the additions to Prototype. I have a patch for Rails ready, but I realized that Prototype has its own darcs repository. I''ll make the patch there, as I''m assuming it''ll eventually make its way into Rails. I just have to figure darcs out now :) If anyone wants to look at my functions, I have them in my unfinished app currently: http://dev.comiclog.com/file/trunk/public/javascripts/prototype.js?rev=9&format=txt I changed the code a bit to try and match the style of the rest of the library. For instance, each app should take either a string id of a DOM element, or the actual element. Some examples: Element.toggleClass(''element-id'', ''hide''); Element.toggleClass(''element-id'', ''on'', ''off''); Element.getClasses(''element-id''); Element.removeClass(''element-id'', ''hide''); Element.addClass(''element-id'', ''hide''); Element.hasClass(''element-id'', ''hide''); -- rick http://techno-weenie.net
Personally, I''d prefer this: Element.Class.toggle(element, classname), Element.Class.add ... and so on and so forth. A function I''d like to see would be (i''ve used this in the autocompleter patch #960): /* in Element definition */ collectTextNodesIgnoreClass: function(element, ignoreclass) { var children = $(element).childNodes; var text = ""; var classtest = new RegExp("^([^ ]+ )*" + ignoreclass+ "( [^ ]+)*$","i"); for (var i = 0; i < children.length; i++) { if(children[i].nodeType==3) { text+=children[i].nodeValue; } else { if((!children[i].className.match(classtest)) && children[i].hasChildNodes()) text += Element.collectTextNodesIgnoreClass(children[i], ignoreclass); } } return text; } It gets every text node out of the element, except from those child (or grandchild or ...) elements that have a specific class set. -- thomas Am 24.04.2005 um 19:29 schrieb Rick Olson:> I made the additions to Prototype. I have a patch for Rails ready, > but I realized that Prototype has its own darcs repository. I''ll make > the patch there, as I''m assuming it''ll eventually make its way into > Rails. I just have to figure darcs out now :) > > If anyone wants to look at my functions, I have them in my unfinished > app currently: > http://dev.comiclog.com/file/trunk/public/javascripts/prototype.js? > rev=9&format=txt > > I changed the code a bit to try and match the style of the rest of the > library. For instance, each app should take either a string id of a > DOM element, or the actual element. > > Some examples: > > Element.toggleClass(''element-id'', ''hide''); > Element.toggleClass(''element-id'', ''on'', ''off''); > Element.getClasses(''element-id''); > Element.removeClass(''element-id'', ''hide''); > Element.addClass(''element-id'', ''hide''); > Element.hasClass(''element-id'', ''hide''); > > -- > rick > http://techno-weenie.net > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >_______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
I changed the method names at Thomas'' suggestion. Also, added support for multiple classes in the add/remove/has methods. I wrote a test page, recorded my changes, and sent them to Sam. BTW, darcs is really cool :) Element.Class.toggle(''element-id'', ''hide''); Element.Class.toggle(''element-id'', ''on'', ''off''); Element.Class.get(''element-id''); Element.Class.remove(''element-id'', ''hide''); Element.Class.add(''element-id'', ''hide''); Element.Class.has(''element-id'', ''hide''); // Element.Class.remove, add, and has all support multiple classes // adds red and green to the element Element.Class.add(''element-id'', ''red'', ''green''); // returns true if element has both blue and green Element.Class.has(''element-id'', ''blue, ''green''); If/when Sam puts it into Prototype, it will have the test page I wrote to demonstrate all that. The updated prototype.js that I''m using is now at http://dev.comiclog.com/file/trunk/public/javascripts/prototype.js?rev=10&format=txt if anyone wants it. -- rick http://techno-weenie.net
I tried implementing this simple example below and when I click to toggle, nothing happens. What am I doing wrong? Here is the relevant line in my rails code: <div id="bullet">test</div><%= link_to_function("Toggle Test", "Element.display(''bullet'')") %> Here''s the resultant html code: ..... <meta http-equiv="imagetoolbar" content="no" /> <script language="JavaScript" src="/javascripts/prototype.js" type="text/javascript"></script> ..... <div id="bullet">test</div><a href="#" onclick="Element.toggle(''bullet''); return false;">Toggle Test</a> The bullet stylesheet reference: div#bullet { background-image:url(/images/yellow_diamond.gif); background-repeat: no-repeat; padding-left: 15px } I''m running rails .11. I''m a newb to both ruby and javascript, so it''s probably something simple. The bullet icon shows up properly. I expect the bullet to go away if I click on the ''Toggle Test" link. Any suggestions? On 4/22/05, Gavin Sinclair <gsinclair-81uBx+iSpXA0n/F98K4Iww@public.gmane.org> wrote:> On Saturday, April 23, 2005, 12:11:05 AM, Jason wrote: > > >> Can anyone explain to an Ajax newbie (and even JS newbie) how to go > >> about toggling the display of one or two divs when a link is clicked? > > > This is really just Javascript, nada to do with Ajax. > > > If you''ve got the latest Rails, look for Element.toggle(). Older ones > > can use Toggle.display(). > > > So something like: <div id="foo">foo</div><a href="#" > > onclick="Element.toggle(''foo''); return false;">toggle foo</a> > > Thanks very much, Jason! (And everyone else, too.) > > This worked a charm, and even took account of my crusty old 0.11 > Rails :) > > Gavin > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
On Tuesday, April 26, 2005, 3:09:12 AM, Steve wrote:> I tried implementing this simple example below and when I click to > toggle, nothing happens. What am I doing wrong? Here is the relevant > line in my rails code:> <div id="bullet">test</div><%= link_to_function("Toggle Test", > "Element.display(''bullet'')") %>> [...]> I''m running rails .11. I''m a newb to both ruby and javascript, so it''s > probably something simple.Rails 0.11 uses Toggle.display, not Element.toggle. (And you''ve mistakenly written Element.display. Gavin
> Rails 0.11 uses Toggle.display, not Element.toggle. (And you''ve > mistakenly written Element.display.Ah good catch. I believe that in 0.12 Toggle.display points to Element.toggle so that old scripts wouldn''t work. Solution: Upgrade to the latest and be sure to get the latest prototype.js (alternately you can grab the js directly from here: http://prototype.conio.net/dist/prototype-1.2.0.js) Or, use Toggle.display... -- rick http://techno-weenie.net