I have a webpage that I designed for both use on my phone and a PC. Part of the UI is a table in which multiple cells adjacent cells can be marked easily by dragging a mouse with a button down across them ( using mousedown event from Js). On my smart phone however, the browser tries to scroll the window when I drag across cells. I've looked all morning and can't find the answer I'm looking for. How can I make the touch drag behave like the mouse drag on my webpage.
UPDATE:
I have in each cell of my table onmouseover and onmouseclick events which trigger functions, if the mouse is down, a function increments a variable , and when the mouse is up it decreases it. so when a mouse button is pressed down over a cell an action occurs. Below is how a cell of the table is made. Below it are the functions bob and bob2.
{echo '<td width="8" onttouchmove="bob(id)" ontouchstart="bob2(id)" onmouseover="bob(id)" onmousedown="bob2(id)" id='.$key.'>'.$value.'</td>';}
<script>
document.body.onmousedown = function(){
mouseDown++;
}
function bob(clicked_id)
{
if (mouseDown)
{ THEN DO SOMETHING }
function bob2(clicked_id)
{DO SOMETHING}
</script>
I feel like the jquery swipe event is what I want, but I"m not sure how I would implement it during the table setup.
Mobile phones and tablets do not use a mouse, thus your mouse events are not and will not be firing. You need to use touchstart and touchend instead.
Related
I have an instant chat program I've created with HTML5/CSS, Asynch. Javascript and PHP. I have an interval that is constantly checking the user's chat box div is scrolled to the bottom for user convenience. This became a problem when a user wished to scroll up to view previous messages so I tried the onscroll event to stop the interval. I couldn't get this to work and so have gone the longer way around by using the onmouseover and onmouseout events to start and stop the interval.
This works perfectly fine for desktop computers as they have a visible mouse. For mobile devices however, such as my Windows phone - which the program is primarily designed for, there is an issue as you first have to tap the message box (presumably to first move the invisible mobile mouse over the chat box) and then scroll with the finger movement to scroll unaffected.
This isn't a major problem as I could inform mobile users to first tap then scroll, but I feel that successfully using the onscroll event would match the usability with desktop users.
Are there known issues with the onscroll event? I dare say I'm familiar with JS events and can use them appropriately, but this is the only event I haven't managed to get to work, in FF or IE.
Any thoughts or help would be appreciated,
Lee.
Here are the current events that manage the scrollcheck on/off, where ScrollCheck() is the function that checks the scroll position and moves it if not at the bottom and scrollInterval is the global var that holds the id of the interval.
document.getElementById('messages').onmouseover = function()
{
clearInterval(scrollInterval);
}
document.getElementById('messages').onmouseout = function()
{
scrollInterval = setInterval(ScrollCheck, 300);
}
I simply replaced the onmouseover event to onscroll without any luck.
When I make a chat page, I only check the scroll when new messages are added:
var currentScroll = elem.scrollTop, oldmaxScroll = elem.scrollHeight-elem.clientHeight;
// add new message(s) here
var newmaxScroll = elem.scrollHeight-elem.clientHeight;
if( currentScroll == oldmaxScroll) elem.scrollTop = newmaxScroll;
Suppose we have a <div> with a mousemove handler bound to it. If the mouse pointer enters and moves around this div, the event is triggered.
However, I am dealing with a rich web application where <div>s move around the screen, appear and disappear... So it may happen that a <div> appears under the mouse pointer. In this case, mousemove is not triggered. However, I need it to be. (Note that replacing mousemove with mouseover does not change this behavior.)
Specifically, the <div> has to be highlighted and I deem it as a UI flaw to require the user to do a slight mouse move in order to trigger the highlighting.
Is it possible to trigger the mousemove event programatically? And I do not mean
document.getElementById('mydiv').onmousemove();
because onmousemove is parametrised by the event object, which I do not have.
Is it possible to make browser behave as if onmousemove was triggered on the current mouse's position (although in fact the mouse didn't move)?
You could modify your mousemove to keep a state variable with the current mouse coordinates, and use that information to perform a collision detection that you call both on mouse move, and on moving a div.
A little example of what that might look like
You actually can create a mousemove event object to pass in, using something like this:
window.onload = function () {
document.getElementById("test").onmousemove = function(e) { console.log(e); };
document.getElementById("test").onclick = function(e) {
var e = document.createEvent('MouseEvents');
e.initMouseEvent('mousemove',true,true,document.defaultView,<detail>,<screenX>,<screenY>,<mouseX>,<mouseY>,false,false,false,false,<button>,null);
this.onmousemove(e);
};
};
Of course, here I'm firing it on a click, but you can do it on whatever event you want, such as when your div becomes visible, check to see if the mouse is within it. You just need to make sure your parameters are right, and you need to track the mouse position on your own. Also, there's some differences in IE, I think. Here's my source: http://chamnapchhorn.blogspot.com/2008/06/artificial-mouse-events-in-javascript.html. He added a little extra code to account for it.
Here's a fiddle to play around with. http://jsfiddle.net/grimertop90/LxT7V/1/
I am having a problem with my Javascript code for Android tablets.
Suppose I have grid made of several div tags. with class "box";
Now I bind event handlers for all these divs in the grid.
When the touchstart (mousedown) event occurs and I move the cursor to some other div in the grid (without releasing the cursor) and then release the cursor (touchend) on this current div. When I tried to alert the id of this current div (i.e. touchend div), the alert shows the id of the div where the "touchstart" has occurred.
$(".box").bind('touchstart',function () {alert($(this).attr("id"))});
$(".box").bind('touchend',function () {alert($(this).attr("id"))});
Actually this is my first program for the Android tablet. So I need help for this.
This is expected and it would be be very confusing if it did anything else. If the element it ended up on did not have a registered listener you would never get the touchEnd event at all.
You can see where the touch went by looking at the coordinate properties of the touches and you can track it in progress with touchmove.
Don't really get your question. Are you trying to get the alert to display the div id of where you mousedown? You will need to store the id in the touchstart event in a variable and display the value when touchend has occured.
Let's say I have a box/table with multiple rows.. These rows are draggable.
Now I have a JS where I have implemented event handlers for touchstart,touchmove, touchend for the iPad....Basically they just map these events to corresponding mouse events like mouseover, mousedown, mouseup, etc
Now here is my issue;
While I am able to drag any of the rows from the table, I also want to be able to scroll it. When I press any finger on screen and drag down, it does the drag action for that row (since I am using event.preventDefault() for touchmove to prevent the default scrolling region).
Now I understand that I cannot have both the actions (drag/scroll) using a single finger..
So I want to implement/have a scroll action when 2-fingers are used.. (The other case i.e. for single finger, it should do the drag action)
Now I am aware that event.touches.length/event.targetTouches.length gives no of fingers on screen, I am not sure how to use that to do the scrolling action... Just as an FYI, this scrolling would be similar to what we get on the iPad for fixed height div scrolling (overflow:auto), which iPad provides out-of-the-box..
You could fire preventDefault later, and optionally.
Figuring out if you want the custom / drag behavior first.
something like this: ( i have no idea if this exact code will work since i cannot test it right now, this assumes you use jQuery, and i don't know the event properties for the number of fingers but just to give you an idea:)
$('#SomeElement').TouchMove(
function(e)
{
if( /* number of fingers equals one */ )
{
e.preventDefault()
//more element-drag code could go here
return;
}
}
);
I have an image that I want to have trigger certain behaviors when the mouse is over, I have a mouseover and mouseout method, but if you happen to have your mouse over the image when the page loads, the mouseover method never fires until you leave the image and come back over it.
Is there a way to detect if the mouse is over an element on the fly without the mouse having to be off of the element and then come over the element to trigger the JS mouseover event? Like is there a document.getElementById("blah").mouseIsOver() type function in Javascript?
I believe this is possible without any action from the user. When your page loads, bind the mouseover event to your image and hide your image (i.e. using CSS display:none). Use setTimeout() to show it again in a few milliseconds (10 should be enough). The even should be fired.
If you don't want to cause the 'flick' effect on your image, you may try using some temporary element instead, attaching event to it, and delegating the event onto your image.
I have no idea if this is cross-browser solution, but it worked from my Firefox 3.0 console ;)
You could use the mousemove event. That would trigger anytime the user moves a mouse; so the only instance of the trigger not firing would be if the user does not move the mouse at all, which should be rare.
The only problem with this is that the event would fire anytime the mouse would move over your image, so you would get a LOT of those events while over the component. What you would probably need to do is implement some sort of flag within your method when the event fires. You turn on the flag when the event first fires, and you turn it off when you leave the component.
This is less than ideal, but I think this will probably satisfy your problem scenario. The following is some quick pseudo code on what that solution might look like, I think it should work.
<img src="blah.png" onmousemove="JavaScript:triggerOn(event)" onmouseout="JavaScript:triggerOff(event)"/>
...
<script type='text/javascript'>
var TriggerActive = false;
function triggerOn(e){
e = e||window.e;
if( !TriggerActive){
TriggerActive = true;
// Do something
} else {
// Trigger already fired, ignore this event.
}
}
function triggerOff(e){
e = e||window.e;
if(TriggerActive)
TriggerActive = false;
}
</script>
You can find some great mouse event information including browser compatibility notes here.
Use document.querySelectpor and onload/onready events.
var a = document.querySelector('#a:hover');
if (a) {
// Mouse cursor is above a
}
else {
// Mouse cursor is outside a
}
There is no way to get the mouse coordinates aside from listening for mouse events, namely mousemove, mouseover etc. However, these events are very sensitive in the sense that moving the cursor by just one pixel is enough to trigger them, so having the cursor hover over your image while perfectly still should be somewhat unusual.