onhover Emulation

[exiquio]

So a client requires a useless column on the page that contains
employee profile blocks with little images in them. The div tag
containing the content has an overflow of hidden. It contains more
profile blocks that can be seen. The task is to have the thing scroll
through the profiles when a user hovers the edge. I have it scrolling
one block at a time 'onclick'. My question is this: Is there a simple,
efficient way to capture a continuous mouse hover? I guess I could
keep checking the mouse position, but that seems too inefficient to be
the best way.

Thanks.

 

[Joost Diepenmaat]

My question is this: Is there a simple, efficient way to capture a
continuous mouse hover? I guess I could keep checking the mouse
position, but that seems too inefficient to be the best way.

You can't "keep checking the mouse position". Just use mousemove events.

 

[Joost Diepenmaat]

You can't "keep checking the mouse position". Just use mousemove events.

Or mouseout / mouseover events, ofcourse. Those will be more efficient,
for some measure of efficient.

 

[exiquio]

Or mouseout / mouseover events, ofcourse. Those will be more efficient,
for some measure of efficient.

I should have been more clear. I need it to continue even if the mouse
isn't moving; as long the mouse is in the area of the trigger. Thanks
for the replies.

 

[Joost Diepenmaat]

I should have been more clear. I need it to continue even if the mouse
isn't moving; as long the mouse is in the area of the trigger. Thanks
for the replies.

As long as you don't get a mouseout, the cursor is still over the
element.

 

[exiquio]

As long as you don't get a mouseout, the cursor is still over the
element.

That doesn't seem to work. The initial mouse over causes the event to
trigger, but there is not action to follow. I am using mootools for
this. Here is the code:

window.addEvent('domready', function(){
// Create a global namespace API
var SomeClient = function(){
/* PRIVATE */
// Create a scrolling object for the team box
var team_scroll = new Fx.Scroll(
'team_side_bar',
{
duration: 1000
}
);
var position = 0;
//var top_position =
document.getElements('div').filterByClass('profile_block')
[0].getPosition()['y'];
/* END PRIVATE */

/* PUBLIC */
return{
init: function(){
// Register events for team bar scrolling
// TODO (exiquio) adjust pixels
$('team_title').addEvent('mouseover', function(event){
//event = new Event(event).stop();
team_scroll.scrollTo(0, position - 116);
position = position - 116;
});
$('bottom_trigger').addEvent('mouseover', function(event){
//event = new Event(event).stop();
team_scroll.scrollTo(0, position + 116);
position = position + 116;
});
}
}
/* END PUBLIC */
}();
// Call init()
SomeClient.init();
});

 

[Joost Diepenmaat]

That doesn't seem to work. The initial mouse over causes the event to
trigger, but there is not action to follow. I am using mootools for
this. Here is the code:

[snip]

You want some kind of timeout/interval event to scoll on while the mouse
hasn't move out of the element. I'm not familiar with the library you're
using. You also don't need

 tags to post code. This is usenet. We
tend to use plain text.

 

[exiquio]

On Feb 25, 7:11 pm, Joost Diepenmaat <[email protected]> wrote:

That doesn't seem to work. The initial mouse over causes the event to
trigger, but there is not action to follow. I am using mootools for
this. Here is the code:

 [snip]

You want some kind of timeout/interval event to scoll on while the mouse
hasn't move out of the element. I'm not familiar with the library you're
using. You also don't need

 tags to post code. This is usenet. We
tend to use plain text.
[/QUOTE]

Thanks. My bad about the tags.

 

[exiquio]

That doesn't seem to work. The initial mouse over causes the event to
trigger, but there is not action to follow. I am using mootools for
this. Here is the code:

 [snip]

You want some kind of timeout/interval event to scoll on while the mouse
hasn't move out of the element. I'm not familiar with the library you're
using. You also don't need

 tags to post code. This is usenet. We
tend to use plain text.[/QUOTE]

Thanks. My bad about the tags.[/QUOTE]

So here is the working code. I will change the intervals, but that
isn't important. Thanks Joost.

window.addEvent('domready', function(){
// Create a global namespace API
var JD = function(){
/* PRIVATE */
// Create a scrolling object for the team box
var team_scroll = new Fx.Scroll(
'team_side_bar',
{
duration: 1000
}
);
var position = 0;
/* END PRIVATE */

/* PUBLIC */
return{
init: function(){
// Register events for team bar scrolling
var topTriggerTimer = function(){};
var bottomTriggerTimer = function(){};
// TODO (exiquio) adjust pixels
$('top_trigger').addEvent('mouseenter', function(event){
topTriggerTimer = (function(){
team_scroll.scrollTo(0, position - 116);
position = position - 116;
}).periodical(1500);
});
$('top_trigger').addEvent('mouseleave', function(event){
$clear(topTriggerTimer);
});
$('bottom_trigger').addEvent('mouseenter', function(event){
bottomTriggerTimer = (function(){
team_scroll.scrollTo(0, position + 116);
position = position + 116;
}).periodical(1500);
});
$('bottom_trigger').addEvent('mouseleave', function(event){
$clear(bottomTriggerTimer);
});
}
}
/* END PUBLIC */
}();
// Call init()
JD.init();
});