Hi Mike,
first you need to write unit in CSS: left:8 is not defined.
btw, I think this is a funny bug. Whille positionning the element, IE
find it's good position, as other browser.
When using the Move effect, scriptaculous force the definition of the
top/left CSS properties (even if in your effect you don't move along
the Y axis).
So it recalcutae the element position, and set top properety to 0px,
so the element go to top.
You should use the Morph Effect instaed of Move.
your exemple become:
function toggle_menu(event) {
var butt = $('hidebutton');
if( show_menu > 0 ) {
new Effect.Morph( 'centercol', { style:'left:8px;' } );
butt.innerHTML = 'Show Menu >>';
show_menu = 0;
}
else {
new Effect.Morph( 'centercol', { style:'left:208px;' } );
butt.innerHTML = 'Hide Menu <<';
show_menu++;
}
}
Another thing is that you don't verirfy while launching an effect if
another effect is in motion, so if you click faster on the link, you
will see some disgratious flickering !!!
--
david
On 29 juin, 11:18, Mike Glen <mike.g...@mindsweep.net> wrote:
> I am trying to make a div move back and forwards on the x axis but not
> change its y postion using Move
> This works as expected in Firefox but not in IE.
>
> In IE the div moves up to the top of the page instead of staying at the
> same y position
> Is there anything obvious I am doing wrong?
>
> code is below
> <html>
> <head>
> <title>TITLE</title>
> <script type="text/javascript" src="javascript/prototype-1.6.0.3.js"
> ></script>
> <script type="text/javascript" src="javascript/scriptaculous.js"
> ></script>
>
> <style type="text/css">
> #menuhide {
> width: 100%;
> }
> div#centercol {
> position: absolute;
> left: 208;
> }
> #header {
> width: 100%;
> }
> #content {
> float: left;
> clear: both;
> }
> div#leftcol{
> position: absolute;
> left: 8;
> }
> #menucol {
> width: 200px;
> float: left;
> }
> </style>
> </head>
> <body>
>
> <div id="menuhide">
> <span id="hidebutton" class="hand">Hide Menu <<</span>
> </div>
> <div id="centercol">
> <div>
> <div id="header">
> HEADER
> </div>
> <div id="content">
> CONTENT
> </div>
>
> </div>
> </div>
> <div id="leftcol">
> <div id="menucol">
> MENU
> </div>
> </div>
>
> <script type="text/javascript">
> function toggle_menu(event) {
>
> var butt = $('hidebutton');
>
> if( show_menu > 0 ) {
> new Effect.Move( 'centercol', { x: -200, y: 0, position:
> 'relative' } );
> butt.innerHTML = 'Show Menu >>';
> show_menu = 0;
> }
> else {
> new Effect.Move( 'centercol', { x: 200, y: 0, position:
> 'relative' } );
> butt.innerHTML = 'Hide Menu <<';
> show_menu++;
> }
> }
>
> </script>
> <script type="text/javascript">
> $('hidebutton').observe( 'click', function( event ){
> toggle_menu( event );
> });
>
> var show_menu = 1;
> </script>
> </body>
>
> </html>
>
> Thanks
> Mike
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
