Thanks mucho. just getting around to trying this... I'm actually
working on a rollover behavior at the moment, but used your technique
to loop through each of the boxes and it's fantastic.
I may run into a question as I use it more, but I think I'm getting
the hang of this. Thanks again for your example...
- B
On Mar 12, 2007, at 5:36 PM, Daemach wrote:
>
> I'm relatively new as well but I might be able to shed some light.
>
> This is one generic method:
>
> $("[EMAIL PROTECTED] a.open").each(function() {
> $(this).click(function(){
> var $$ = $(this);
> if
> ($$.parents("div").children("div.addContent").is(":hidden")){
>
> $$.parents("div").siblings("div").children
> ("div.addContent:visible").children(".floater").fadeOut("slow",
> function(){
>
> $(this).parents("div.addContent").slideUp("slow", function
> () {
>
> $$.children(".handle").hide().end().parents("div").children
> ("div.addContent").slideDown("slow",function(){
>
> $(this).children(".floater").fadeIn("slow");
> });
> })
> });
> }
> });
> });
>
> First, when you're looping over results from a selector you should
> use the
> "each" function, which puts each element in the selector results
> array in
> the "this" scope. this function, for example, finds all a.open
> elements
> that are children of divs that have an id that begins with "home"
> then sets
> their click handlers using "this".
>
> I'm not certain that this long of a chain would be considered a best
> practice, but it is doable. One of the best ways to see what jQuery
> selectors are returning is by trying the selectors in the firebug
> console or
> using console.log($("myselector")) in your code. you can log the
> "this"
> scope in anonymous functions to see what they are being handed.
>
> regarding order of events, I would say it's up to you. play with
> it until
> you like what you're getting. On the fadeins/outs above you may
> consider
> putting the images/text into table cells or use absolute
> positioning to keep
> the image from collapsing and expanding. The movement of the text
> makes the
> animation kind of jerky.
>
>
> Brendon Bushman wrote:
>>
>> hello all-
>> I'm new to jquery, and a novice javascript coder with a basic working
>> knowledge of OOP from java. I'm trying to create some animated boxes
>> for a client page- right now, i have a basic motion test with
>> placeholders just to see how this would work here:
>>
>> http://inforetail.com/motiontest/
>>
>> You can look at the page to see the BASE behavior I'm looking for.
>> And If you take a look at the code, it's nasty- I've got a series of
>> statements tied to custom click events for each link, which act on
>> each box accordingly.
>>
>> Ideally, I'd like to genericize this so that the action of opening
>> one box and closing the others is as simple as possible; I see two
>> ways to do this:
>> 1. Using a combination of the "this" statement and whatever parental
>> transversal techniques I would need to automatically identify the
>> enclosing box, and then then do the rest... but I'm quite unclear on
>> using "this", and not sure of the best way to have a set of functions
>> that run on both the parent and various other children of that
>> parent.
>>
>> 2. Write my own function that gets tied to the onclick even in the
>> html, that passes in the enclosing div name, i.e. onclick="divOpen
>> (homeIR);" and pass that along to the requisite jquery statements
>> within the function. But again, not sure the best way to identify
>> the other divs. My other concern with this method is specifying and
>> calling it from the HTML... is this less accessible or otherwise a
>> compromise from being able to trigger the event from within the
>> document.ready function like I am now?
>>
>> or maybe some combination thereof.
>>
>> Also, some related questions:
>> 1. is my best way to control order of operations (i.e. CLOSE the
>> other Div BEFORE you open the one that is clicked) using the callback
>> portion of a function?
>>
>> 2. ultimately, just like my fading image now, I may have a number of
>> fades and other actions on children of the opening and closing DIVs
>> that would get built into this. Does that change the answer to my
>> main question?
>>
>> 3. Obviously, there may be a far more elegant way to do all of this -
>> if I'm barking up the wrong tree, just say so. :)
>>
>> Thanks in advance for any light you can shed on this...
>>
>> best,
>> Brendon
>>
>>
>> _______________________________________________
>> jQuery mailing list
>> [email protected]
>> http://jquery.com/discuss/
>>
>>
>
> --
> View this message in context: http://www.nabble.com/best-
> practices---using-jquery--in-functions-tf3391410.html#a9443929
> Sent from the JQuery mailing list archive at Nabble.com.
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
