[Proto-Scripty] Re: Move - OnMouseMove- Only once
On Sunday 15 February 2009 11:09:28 timbob 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. I do something similar in this file: http://svn.tuxfamily.org/viewvc.cgi/wikizzle_main/trunk/javascript/interface/modules/sidebar_hiding.js?view=markup In the animate method. Basically, I just cancel() the old events before starting new ones. I wasn't aware that you could limit queues or maybe I'd have tried that. IsolatedSingleton is just a specialised kind of wrapper for Prototype's Class that I wrote, see here for an explanation: http://jimhigson.blogspot.com/2009/01/prototype-singleton-classes.html -- Jim blog: http://jimhigson.blogspot.com/ web: http://wikizzle.org --~--~-~--~~~---~--~~ 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
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 src=effects.js/script
script type=text/javascript
document.observe(dom:loaded, function(ev) {
$('aeusseresmenue').observe('mouseover', function(ev) {
new Effect.Move(this, {x:0, y:50, duration:0.2, mode:
absolute, queue : {scope : 'myscope', limit : 1}});
});
$('aeusseresmenue').observe('mouseout', function(ev) {
new Effect.Move(this,{x:-200, y:50, duration:0.2, mode:
absolute, queue : {scope : 'myscope', limit : 1}});
});
});
/script
/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
On 13 Feb., 17:20, Mario sevenartwo...@googlemail.com wrote:
Hi there,
I'd like to move a div container which is mostly hidden left of the
screen (width is 230px, left is -200px so you can only see the right
border) into the screen and back by using the event handlers
onmouseover and onmouseout.
It works already but not perfect: By leaving the div box the
container shortly flickers in the middle again for some mili seconds.
Can anybody help me?
body
div id=aeusseresmenue style=background: #0c0; width: 230px;
height: 400px; position: absolute; left: -200px; top: 50px;
onmousemove='new Effect.Move(this,{x:0, y:50, duration:0.2, mode:
absolute});' onmouseout='new Effect.Move(this,{x:-200, y:50,
duration:0.2, mode: absolute});'
div id=inneresmenue style=background: #000; width: 200px; height:
400px;
Hallo Welt
/div
/div
/body
Thanks, Mario.
PS: I already tried to use onmouseover instead of onmousemove, but
then i had the problem of recalling the move in all the time.
--~--~-~--~~~---~--~~
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
[Proto-Scripty] Re: Move - OnMouseMove- Only once
Hi Mario,
it's because you observe the aeusseresmenue element id on mouseover
and mouseout.
and when mouseover the element, it's move to show, that works
great :))
But when it move, as move is very quick (it's not that thing to
modify), the mouse stay in place and go on the inneresmenue element
id.
== the browser as no other choice to launch the mouseout on he
aeusseresmenue element id and next, the mouseover on the
inneresmenue element id. So effect loop indefinitelly between the
two states from one element to another and the result is a hawfull
flickering .
My advice:
1- replace the moouseout observer to the inneresmenue element id but
other problem come out :((
2- complexify you code to handle every possible mouse position/states
3- use the event extension from http://livepipe.net/core (go to the
extension tab), and look at mousenter mouseleave, this is what you
want.
And a global remark: don't think that an effect will be launch when
all other are ended, if you move your mouse quickly, you could launch
mouseover and mouseout concurrently == you should cancel() all effect
before starting a new one !
--
david
On 16 fév, 22:26, Mario sevenartwo...@googlemail.com wrote:
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 src=effects.js/script
script type=text/javascript
document.observe(dom:loaded, function(ev) {
$('aeusseresmenue').observe('mouseover', function(ev) {
new Effect.Move(this, {x:0, y:50, duration:0.2, mode:
absolute, queue : {scope : 'myscope', limit : 1}});
});
$('aeusseresmenue').observe('mouseout', function(ev) {
new Effect.Move(this,{x:-200, y:50, duration:0.2, mode:
absolute, queue : {scope : 'myscope', limit : 1}});
});
});
/script
/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
On 13 Feb., 17:20, Mario sevenartwo...@googlemail.com wrote:
Hi there,
I'd like to move a div container which is mostly hidden left of the
screen (width is 230px, left is -200px so you can only see the right
border) into the screen and back by using the event handlers
onmouseover and onmouseout.
It works already but not perfect: By leaving the div box the
container shortly flickers in the middle again for some mili seconds.
Can anybody help me?
[Proto-Scripty] Re: Move - OnMouseMove- Only once
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 src=effects.js/script
script type=text/javascript
document.observe(dom:loaded, function(ev) {
$('aeusseresmenue').observe('mouseover', function(ev) {
new Effect.Move(this, {x:0, y:50, duration:0.2, mode:
absolute, queue : {scope : 'myscope', limit : 1}});
});
$('aeusseresmenue').observe('mouseout', function(ev) {
new Effect.Move(this,{x:-200, y:50, duration:0.2, mode:
absolute, queue : {scope : 'myscope', limit : 1}});
});
});
/script
/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
On 13 Feb., 17:20, Mario sevenartwo...@googlemail.com wrote:
Hi there,
I'd like to move a div container which is mostly hidden left of the
screen (width is 230px, left is -200px so you can only see the right
border) into the screen and back by using the event handlers
onmouseover and onmouseout.
It works already but not perfect: By leaving the div box the
container shortly flickers in the middle again for some mili seconds.
Can anybody help me?
body
div id=aeusseresmenue style=background: #0c0; width: 230px;
height: 400px; position: absolute; left: -200px; top: 50px;
onmousemove='new Effect.Move(this,{x:0, y:50, duration:0.2, mode:
absolute});' onmouseout='new Effect.Move(this,{x:-200, y:50,
duration:0.2, mode: absolute});'
div id=inneresmenue style=background: #000; width: 200px; height:
400px;
Hallo Welt
/div
/div
/body
Thanks, Mario.
PS: I already tried to use onmouseover instead of onmousemove, but
then i had the problem of recalling the move in all the time.
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
