Hello All, I am facing problems while rendering the effect (slide up/down and shrink/grow)in firefox.
I have a div tag in my document that acts as a container for my update region in my page. The ajax response updates the content in the area, and some effects are applied on this region when the area has been updated. The effects work perfectly when the update area region (i.e. html code recieved from my ajax call) doesnot have any div tags with the style property of "overflow:auto". In the slide up/down effect all other contents seem to render ok, but the content in the problem making div seems to remain at the top as the content slides, and doesnot hide as the rest of them do. Similarly in the Shrink/Grow effect it shakes my page layout during the effect. THIS ONLY HAPPENS WHEN THERE IS A HTML CODE WITH DIV TAG WITH "OVERFLOW:AUTO" IN MY UPDATE REGION. THERE ARE NO PROBLEMS IN THE INTERNET EXPLORER BUT IT ONLY OCCURS IN FIREFOX. Below is the html code for your test. This is what it looks like in my original code. It might give you some idea what exactly the problem I am pointing to. FireFox version: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7 (taken from help->about) Please let me know if there is really some problem or I am missing some thing. I posted this on the script.aculo.us website, and was adviced to post the problem here. Any help or advice would be appreciated Thanks EXAMPLE CODE <!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";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" src="javascripts/prototype.js"></script> <script src="javascripts/scriptaculous.js?load=effects" type="text/javascript"></script> <script language="javascript"> function doSlide(){ new Effect.SlideUp ('content_area',{ afterFinish: function(){ new Effect.SlideDown('content_area'); } } ); } function doShrinkGrow(){ new Effect.Shrink ('content_area',{ afterFinish: function(){ new Effect.Grow('content_area'); } } ); } </script> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><h2><strong>Test Effect</strong> </h2></td> </tr> <tr> <td width="22%"><a href="javascript:doShrinkGrow()">Shrink & Grow</a> <br /> <a href="javascript:doSlide()">Slide Up and Down</a> </td> <td width="78%"> <!-- this is my content update area--> <div style="height:200px"> <div id="content_area"> <table> <tr> <td> <div style="overflow:auto;height:200px"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vel elit. Phasellus tortor. Praesent venenatis, ligula sit amet ultricies gravida, augue nisl mollis tortor, in facilisis risus turpis ac turpis. Mauris luctus, velit sed lobortis venenatis, leo urna dictum leo, eu scelerisque dolor dolor vitae massa. Aliquam posuere, nibh nec venenatis rhoncus, elit odio dignissim augue, pretium venenatis lacus ipsum at eros. Proin volutpat, nunc id suscipit varius, turpis diam tristique sapien, id condimentum dolor libero sit amet velit. Sed sapien erat, adipiscing at, varius at, malesuada in, elit. Ut eu diam vel purus rhoncus mattis. Donec elementum felis non metus. Aliquam erat volutpat. Suspendisse elementum eros sit amet leo. Sed quis ipsum eu elit lacinia imperdiet. Pellentesque suscipit justo sit amet purus varius rhoncus. Suspendisse pulvinar blandit ipsum. Duis viverra dui eget lectus vestibulum tempor. Nam euismod imperdiet odio. Nulla felis nisl, porttitor pretium, semper at, mollis at, nulla. Quisque vestibulum odio rhoncus ipsum. Integer id libero eu massa laoreet euismod. Vivamus justo tellus, sodales eu, aliquam id, auctor quis, sem. Vestibulum id leo. Morbi eu dui sed lectus molestie gravida. Cras pretium varius dolor. Quisque blandit nonummy urna. Duis sit amet nisi ac nisi aliquam congue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vel elit. Phasellus tortor. Praesent venenatis, ligula sit amet ultricies gravida, augue nisl mollis tortor, in facilisis risus turpis ac turpis. Mauris luctus, velit sed lobortis venenatis, leo urna dictum leo, eu scelerisque dolor dolor vitae massa. Aliquam posuere, nibh nec venenatis rhoncus, elit odio dignissim augue, pretium venenatis lacus ipsum at eros. Proin volutpat, nunc id suscipit varius, turpis diam tristique sapien, id condimentum dolor libero sit amet velit. Sed sapien erat, adipiscing at, varius at, malesuada in, elit. Ut eu diam vel purus rhoncus mattis. Donec elementum felis non metus. Aliquam erat volutpat. Suspendisse elementum eros sit amet leo. Sed quis ipsum eu elit lacinia imperdiet. Pellentesque suscipit justo sit amet purus varius rhoncus. Suspendisse pulvinar blandit ipsum. Duis viverra dui eget lectus vestibulum tempor. Nam euismod imperdiet odio. Nulla felis nisl, porttitor pretium, semper at, mollis at, nulla. Quisque vestibulum odio rhoncus ipsum. Integer id libero eu massa laoreet euismod. Vivamus justo tellus, sodales eu, aliquam id, auctor quis, sem. Vestibulum id leo. Morbi eu dui sed lectus molestie gravida. Cras pretium varius dolor. Quisque blandit nonummy urna. Duis sit amet nisi ac nisi aliquam congue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </td> </tr> </table> </div> </div> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
