Wedge

Public area => Bug reports => The Pub => Archived fixes => Topic started by: Dragooon on March 17th, 2012, 09:12 PM

Title: [Bug] Select menu is slightly broken on touch screens
Post by: Dragooon on March 17th, 2012, 09:12 PM
The select menu doesn't respond to scrolling on touch screen devices
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on March 17th, 2012, 09:26 PM
Which is why iPhones get a much higher size. To avoid the bars.
I don't remember if I added this for tablets as well.
I dunno how a scrollbqr is supposed to be used on a touch device.

Should really create a bug board now... ;)
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Dragooon on March 17th, 2012, 09:28 PM
Wouldn't a safer bet be to let native select menus be used on touch devices? Just test for
Code: [Select]
var isTouch = 'ontouchstart' in document.documentElement;
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Arantor on March 17th, 2012, 09:38 PM
That seems a good compromise.
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on March 17th, 2012, 10:42 PM
Hey good test string :)

However the reason I don't do that is that sometimes we use HTML in options...
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Arantor on March 18th, 2012, 08:24 PM
I have noticed, though, that it is possibly to trip up the selectbox on things like the jumpto if you happen to have it near the bottom of the page and a lot of boards - and it's not possible to scroll on an iPod touch (or if it is, I haven't figured out how)
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on March 18th, 2012, 10:41 PM
I don't think it's possible toake it scroll. We mentioned that elsewhere today iirc. The solution is to avoid restraining height but I haven't got time to work on the select box right now.
As for tripping up you mean having it cut off on the right yeah? It's also another thing I always forget to fix. It's easy enough, I just need to reduce the left margin by the same amount of pixels.
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Arantor on March 18th, 2012, 10:45 PM
No, I did mean the whole vertical thing, haven't caused it to be cropped on the right for any reason.
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on March 19th, 2012, 07:01 AM
It happens in the admin area mostly.
As for what you describe. How's this a bug? Wedge shows the a dropup instead of a dropdown so that it doesn't get cropped..
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Dragooon on March 19th, 2012, 07:41 AM
Quote from Nao on March 18th, 2012, 10:41 PM
I don't think it's possible toake it scroll. We mentioned that elsewhere today iirc. The solution is to avoid restraining height but I haven't got time to work on the select box right now.
As for tripping up you mean having it cut off on the right yeah? It's also another thing I always forget to fix. It's easy enough, I just need to reduce the left margin by the same amount of pixels.
It'll require some tricky scrolling code to make it scrolling, can't you drop the HTML from options when using the native select?
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Dragooon on March 19th, 2012, 03:47 PM
This isn't exactly ideal, and it will lag a lot on touch devices. But it scrolls

Code: (At the end of ScrollBar function in sbox.js) [Select]
$dd[0].addEventListener('touchmove', function (e)
{
scrollTo(startPos - e.touches[0].pageY + iTouch);
e.preventDefault();
});
$dd[0].addEventListener('touchstart', function (e)
{
iTouch = e.touches[0].pageY;
startPos = parseInt($thumb.css('top') || 0);
});
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on March 30th, 2012, 03:09 PM
Never got around to replying that post...
I'm still unsure what to do about this. I'm always against forcing every single browse to load code that it will never need. (Just like I'm not cool about forcing them to load ARIA stuff they'll never use either, but that's a bit harder to detect than a browser version...)

I'd like to get some opinions on this.
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Arantor on March 30th, 2012, 03:12 PM
This problem is only going to get worse as touch-capable desktops become more prevalent, so I'd be inclined to implement it like that and run with it. (Though I realise it's not the best solution.)
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on March 30th, 2012, 03:19 PM
It's just that, I like having my dropdown without any scrollbar. I find this more natural... More natural, even, than the iOS implementation.
Posted: March 30th, 2012, 03:19 PM

BTW, only 5 commits left before we reach 300 commits (together) for the first quarter :)
We've already broken our record by far, anyway!
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Arantor on March 30th, 2012, 03:21 PM
Hmm, iOS' implementation is pretty natural, as it only shows you the scrollbar as you're scrolling, but I've wondered if there shouldn't be a visual cue that the selection area is larger than what's currently displayed.

And woohoo! 2012 is very definitely shaping up to be a helluva year for both of us!
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on May 1st, 2012, 10:26 PM
So.. I was thinking about this topic after noticing that Facebook's iOS app had a perfectly usable scrollbar in their notification area (so many things to do, so few things I actually remember to do later...), and decided to implement Dragooon's code for a try.

It's live here, and it's only 28 extra bytes to sbox.js (gzipped), so I'll certainly be keeping it... It seems to work just like on Facebook, I didn't think it would feel so natural to simply scroll by tapping and moving around in that place, but it does have one drawback... Try it on the Quick Access box. When you're moving the finger, it will 'naturally' highlight a few entries, even though I'm not actually selecting them... And if I release my finger, it'll immediately pick an entry and then proceed to run it. Which isn't good... It's probably good on other sboxes, but not this one, and I need a more 'generic' solution.
I'm sure it can be solved with another event or something that is touch-centric. Any ideas?
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Dragooon on May 5th, 2012, 07:53 PM
One idea to be unbind the click/hover events on start and bind them again at end. Should be a couple more lines.
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Nao on May 6th, 2012, 06:13 PM
This would force me to add a touchend event, wouldn't it..?
And which one would I have to disable, do you reckon?
$items.not('.disabled').mousedown(clickSBItem), I suppose?

Wondering if it wouldn't be simpler to just turn it into a mouseup event... Maybe touch devices are less picky when it comes to mouseup... I don't know. I'd have to check on quirksmode.org, I think it lists all events triggered on touch for all touch devices...
Title: Re: [Bug] Select menu is slightly broken on touch screens
Post by: Dragooon on May 7th, 2012, 05:22 PM
Yeah, something like this(Not tested)

Code: [Select]
$items = $dd.children().not('.optgroup');
$dd[0].addEventListener('touchend', function(e)
{
$items.mousedown(clickSBItem);
});
$dd[0].addEventListener('touchmove', function(e)
{
scrollTo(startPos - e.touches[0].pageY + iTouch);
e.preventDefault();
});
$dd[0].addEventListener('touchstart', function(e)
{
iTouch = e.touches[0].pageY;
startPos = parseInt($thumb.css('top') || 0);
$items.unbind('mousedown');
});

Not entirely sure about the mouseup thing, I think it'l still fire but I haven't experimented with that.