Penuel
2006-Oct-11 04:38 UTC
Effect not rendered properly with DIV having overflow style set to auto in FireFox (script.aculo.us)
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Brian Peiris
2006-Oct-11 09:41 UTC
Re: Effect not rendered properly with DIV having overflow style set to auto in FireFox (script.aculo.us)
Well, I managed to fix the Slide issue, but I didn''t notice any
''shaking''
with the Grow/Shrink effect.
I had to move the overflow:auto and height:200px styles to the
"content_area" div instead of the inner div , I''m not sure if
that''s what
you want but it seems to solve the problem.
Code Below:
<!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>
<style>
#content_area
{
overflow:auto;height:200px
}
</style>
</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>
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>
<tr>
<td>
<b>Here''s another row,
because I''m
assuming the
Lipsum in the row above isn''t
always the
only content
that the Ajax request returns.</b>
</td>
</tr>
</table>
<div>Here''s another DIV, for
fun.</div>
</div></div>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
--
===========================Brian Peiris
Waterloo, Ontario, Canada
brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org
===========================
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Penuel
2006-Oct-11 12:19 UTC
Re: Effect not rendered properly with DIV having overflow style set to auto in FireFox (script.aculo.us)
Thanks Brian, but my actual problem is the div with overflow:auto that I cannot put off, I know the problem doesnot occur when the div does not have this property, but my constraint is that I cannot remove this overflow property from the inner divs. The update region is updated by the ajax call, that consists of the html code, that has the div with "overflow:auto". As soon has I have the ajax response with such div tags the, effects do not work properly. Also this happens only in FireFox and not in IE. Similary this causes to screen to flicker/shake when a shrink/grow effect is applied. --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Brian Peiris
2006-Oct-11 12:32 UTC
Re: Effect not rendered properly with DIV having overflow style set to auto in FireFox (script.aculo.us)
I don''t see why you *must* have an overflow:auto div inside the content_area. If I understand correctly, you need the content_area div to be a constant height (200px in the example above) and you need to be able to scroll content_div if its contents exceed 200px. Is that correct? Because that''s exactly what my code does. Please describe the behaviour you are trying to achieve. On 10/11/06, Penuel <penuel13-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > Thanks Brian, but my actual problem is the div with overflow:auto that > I cannot put off, I know the problem doesnot occur when the div does > not have this property, but my constraint is that I cannot remove this > overflow property from the inner divs. The update region is updated by > the ajax call, that consists of the html code, that has the div with > "overflow:auto". As soon has I have the ajax response with such div > tags the, effects do not work properly. Also this happens only in > FireFox and not in IE. Similary this causes to screen to flicker/shake > when a shrink/grow effect is applied. > > > > >-- ===========================Brian Peiris Waterloo, Ontario, Canada brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org =========================== --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Penuel
2006-Oct-11 13:19 UTC
Re: Effect not rendered properly with DIV having overflow style set to auto in FireFox (script.aculo.us)
Hello Brian,
I think my example code is not proper to explain the situation. Below
is the modified version of the code, that might explain you the
situation.
Basically the height in all my pages is fixed say 500px. I make sure
that the content does not cross the limit, still in some parts the
content grow, so I place them in div tags with overflow property.This
helps me to maintain the height of the layout on all pages, and the
larger content appears in scrollble area within the region (just like
iframe). If I apply overflow on my container div as you suggested it
will cause the scrollbar for entire region, that is not what i want.
See the example code below to see the exact problem
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:300px">
<div id="content_area">
<table border="1">
<tr>
<td colspan="2">
This is some top text This is some top text This is some top
text This is some top text This is some top text This is some top
text
This is some top text This is some top text
This is some top text
This is some top text
</td>
</tr>
<tr>
<td width="50%">
This is small text region. But the content on the right has larger
text. So i have added it to the
div with overflow auto, so that it doesnot break the table fixed
height.
If I apply the overflow to outer div, it causes the scrollbar on
the entire region. I want only the right portion
scrollable (consider it like iframe) maitaining the same height on
all pages even if content on right is larger. </td>
<td width="50%">
<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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Brian Peiris
2006-Oct-11 17:35 UTC
Re: Effect not rendered properly with DIV having overflow style set to auto in FireFox (script.aculo.us)
Hey Penuel,
Yeah that cleared things up.
Try this:
<!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">
var overflow_auto_divs;
// DEFINE A FUNCTION THAT WILL SET overflow TO
''auto'' FOR ALL
THE
// ''overflow_autp'' DIVS
var addOverflow
function(){overflow_auto_divs.each(function(el){el.style.overflow=''auto''
;});};
// SET overflow TO ''hidden'' FOR ALL THE
''overflow_autp'' DIVS
var removeOverflow
function(){overflow_auto_divs.each(function(el){el.style.overflow=''hidden''
;});};
function doSlide()
{
// GET ALL INNER DIVS WITH THE ''overflow_auto''
CLASS
overflow_auto_divs
$(''content_area'').childrenWithClassName(''overflow_auto'');
removeOverflow();
// DEFINE A FUNCTION THAT WILL SlideDown THE
''content_area''
DIV AND THEN
// CALL THE addOverflow FUNCTION
var slideDown = function(){new Effect.SlideDown
(''content_area'',{afterFinish:addOverflow});};
// DO SlideUp THEN CALL slideDown
new
Effect.SlideUp(''content_area'',{afterFinish:slideDown});
}
function doShrinkGrow()
{
// GET ALL INNER DIVS WITH THE ''overflow_auto''
CLASS
overflow_auto_divs
$(''content_area'').childrenWithClassName(''overflow_auto'');
removeOverflow();
// DEFINE A FUNCTION THAT WILL Grow THE
''content_area'' DIV
AND THEN
// CALL THE addOverflow FUNCTION
var grow = function(){new Effect.Grow
(''content_area'',{afterFinish:addOverflow});}
new
Effect.Shrink(''content_area'',{afterFinish:grow});
}
</script>
<style>
.overflow_auto
{
overflow:auto;height:200px;
}
</style>
</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:300px">
<div id="content_area">
<table border="1">
<tr>
<td colspan="2">
This is some top text
This is some top text
This is some top
text
This is some top text
This is some top text
This is some top
text
This is some top text
This is some top text
This is some top text
This is some top text
</td>
</tr>
<tr>
<td width="50%">
This is small text region. But the
content on the right has larger
text. So i have added it to the
div with overflow auto, so that it
doesnot break the table fixed
height.
If I apply the overflow to outer
div, it causes the scrollbar on
the entire region. I want only the
right portion
scrollable (consider it like iframe)
maitaining the same height on
all pages even if content on right
is larger.
</td>
<td width="50%">
<div
class="overflow_auto">
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>
On 10/11/06, Penuel <penuel13-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> Hello Brian,
>
> I think my example code is not proper to explain the situation. Below
> is the modified version of the code, that might explain you the
> situation.
>
>
> Basically the height in all my pages is fixed say 500px. I make sure
> that the content does not cross the limit, still in some parts the
> content grow, so I place them in div tags with overflow property.This
> helps me to maintain the height of the layout on all pages, and the
> larger content appears in scrollble area within the region (just like
> iframe). If I apply overflow on my container div as you suggested it
> will cause the scrollbar for entire region, that is not what i want.
>
> See the example code below to see the exact problem
>
>
> 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:300px">
> <div id="content_area">
> <table border="1">
> <tr>
> <td colspan="2">
>
> This is some top text This is some top
> text This is some top
> text This is some top text This is some top text This is some top
> text
> This is some top text This is
> some top text
> This is some top text
> This is some top
> text
>
> </td>
>
> </tr>
> <tr>
> <td width="50%">
> This is small text region. But the
> content on the right has larger
> text. So i have added it to the
> div with overflow auto, so that it
> doesnot break the table fixed
> height.
>
> If I apply the overflow to outer
> div, it causes the scrollbar on
> the entire region. I want only the right portion
> scrollable (consider it like
> iframe) maitaining the same height on
> all pages even if content on right is larger.
> </td>
> <td width="50%">
> <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>
>
>
> >
>
--
===========================Brian Peiris
Waterloo, Ontario, Canada
brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org
===========================
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Penuel
2006-Oct-12 05:07 UTC
Re: Effect not rendered properly with DIV having overflow style set to auto in FireFox (script.aculo.us)
Hi Brian, that worked great !!! Thanks for the intelligent code. --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---