here is a demo of the table http://www.commadot.com/jquery/events/table.htm
You should think about your html like a giant tree. The <html> tag is the trunk, then the <body> tag is a branch, and then the <table> tag is a branch off that, and so on and so on, down through each nested item. Climbing up means towards the trunk of the tree. Siblings are branches right next to something. A great tool, which is sounds like you may not have it Firebug for Firefox and IE Dev Toolbar for Internet Explorer. They are MUST HAVE tools for any web developer. They are absolutely essential. Google for them and you will see. Ooops, kids need to be brought to the park. Gotta run. :) Glen On 7/21/07, Mitchell Waite <[EMAIL PROTECTED]> wrote:
I believe I am getting it. I bet all the luckers are rolling on the floor with laughter at my naivety. That's fine, I can look silly. I'd love to see your table example so I can hammer this home. Seeing the code would help me understand how "this" gets turned into a colored background. because this statement "Whatever row the user clicked on...climb up to the TR and give it a new css class called Foo. Just brought up more questions. What does "climb up" mean? How does assigning a class to a certain row make it change color? Do you mean the class has a css statement in it for background-color: #FFFFFF for example? Mitch *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On Behalf Of *Glen Lipka *Sent:* Saturday, July 21, 2007 5:22 PM *To:* jquery-en@googlegroups.com *Subject:* [jQuery] Re: Click to Call a Function Part 2 $(this) is the anchor link the user clicked on. What is nice about jquery is the whole concept of $(this). Once you know what the user moused over or clicked on or dragged or whatever, you have a place to start in your code. For instance, let's say you had a table with ten rows. and this code: $('td').click(function(){ $(this).parents("tr").addClass("foo"); }); That means you would be binding a click event to EVERY row, and use one single click function to mean, "Whatever row the user clicked on...climb up to the TR and give it a new css class called Foo. It's incredibly powerful. One of my first jQuery examples used the same thing but with a mouseover instead of a click. That let me highlight the background of the row the user was one. My goodness, I was so happy to be gone with onmouseover and onmouseout of every single TR. This line: $("#console a." + type).fadeIn(1000); Basically what it means is that I want to end up with one of the following: $("#console a.click").fadeIn(1000); $("#console a.over").fadeIn(1000); $("#console a.out").fadeIn(1000); But rather than make 3 lines. I used a flexible feature of jQuery which is using variables in the middle of the statement. I ended the part in quotes after the a-dot, and then used + type. "Type" is just a made up word. I could have said eventType or Foo. If you notice all the lines that call this had the type in the parenthethes. showLink( *"over"*). So it's kind of like a fancy CSS rule builder using a variable. I consider it an advanced technique (FOR ME). I am not a programmer. The tutorials are a great place to start. I would do all the basic examples first. You will be surprised how much foundation they give you. Glen On 7/21/07, *Mitchell Waite* <[EMAIL PROTECTED]> wrote: There is LOT going on in your excellent examples, lots for me to ponder. For the first example it appears that first you make single container called #console which you use to display what I think are links (a). Then you set its display to none so its invisible. $(document).ready(function(){ $('#nest').click(function(){ showLink("click"); }); $('#nest').mouseover(function(){ showLink("over"); }); $('#nest').mouseout(function(){ showLink("out"); }); $('#console a').click(function(){ $(this).fadeOut("slow"); }); }); Here I believe you attaching four mouse events to the #nest div, and calling the showlink function with a parameter that displays the name of the event. This so much simpler then my approach where I hide and showed DIVs that contained static messages. However my actual goal is not to display messages but to reveal more graphics but how would you have known that? So I will next post what my actual goal is in a new demo. Still I love this method. $('#console a').click(function(){ $(this).fadeOut("slow"); }); I think this cool piece of code says that any link in the div #console should fadeout slowly if it receives a click. *I don't know what (this) means however.* function showLink(type) { $("#nest").fadeTo(1000, .5); $("#console a." + type).fadeIn(1000); } I think this function does a double duty which I did not know you could do. First $("#nest").fadeTo(1000, .5); fades the #nest image to 50%. However unlike my example yours fades on any mouseover, mine just did it on a click event. That's because all you events call the same routine. I would like to distinguish the Mouseover from the Click. Then I think this piece of code, which again is a lot for a beginner $("#console a." + type).fadeIn(1000); Takes any link that has been clicked and somehow comes up with a string like mouse over, but god only knows how it works. Thanks for all the emails, I'll take as many as you can deliver. I'm going to wait till I grok this before moving to the fancy smanchy one. Mitch *From:* jquery-en@googlegroups.com [mailto: [EMAIL PROTECTED] *On Behalf Of *Glen Lipka *Sent:* Saturday, July 21, 2007 2:43 PM *To:* jquery-en@googlegroups.com *Subject:* [jQuery] Re: Click to Call a Function Part 2 Ok, sorry for the 4 emails. A better way: http://www.commadot.com/jquery/events/ Also, here is a way to get fancy pants with it. Uses Brandon's behavior plugin. My first use of it. http://www.commadot.com/jquery/events/append.htm Glen On 7/21/07, *Glen Lipka* <[EMAIL PROTECTED]> wrote: Ok, sorry, Im dense today and clicking "send" too quickly. :( Yes, there is a better way. Ill whip up a demo. brb Glen On 7/21/07, *Glen Lipka* <[EMAIL PROTECTED]> wrote: I didnt quite understand what you are saying for the follow up questions. 1. best way to do what? 2. Which statement is getting repeated that you dont want to? Glen On 7/21/07, *Glen Lipka* <[EMAIL PROTECTED]> wrote: The height of the div id=nest is 208px, but the image inside it is 260px; Line 40. Make them both 260 and it should stop clipping. Glen On 7/21/07, *Mitchell Waite* <[EMAIL PROTECTED]> wrote: Its Mitch again learning about clicks and events:) I set up this test page http://www.whatbird.com/wwwroot/test.html Mouseover the nest image and it displays a message about the event. Click on the nest and fades to 50% opacity. Notice how the bottom gets clipped? I can't figure this out. Two other questions. 1. Is this the right or best way to do this? 2. Is there a way to specify the hiding of the message without having to repeat the same statement for every time you want to hide it? Thanks for helping the dummy Mitch
