Oops. the URL should be:
http://ha2.whitestonemedia.com/cfm/church_calendar.cfm Sorry. From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth Sent: Friday, July 20, 2007 9:23 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Effect - Slide Up/Down I know this may sound goofy as a solution, but when I first starting working jQuery, one of the first things I tried to do was slide a table row. As you said, Glen, it's not a pretty sight. I tried something a little more radical. I use separate *tables* for each row with each table wrapped in a div. In other words, each row was a table in a div. I code ColdFusion, so I was outputting a query and looping it and would have one table as a row of general info, and the second table right below it (initially hidden) would hold details. A whole table would slide much more smoothly. Go to this link and click on any row in the church calendar and you'll see what I mean. http://ha2.whitestonemedia.com/cfm/calendar.cfm Rick From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Glen Lipka Sent: Friday, July 20, 2007 6:59 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Effect - Slide Up/Down Couple of issues. 1. You can use SlideToggle to reduce complexity alot. $("input.oneButton").click(function(){ $("#level2").slideToggle("slow"); }); However, you may WANT two buttons. 2. You can't really slideup a TR. Its not that flexible in that. I whipped up a demo to show a possible solution. http://www.commadot.com/jquery/selectors/slidingRow.htm There probably is an easier way, but this was my first thought. Glen On 7/20/07, debussy007 <[EMAIL PROTECTED]> wrote: Hi, I try to apply effect on a very basic example, But I can't have it working. Can anyone help me with this ? Thank you !! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <script type="text/javascript" src="js/jquery- 1.1.3.1.pack.js"></script> <style type="text/css">#level2 {background-color:#DFEBFF;}</style> <script type="text/javascript"> $(document).ready(function(){ $("input.buttonBslidedown").click(function(){ $("#level2:hidden").slideDown("slow"); }); $("input.buttonBslideup ").click(function(){ $("#level2:visible").slideUp("slow"); }); }); </script> <title></title></head> <body> <input type="button" value="Slide Out" class="buttonBslideup" /> <input type="button" value="Slide In" class="buttonBslidedown" /> <br/><br/> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr id="level2"> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table></body></html> -- View this message in context: http://www.nabble.com/Effect---Slide-Up-Down-tf4119902s15494.html#a11717084 Sent from the JQuery mailing list archive at Nabble.com.
