[Proto-Scripty] Re: Move an image
Hi, your code does not work, because there is no Element method called move. You have to a) create a new Effect for this and b) you must merge the two options hashes before using them since move expects only one: new Effect.Move('banner1' , $H(options).merge({x: 60, y:-30})) I would also suggest to use this way of effect creation for any effect instead of calling object methods on Element objects, since it emphasis the separation of script.aculo.us effects and prototypes (DOM-) extensions. Am 16.02.2009 um 19:14 schrieb Leonard Burton: HI All, I have been trying to do this for several months and the documentation seems to be of no help to me. Can someone help? I appreciate it. I would like to be able to take these banners and move them to the right or to the left. Why doesn't move or Parallel work in this queue? http://wiki.github.com/madrobby/scriptaculous/effect-move I was in the IRC room, and a nice enough gentleman said that the docs contained everything, but obviously they don't. How can I make the images move to the right or left in the code I have provided below. function sequence() { var options = { queue: 'end', duration:2 }; var fade = { queue: 'end', duration:5 }; $('banner1').appear(options); $('banner1').move(options, { x: 60, y: -30 }); $('banner1').fade(fade); $('banner2').appear(options); $('banner2').dropOut(options); $('banner3').appear(options); $('banner3').fade(fade); $('banner4').appear(options); $('banner4').dropOut(options); $('banner5').appear(options); $('banner5').fade(Object.extend(options, {afterFinish: sequence})); } Thanks in advanced for any help! -- Leonard Burton, N9URK http://www.jiffyslides.com serv...@jiffyslides.com leonardbur...@gmail.com The prolonged evacuation would have dramatically affected the survivability of the occupants. --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Move an image
At first: Sorry but i missed that you do not specify all required options for Effect.Move You should check at http://wiki.github.com/madrobby/scriptaculous/effect-move , there you will find that you have to specifiy x, y and mode at least. And i just realized that using a hash as container for options does not work, at least it does not here. My apologies. Other than that the code should work just fine if you replace the $ ('banner1').move(... line with new Effect.Move('banner1' , {x: 60, y:-30, mode : 'relative'}); or mode : 'absolute' , i can't tell from this snippet you posted want you want to do. If this does not work: Do you have script.aculo.us and prototype imported correctly to your page? And what versions of both are you using? Am 16.02.2009 um 21:51 schrieb Leonard Burton: Hi Timm, your code does not work, because there is no Element method called move. You have to a) create a new Effect for this and b) you must merge the two options hashes before using them since move expects only one: new Effect.Move('banner1' , $H(options).merge({x: 60, y:-30})) How do I make this syntax work with the code I have? I would also suggest to use this way of effect creation for any effect instead of calling object methods on Element objects, since it emphasis the separation of script.aculo.us effects and prototypes (DOM-) extensions. I know nothing about DOM other than the acronym! How do I do this? When I have changed the effects from the $(element)[effect] syntax to the one you are suggesting, none of the effects work. Within the framework of the snippet I inserted in my first email would you please show me how the way you are talking about works? Thanks, Leonard. Am 16.02.2009 um 19:14 schrieb Leonard Burton: HI All, I have been trying to do this for several months and the documentation seems to be of no help to me. Can someone help? I appreciate it. I would like to be able to take these banners and move them to the right or to the left. Why doesn't move or Parallel work in this queue? http://wiki.github.com/madrobby/scriptaculous/effect-move I was in the IRC room, and a nice enough gentleman said that the docs contained everything, but obviously they don't. How can I make the images move to the right or left in the code I have provided below. function sequence() { var options = { queue: 'end', duration:2 }; var fade = { queue: 'end', duration:5 }; $('banner1').appear(options); $('banner1').move(options, { x: 60, y: -30 }); $('banner1').fade(fade); $('banner2').appear(options); $('banner2').dropOut(options); $('banner3').appear(options); $('banner3').fade(fade); $('banner4').appear(options); $('banner4').dropOut(options); $('banner5').appear(options); $('banner5').fade(Object.extend(options, {afterFinish: sequence})); } Thanks in advanced for any help! -- Leonard Burton, N9URK http://www.jiffyslides.com serv...@jiffyslides.com leonardbur...@gmail.com The prolonged evacuation would have dramatically affected the survivability of the occupants. -- Leonard Burton, N9URK http://www.jiffyslides.com serv...@jiffyslides.com leonardbur...@gmail.com The prolonged evacuation would have dramatically affected the survivability of the occupants. --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Move - OnMouseMove- Only once
The problem is that you have different scopes in all callbacks. So the callback called when a mouseover event bubbles up, does not know about ausgefahren as defined in the callback of dom:loaded and so on. You could use a global variable to save the state or use a custom object with the callbacks as methods and then fix the scope via bind() or bindAsEventListener() to your object. It may be a bit overdone but i would go for something like: script src=prototype.js type=text/javascript/script script src=effects.js type=text/javascript/script script type=text/javascript var MyMenu = Class.create({ initialize : function(menu_element) { this.menu_element = $(menu_element); //make sure you have an extended element this.state = 0; // the state of the menu this.mouseover_callback = this.mouseOver.bindAsEventListener(this); //callbacks this.mouseout_callback = this.mouseOut.bindAsEventListener(this); this.menu_element.observe('mouseover', this.mouseover_callback); this.menu_element.observe('mouseout', this.mouseout_callback); this.queue = Effect.Queues.get(this.menu_element.identify() + '- scope'); //create a queue with a unique name }, mouseOver : function() { this.queue.each(function(ev) { ev.cancel(); }); new Effect.Move(this.menu_element, { x:0, y:50, duration: 0.2, mode: absolute, queue : {scope : this.menu_element.identify() + '-scope', limit : 1}, afterFinish : function() { // using an effect callback to make sure state is changes _after_ the last frame was renderd this.state = 1; }.bind(this) }); }, mouseOut : function() { this.queue.each(function(ev) { ev.cancel(); }); new Effect.Move(this.menu_element, { x:-200, y:50, duration: 0.2, mode: absolute, queue : {scope : this.menu_element.identify() + '-scope', limit : 1}, afterFinish : function() { this.state = 0; }.bind(this) }); } }); var menu; document.observe(dom:loaded, function(ev) { menu = new MyMenu('aeusseresmenue'); }); /script I hooked in Jim's suggestions to stop running effects in the queue with their cancel() method, this prevents the issues with fast mouse movement. Obviously this code works without saving the current state, i just left that in because i don't know if you want to use the menu's state somewhere else. Am 16.02.2009 um 22:26 schrieb Mario: Thanks, you are right, it works. However, I tried the solution which saves the stat but i wasn't able to solve the problem, I made it even worse... html xmlns=http://www.w3.org/1999/xhtml; head script src=./module/prototype.js type=text/javascript/script script src=./module/scriptaculous.js type=text/javascript/ script script type=text/javascript document.observe(dom:loaded, function(ev) { ausgefahren = 0; $('aeusseresmenue').observe('mouseover', function(ev) { if (ausgefahren == 0) { new Effect.Move(this, {x:0, y:50, duration:0.2, mode: absolute,}); ausgefahren = 1 } }); $('aeusseresmenue').observe('mouseout', function(ev) { if (ausgefahren == 1) { new Effect.Move(this,{x:-200, y:50, duration:0.2, mode: absolute, }); ausgefahren = 0; } }); }); /script link rel=stylesheet href=./stylesheets/reset.css type=text/ css / /head body div id=aeusseresmenue style=background: #0c0; width: 230px; height: 400px; position: absolute; left: -200px; top: 50px; div id=inneresmenue style=background: #000; width: 200px; height: 400px; Hallo Welt /div /div /body /html Can you see the wrong part? Mario On 15 Feb., 12:09, timbob timm.glo...@gmail.com wrote: The problem is that you are triggering a mousemove event _every_ time you move the mouse within the div, and every single time you create a Move effect. So when you leave the div there is a mouseout event and also the mousemove event from your last mouse movement. The flickering you see is the interference of the two created move effects. Since script.aculo.us renders all ongoing effects in parallel, unless you specify otherwise. As a workaround you could use an extra Event.Queue for your menu, and limit the effects in the queue to only one at a time. This is a bit dirty, but it works sort of. Of course you can mess things up if you move your mouse very fast (depending on the effects duration) in and out of the div. It maybe better to save the state of the menue somewhere and check that before creating a new effect. html head script type=text/javascript src=prototype.js/script script type=text/javascript