EzDevInfo.com

How do I simulate a hover with a touch in touch enabled browsers?

With some HTML like this:

<p>Some Text</p>

Then some CSS like this:

p {
  color:black;
}

p:hover {
  color:red;
}

How can I allow a long touch on a touch enabled device to replicate hover? I can change markup/use JS etc, but can't think of an easy way to do this.

What's the best way to detect a 'touch screen' device using JavaScript?

I've written a jQuery plug-in that's for use on both desktop and mobile devices. I wondered if there is a way with JavaScript to detect if the device has touch screen capability. I'm using jquery-mobile.js to detect the touch screen events and it works on iOS, Android etc., but I'd also like to write conditional statements based on whether the user's device has a touch screen.

Is that possible?

How to add a touch event to a UIView?

How do I add a touch event to a UIView?
I try:

UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, nextY)] autorelease];
[headerView addTarget:self action:@selector(myEvent:) forControlEvents:UIControlEventTouchDown];
// ERROR MESSAGE: UIView may not respond to '-addTarget:action:forControlEvents:'

I don't want to create a subclass and overwrite

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

Thanks!

Forwarding UIGesture to views behind

I am working on an iphone (iOS 4.0 or later) app and having some troubles with touch handling between multiple views. I am having a view structure like this

---> A superView 
     |
     ---> SubView - A 
     |
     ---> SubView - B (exactly on top of A, completely blocking A).

Basically I have a superView, and sibling subviews A and B. B has the same frame as A, hence hiding A completely.

Now my requirement is this.

1. SubView B should receive all swipe and tap (single and double) gestures.
2. SubView A should receive all pinch gestures.

This is how I added gesture recognizers to the views

UISwipeGestureRecognizer *leftSwipe  =  [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];
[leftSwipe setDirection:(UISwipeGestureRecognizerDirectionLeft)];
leftSwipe.delegate  =   self;
[bView addGestureRecognizer:leftSwipe];
[leftSwipe release];

UISwipeGestureRecognizer *rightSwipe  =  [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];
[rightSwipe setDirection:(UISwipeGestureRecognizerDirectionRight)];
rightSwipe.delegate   =   self;
[bView addGestureRecognizer:rightSwipe];
[rightSwipe release];

UIPinchGestureRecognizer *pinch   =  [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)];
pinch.delegate    =   self;
[aView addGestureRecognizer:pinch];
[pinch release];

I did some research and to me UIGestureRecognizerDelegate looked promising and I implemented the delegate method

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer

I returned NO for SubView B, hoping that underlying view will get these event. No such luck though

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if ([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]] && [gestureRecognizer view] == bView) {
        NSLog(@"pinchGesture");
        //bView.userInteractionEnabled = NO;
        return NO;
    }
    return YES;
}

Then I disabled user interaction of SubView B inside the delegate callback (commented code in above block), when pinch gesture is recognized, hoping remaining part of gesture will be received by SubView A. No such luck there too..

So that is where I stand now. I have seen this question, where the accepted answer involves property cancelsTouchesInView. But I believe cancelsTouchesInView only cancel a particular touch event, do not forward it.

Any other way to achieve my requirement? I am ready to work on whatever hint you provide.

EDIT : BOUNTY TIME

My so called subView A is actually an instance of a 3rd party library's View class, which takes all touches away and I don't have any control over any gestures on it. I want different implementation for left and right swipe and I want pinch, tap etc work just like it is working with this third party view. So I put a view on top of A (SubView B) to get left and right swipes. But now I want to forward other gesture events to underlying library.

Detect touch press vs long press vs movement?

I'm currently fiddling around with Android programming, but I have a small problem detecting different touch events, namely a normal touch press (press on the screen and release right away), a long press (touch the screen and hold the finger on it) and movement (dragging on the screen).

What I wanted to do is have an image (of a circle) on my screen which I can drag around. Then when I press it once (short/normal press) a Toast comes up with some basic information about it. When I long press it, an AlertDialog with a list comes up to select a different image (circle, rectangle or triangle).

I made a custom View with my own OnTouchListener to detect the events and draw the image in onDraw. The OnTouchListener.onTouch goes something like this:

// has a touch press started?
private boolean touchStarted = false;
// co-ordinates of image
private int x, y;

public boolean onTouch(View v, MotionEvent event) {
    int action = event.getAction();
    if (action == MotionEvent.ACTION_DOWN) {
        touchStarted = true;
    }
    else if (action == MotionEvent.ACTION_MOVE) {
        // movement: cancel the touch press
        touchStarted = false;

        x = event.getX();
        y = event.getY();

        invalidate(); // request draw
    }
    else if (action == MotionEvent.ACTION_UP) {
        if (touchStarted) {
            // touch press complete, show toast
            Toast.makeText(v.getContext(), "Coords: " + x + ", " + y, 1000).show();
        }
    }

    return true;
}

The problem is that the press doesn't quite work as expected, because when I casually touch the screen it also detects a tiny bit of movement and cancels the touch press and moves around the image instead.

I "hacked" around this a bit my introducing a new variable "mTouchDelay" which I set to 0 on ACTION_DOWN, increase in MOVE and if it's >= 3 in MOVE I execute my "move" code. But I have a feeling this isn't really the way to go.

I also haven't found out how to detect a long press. The culprit really is the MOVE which seems to always trigger.

For an example of what I roughly want, see the Android application "DailyStrip": it shows an image of a comic strip. You can drag it if it's too large for the screen. You can tap it once for some controls to pop-up and long press it for an options menu.

PS. I'm trying to get it to work on Android 1.5, since my phone only runs on 1.5.

jQuery UI slider Touch & Drag/Drop support on Mobile devices

I have already styled and implemented jQuery UI slider into a project. While it is mobile and scales properly, it does not allow tap and drag. Instead you have to touch where you want the slider to go. jQuery mobile UI supports this, but I have time invested into what is already there.

The functionality we want: Here
What we are using: Here

On a desktop you can't tell the difference. On a mobile device it is apparent.

Anyone know how to add this support to jquery UI?

$("#cameraSlider").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    cameramen = ui.value;
    return calcTotal();
  }
});

Thanks, Seth

How can a service listen for touch gestures/events?

I'm wondering how apps like SwipePad and Wave Launcher are able to detect touch gestures/events simply through a service. These apps are able to detect a touch gestures even though it is not in their own Activity. I've looked all over the Internet and haven't found how they can do that.

My main question is how a service can listen in on touch guestures/events just as a regular Activity may receive MotionEvents even though it may not be in the original Activity or context. I'm essentially trying a build an app that will recongize a particular touch gesture from a user regardless which Activity is on top and do something when that gesture is recongized. The touch recongition will be a thread running in the background as a service.

Android How to draw a smooth line following your finger

http://marakana.com/tutorials/android/2d-graphics-example.html

I am using this example below. But when I move my fingers too fast across the screen the line turns to individual dots.

I am not sure whether I can speed up the drawing. Or I should connect the two last points with a straight line. The second of these two solutions seems like a good option, except when moving your finger very fast you will have long sections of a straight line then sharp curves.

If there are any other solutions it would be great to hear them.

Thanks for any help in advance.

google maps android api v2 - detect touch on map

I can't find an example on how to intercept the map touch on new maps api v2.

I need to know when user touches the map in order to stop a thread (the centering of the map around my current location). Please, give me a starting point. Thank you.

Draw in Canvas by finger, Android

I need to build a project for drawing on canvas by fingers,

to get the touch event and motion event of my finger, and thence draw.

Any one can advice me how to get start in project,

and what is best component to do thing like this?

How can I implement a touch-sensitive, responsive, sortable list supporting drag & drop for Bootstrap?

I have a <ul> list that I want to make sortable (drag & drop). How can I get it to work with Bootstrap 3 in modern browsers and touch devices?

I'm trying to use jqueryui-sortable combined with http://touchpunch.furf.com/; it seems to work, but it's hacky and jQueryUI doesn't play nice with Bootstrap.

How can I avoid Bootstrap/jQueryUI conflicts while adding touch-screen support?

Media query to detect if device is touchscreen

What is the safest way, using media queries, to make something happen when not on a touchscreen device? If there is no way, do you suggest using a JavaScript solution such as !window.Touch or Modernizr?

How to prevent sticky hover effects for buttons on touch devices

I have created a carousel with a previous and a next button that are always visible. These buttons have a hover state, they turn blue. On touch devices, like iPad, the hover state is sticky, so the button stays blue after tapping it. I don't want that.

• I could add a no-hover class ontouchend for each button, and make my CSS like this: button:not(.no-hover):hover { background-color: blue; } but that's probably quite bad for performance, and doesn't handle devices like the Chromebook Pixel (which has both a touchscreen and a mouse) correctly.

• I could add a touch class to the documentElement and make my CSS like this: html:not(.touch) button:hover { background-color: blue; } But that also doesn't work right on devices with both touch and a mouse.

What I would prefer is removing the hover state ontouchend. But it doesn't seem like that is possible. Focusing another element doesn't remove the hover state. Tapping another element manually does, but I can't seem to trigger that in JavaScript.

All the solutions I have found seem imperfect. Is there a perfect solution?

What is meaning of boolean value returned from an event-handling method in Android

In android, most event listener methods return a boolean value. What is that true/false value mean ? what will it result in to the subsequence events ?

class MyTouchListener implements OnTouchListener {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        logView.showEvent(event);
        return true;
    }
}

Regarding to the above example, if return true in onTouch method,I found every touch event(DOWN,UP,MOVE,etc) has been captured according to my logView. On the contrary,if return false, onely the DOWN event been captured. So it's seemd that return false will prevent the event to propagate. Am I correct ?

Furthermore, in a OnGestureListener, many methods have to return a boolean value too. Do they have the same meaning ?

Eliminate 300ms delay on click events in mobile Safari

I've read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to see if the user intends to double-click, but from a UX perspective waiting 300ms is often undesirable.

One solution to eliminate this 300ms delay is to use jQuery Mobile "tap" handling. Unfortunately I'm not familiar with this framework and don't want to load some big framework if all I need is a line or two of code applying touchend in the right way.

Like many sites, my site has many click events like this:

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

and what I'd like to do is to get rid of the 300ms delay on ALL those click events using a single code snippet like this:

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

Is that a bad/good idea?