Rails - Apr 2005 - Using Ajax to toggle the display of a div

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

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.)


--
(-, /\ \/ / /\/

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 HTML
I 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

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
>

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
>

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

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.02
Likewise.

Joost.

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
the
WCAG
> 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 without 
javascript
> 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

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

-----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.

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
> end
Oh, 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

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.)


--
(-, /\ \/ / /\/

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