Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Five70Apps
Posts: 7
Registered: ‎12-23-2012
My Device: developer
My Carrier: developer

mouse hover events in html5 on PlayBook

When the user hovers the mouse over a table highlight the row and column of the cell that the mouse is above. I have this working just fine on PC browsers:

.........

$("#statstable").delegate('div.stat', 'mouseover mouseout', function(e) {

var itemtype = "." + $(this).attr('itemtype');

if (e.type == 'mouseover') {

$(this).addClass("hover");

$(this).siblings().addClass("hover");

$(itemtype).addClass("hover");

}

else{

$(this).removeClass("hover");

$(this).siblings().removeClass("hover");

$(itemtype).removeClass("hover");

}

});

........

I want to implement the same effect on the PlayBook, when the user touches and moves the touchpoint across the table. Note that the table fits on the screen so it will not scroll.

 

Apparently the equivalent touch events are touchenter and touchleave, but it does not work... nothing happens.

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: mouse hover events in html5 on PlayBook

To do that you'll need to handle it using touch events

 

Basically you need to bind touchmove and check the returned X + Y to your target(s)

 

Bear in mind that you can trigger multiple (4) touches at the same time so you may need to cater for that as well

 

A mouse can be over some elsement without being in mousedown state - your finger can't do this. It's either pressing the screen or it isn't.

 

A mouse knows where it is in a mouseup state - your finger only knows on a touchstart/move/end

 

This means that there is no hover for touch




Click the like button if you find my posts useful!
Please use plain text.
New Contributor
Five70Apps
Posts: 7
Registered: ‎12-23-2012
My Device: developer
My Carrier: developer

Re: mouse hover events in html5 on PlayBook

Appreciate your trying to help. The solution you're proposing seems overly complicated, given that, according to the API documentation these 2 events should do the job:

touchenter

no

yes

Occurs when the user moves a touch point onto an interactive area defined by a DOM element.

touchleave

no

yes

Occurs when the user moves a touch point off of an interactive area defined by a DOM element.

Do you know why using these 2 events would not work?

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: mouse hover events in html5 on PlayBook

The easy answer is that the complex method I use is portable and the code is quite easy to write

 

I would check out Kitchen Sink in Community GitHub as it illustrates touch properly (my own code is based on this)

 

 




Click the like button if you find my posts useful!
Please use plain text.
New Contributor
Five70Apps
Posts: 7
Registered: ‎12-23-2012
My Device: developer
My Carrier: developer

Re: mouse hover events in html5 on PlayBook

Not the answer I was looking for, again, but I'll give it a go.

 

Could you please point me to the kitchen sink on github you are mentioning?

 

Again, what I'm trying to do is when the user hovers the mouse moves a touchpoint over a table highlight the row and column of the cell that the mouse is above touchpoint is on. The closest example I could find is in the Contacts application, when you move the touchpoint over the index: a tip pops out showing the letter that is currently touched.

 

According to the documentation the touchmove event is tied to the element that received the touchstart element. If I follow your suggestion I would have to highlight the row / column on cell touchstart, attach the touchmove event to each cell of the table, then test the list of touches to find out if the touchpoint is still in the cell. If it is not I would then have to cancel the highlight effect. However, the cell that is touched next would not fire a touch event, since the touch sequence is not finished - the touchend event hasn't occurred yet... What am I missing?

 

And to conclude, the 2 events that I have mentioned before - touchenter and touchleave - seem to be the ones to use for solving this. Do you know how these work?

Please use plain text.