Hi,
Caveat: I don't use script.aculo.us, but I run across it a lot because
I use Prototype. :-)
> $(y.element().id+"AddrDIV").toggle('slide'); //toggles correctly,
but without effect
That's because Element#toggle is a Prototype thing[1]. I don't think
script.aculo.us overwrites it (but I could be wrong).
> //new Effect.toggle('y.element().id+"AddrDIV"', 'slide'); //doesn't
work at all
You've put the ID in quotes, and so the ID it's looking for literally
is 'y.element().id+"AddrDIV"'. Without the quotes, it should work
(provided the target element exists). I think that Effect.toggle
probably wants a parameter, though, to tell it *how* to toggle (slide,
etc.). Also, be sure your DOM structure is correct; see the notes on
the Effect.toggle documentation page[2].
[1] http://api.prototypejs.org/dom/element.html#toggle-class_method
[2] http://wiki.github.com/madrobby/scriptaculous/effect-toggle
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Jan 21, 12:11 am, kenxle <kenstcl...@gmail.com> wrote:
> Hi, I've been beating my head over this issue for the last two days,
> so I appreciate in advance any help that is given.
>
> I've got Prototype set up in an "unobtrusive" style, which I much
> prefer, but I can't seem to get the scriptaculous effects to work.
> When I put the scriptaculous calls inline in the HTML, they work
> correctly, so I know the files are linked correctly. Here's a code
> snippet.
>
> <script type="text/javascript" src="./prototype/prototype.js"></
> script>
> <script type="text/javascript" src="./prototype/scriptaculous.js"></
> script>
>
> <script type="text/javascript">
> document.observe("dom:loaded", function() {
> //alert("hello unobtrusive prototype!");
>
> // set hrefs to void so they won't reload page. they are <a> instead
> of <div> or <span> so it will autochange cursor
> $$('.moreInfo').each(function(x){
> x.href="javascript:void(0);"
> });
>
> $$(".dealerAddress").invoke("hide");
>
> //onclick, show address
> $$('.moreInfo').invoke("observe", "click", function(y){ //y is
> the mouseEvent: click
> $(y.element().id+"AddrDIV").toggle('slide'); //toggles
> correctly,
> but without effect
> //new Effect.toggle('y.element().id+"AddrDIV"', 'slide');
> //doesn't
> work at all
> });});//close dom:loaded
>
> </script>
>
> <a id="4Link" class="dealerLink" href="http://www.co.com/"; title="Go
> to their store">a removed name</a>
> <a id="4" class="moreInfo" href="" title="Expand address info">[info]</
> a><br />
> <div id="4AddrDIV" class="dealerAddress">
> removed info, all simple plaintext
> </div>
>
> <a id="5Link" class="dealerLink" href="http://www.co.com/"; title="Go
> to their store">another removed name</a>
> <a id="5" class="moreInfo" href="" title="Expand address info">[info]</
> a><br />
>
> <div id="5AddrDIV" class="dealerAddress">
> more plaintext
> </div>
>
> Quick overview of the functionality:
> When user clicks [info], it grabs that elements id, then appends
> "AddrDIV" to access to related address div. All the divs are set up
> with proper associated id names, and there is a name in front of the
> number that I have removed.
>
> Like I said, I tested a single element with an inline call, and it
> worked, but I really would like to keep this unobtrusive. I'm 2 days
> into learning Prototype/Scriptaculous, and am moving over from jQuery
> (if you couldn't tell by the code style :) ).
>
> Any help would be appreciated. Thanks!
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
