Thanks,
Jason
5 Answers, 1 is accepted
<!DOCTYPE html>
<
html
>
<
head
>
<
base
href
=
"http://demos.telerik.com/kendo-ui/drawer/index"
>
<
style
>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css"
/>
<
script
src
=
"http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"view"
id
=
"drawer-home"
data-layout
=
"drawer-layout"
data-title
=
"Inbox"
data-zoom
=
"true"
>
<
div
id
=
"log"
>
</
div
>
</
div
>
<
div
data-role
=
"drawer"
id
=
"my-drawer"
style
=
"width: 270px"
data-show
=
"drawerShow"
data-views
=
"['drawer-home']"
data-swipe-to-open
=
"false"
>
<
ul
data-role
=
"listview"
data-type
=
"group"
>
<
li
>Mailbox
<
ul
>
<
li
data-icon
=
"inbox"
><
a
href
=
"#drawer-home"
data-transition
=
"none"
>Inbox</
a
></
li
>
<
li
data-icon
=
"star"
><
a
href
=
"#drawer-starred"
data-transition
=
"none"
>Starred Items</
a
></
li
>
<
li
data-icon
=
"compose"
><
a
href
=
"#drawer-drafts"
data-transition
=
"none"
>Drafts</
a
></
li
>
<
li
data-icon
=
"sent"
><
a
href
=
"#drawer-sent"
data-transition
=
"none"
>Sent Items</
a
></
li
>
<
li
data-icon
=
"trash"
><
a
href
=
"#drawer-deleted"
data-transition
=
"none"
>Deleted Items</
a
></
li
>
<
li
data-icon
=
"spam"
><
a
href
=
"#drawer-spam"
data-transition
=
"none"
>Spam</
a
></
li
>
</
ul
>
</
li
>
<
li
>Tasks
<
ul
>
<
li
>To Do</
li
>
<
li
>In Progress</
li
>
<
li
>Done</
li
>
<
li
>High Priority</
li
>
<
li
>Low Priority</
li
>
</
ul
>
</
li
>
<
li
>Account
<
ul
>
<
li
data-icon
=
"settings"
>Settings</
li
>
<
li
data-icon
=
"off"
>Log Out</
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"drawer-layout"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
data-role
=
"button"
data-rel
=
"drawer"
href
=
"#my-drawer"
data-icon
=
"drawer-button"
data-align
=
"left"
id
=
"launchDrawer"
data-click
=
"drawerButtonClick"
></
a
>
<
span
data-role
=
"view-title"
></
span
> <
span
id
=
"counter"
>0</
span
>
<
a
data-align
=
"right"
data-role
=
"button"
class
=
"nav-button"
href
=
"#/"
>Index</
a
>
</
div
>
</
header
>
</
div
>
<
script
>
// reset global drawer instance, for demo purposes
kendo.mobile.ui.Drawer.current = null;
</
script
>
<
style
>
.km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
.km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
.km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
.km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
{
background-color: #4e4e4e;
color: #fff;
}
.km-ios #my-drawer .km-group-title,
.km-blackberry #my-drawer .km-group-title
{
background-color: #6e6e6e;
color: #fff;
}
.km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
.km-inbox:before, .km-inbox:after { content: "\E0B0"; }
.km-sent:before, .km-sent:after { content: "\E0C6"; }
.km-trash:before, .km-trash:after { content: "\E0C3"; }
.km-spam:before, .km-spam:after { content: "\E0C5"; }
.km-star:before, .km-star:after { content: "\E0D7"; }
.km-settings:before, .km-settings:after { content: "\E0DA"; }
.km-off:before, .km-off:after { content: "\E0B9"; }
.inboxList
{
font-size: .8em;
}
.inboxList p,
.inboxList h2,
.inboxList h3
{
margin: 5px 2px;
}
.inboxList p,
.inboxList h3
{
color: #777;
}
.inboxList h3.time
{
color: #369;
float: left;
margin-right: 10px;
}
#drawer-spam .spam
{
color: darkred;
background: currentcolor;
display: block;
margin: 2em;
font-size: 1.4em;
}
#drawer-spam .spam .km-text
{
color: white;
}
</
style
>
<
script
>
var app = new kendo.mobile.Application(document.body);
$(function() {
//alert($("#launchDrawer span:first-child").attr('class'));
//$(".km-drawer-button").click(function() {log("button icon click")});
$(".km-drawer-button").bind('touchstart', function() {log("button icon touchstart")});
$("#launchDrawer").bind('touchstart', function() {log("drawer span touchstart")});
})
function drawerButtonClick() {
//log("Drawer button click");
}
function drawerShow() {
log("Drawer show");
}
function increment() {
$("#counter").html(parseInt($("#counter").html())+1);
}
function log(message) {
console.log(message);
$("#log").append(message + "<
BR
/>");
}
</
script
>
</
body
>
</
html
>
Hello Jason,
The behavior that you describe is a result of a fairly complex browser behavior and implementations. Here are some of the problems and possible solutions:
1. Buttons positioned at the far left are likely to suffer from the fact that native back/forth gestures are reserved by the browser. Therefore the touchend event is not consistently fired when the button is positioned in the left/right edges of the screen.
2. You might ask - why not fire the button tap event on touchstart? The problem with this implementation is that it will make the buttons non-scrollable, and cause some more undesired behavior. We will consider adding configuration option allowing the user to fire the tap event on touchstart, whenever this is possible depending on the implementation.
3. Another issue is tap while moving, in this situation setting the default threshold of the UserEvents, will help on make the button more responsive, when tapped on the move.
4. From UX standpoint - most people are inclined to click on the icon in order to open the Drawer, my observations are that removing the icon and placing a text instead will make people tap the text on the area that is closer to the center of the screen, therefore minimize the unnecessary second taps.
I have prepared an example that shows, some of the workarounds in action, please test it out and let me know if it helps.
Regards,
Kiril Nikolov
Telerik
Thanks for your response. I did try using text instead....it doesn't seem to have made a difference. I still frequently require multiple taps to open the drawer. Just to clarify - what is the event that causes the drawer to show? Touchend?
Thanks,
Jason
Just to clarify, I've attached an updated sample and a screenshot of the behaviour I'm seeing.
Thanks,
Jason
I examined your project and agree that the button is still not one hundred percent responsive although that it works better than before (especially if you increase the threshold).
At present we cannot offer a better solution. We will log this issue for further investigation and will let you know if we find another way to improve the responsiveness.
You may follow the issue status on GitHub: https://github.com/telerik/kendo-ui-core/issues/543
Regards,
Alexander Valchev
Telerik