Thank you all for your nice tips !! In my case it is better to change effect, fadeIn / fadeOut
My table is quiete complexe and I ahd troubles with the slide Up / Down. FadIn / Out works perfectly in FireFox, but not in IE 6 ! There is no effect at all. Here is my example : (u will not like my HTML / CSS, it's because I want to display and align elemnts in a complex way) : <!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> <script type="text/javascript"> jQuery(document).ready(function() { $("#level2").hide(); $("#goLevel2").click(function(){ $("#level2:hidden").fadeIn("slow"); }); $("#backLevel1").click(function(){ $("#level2:visible").fadeOut("slow"); }); }); </script> <title></title></head><body> <form id="searchbarform" action="#"> <table border="0" style="margin-left:auto;margin-right:auto;width:100%;"> <!-- FIRST ROW --> <tr id="level1"> <td style="width:150px"> Search </td> <td> <label>Test</label> </td> <td> <select size="1"> <option value="Test" selected="selected">Test</option> <option value="Test">Test</option> <option value="Test">Test</option> </select> </td> <td> to </td> <td align="right"> <select size="1"> <option value="Test">Test</option> <option value="Test">Test</option> <option value="Test" selected="selected">Test</option> </select> </td> <td style="padding-right:20px;"> </td> <td> <label>Test</label> </td> <td style="width: 140px;"> <select size="1" style="width: 100%;"> <option value="Test" selected="selected">Test</option> <option value="Test">Test</option> </select> </td> <td style="padding-right:20px;"> </td> <td align="right"> # More Options >> </td> </tr> <!-- SECOND ROW --> <tr id="level2"> <td style="padding-top:15px;"> <div> # <<Less Options </div> </td> <td style="padding-top:15px;"> <div> <label>Test</label> </div> </td> <td colspan="3" style="padding-top:15px;"> <div> <select size="1" style="width: 100%"> <option value="Test" selected="selected">Test</option> <option value="Test">Test</option> <option value="Test">Test</option> </select> to <br/> <select size="1" style="width: 100%"> <option value="Test">1Test</option> <option value="Test">Test</option> <option value="Test" selected="selected">Test</option> </select> </div> </td> <td style="padding-right:20px;"> <div> </div> </td> <td style="padding-top:15px;"> <div> <label>Test</label> </div> </td> <td style="padding-top:15px;"> <div> <select size="1" style="width: 100%"> <option value="18" selected="selected">Test</option> <option value="19">Test</option> <option value="20">Test</option> </select> to <br/> <select size="1" style="width: 100%"> <option value="Test">Test</option> <option value="Test">Test</option> <option value="Test" selected="selected">Test</option> </select> </div> </td> <td style="padding-right:20px;"> <div> </div> </td> <td style="padding-top:15px;" align="right"> <div> </div> </td> </tr> </table> </form> </body></html> Karl Swedberg-2 wrote: > > Rick, > > That looks really great. Might be time to update the version of > jQuery on that site, though, because FF2 Mac gets the initial flicker > on the slideDown due to a jquery.js bug which has since been fixed. > > Also, Erik Beeson did some fantastic work with this, using iFrames: > http://erikandcolleen.com/erik/projects/jquery/content_table/ > > Of course, if you don't mind using a different effect, the fadeIn/ > fadeOut effects work just fine out of the box with table rows. > > > --Karl > _________________ > Karl Swedberg > www.englishrules.com > www.learningjquery.com > > > > On Jul 20, 2007, at 9:31 PM, Rick Faircloth wrote: > >> Oops… the URL should be: >> >> >> >> http://ha2.whitestonemedia.com/cfm/church_calendar.cfm >> >> >> >> Sorry… >> >> >> >> From: jquery-en@googlegroups.com [mailto:jquery- >> [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:jquery- >> [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. >> >> >> >> > > > -- View this message in context: http://www.nabble.com/Effect---Slide-Up-Down-tf4119902s15494.html#a11719085 Sent from the JQuery mailing list archive at Nabble.com.
