SO: I sent a message few weeks ago about some advice on genericizing my code for the motion test example posted here:
http://motiontest.inforetail.com/OLDindex.php I got some feedback, as well as some finalized specs for the design and motion themselves, and have tried putting them to the test. The specs are as such: - Screen loads with three equally sized boxes - one any one of those boxes is clicked, it grows to a larger size, and the other two shrink to a smaller size. (read: the 3rds dimensions are no longer relevant). - This behavior remains true for all 3 boxes- click one, it grows for content, the other two shrink. Total size remains the same. To make things additionally fun, we have a logo with transparency in each box that needs float "over" a black bar that animates with rollover. I've temporarily commented out the rollover code - it works, though I have a quick question to follow on that. The revised version is here: http://motiontest.inforetail.com/index.php HOWEVER: the first time you click any of the regions, everything falls over everything else. If you click a second time, you'll find everything gets lined up again and behaves exactly as intended. The relevant bits are here - that last statement just removes the CSS class that specified the original "in thirds" heights for each box...: $("[EMAIL PROTECTED]").each(function() { $(this).click(function(){ var $$ = $(this); $$.animate({height: 204}, "fast", function(){ $$.children("div.addContent:hidden").fadeIn("slow"); $$.children("h2").children("span.handle:visible").fadeOut ("slow"); }); var $others = $("[EMAIL PROTECTED]").not(this); $others.children("div.addContent:visible").fadeOut("normal", function(){ $others.animate({height: 48}, "fast"); $others.children("h2").children("span.handle:hidden").fadeIn ("slow"); $others.children("div.logoBg").animate({height: 10}, "fast"); }); $("[EMAIL PROTECTED]").removeClass("loadThirds"); For reference, all the JS is in the page, but the styles are in / _styles/main.css So, primary questions are: 1. Anyone have any idea why the first click would fail causes CSS havoc, but all subsequent clicks re-align everything and work just fine? 2. Rather than manually animating the height, should I be setting the height in an additional class and switching to that? Will Jquery LET me animate the transition between classes (color, height, or other?) Also: My rollover code works fine, but is a little "glitchy" in practice because of my z-indexed and positioned elements within each box, in Flash lingo, my "hit state" is screwed up. Any recommendations? You can see it in the page under //MOUSEOVERS. I don't really want to create a transparent box that gets animated to the same sizes as my "real" boxes each time just to register the mouseovers. :) As always, thank you all for your time and brains. best, Brendon 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 >> discuss@jquery.com >> 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 > discuss@jquery.com > http://jquery.com/discuss/ _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
