Hybrid applications are really nice because of the “code once, build all” philosophy. However, since Hybrid apps are actually web apps, they tend to show a context menu when a user tap and holds some elements like links, images or texts. Hybrid app developers would agree with me that this context menu is pretty ugly in apps, so it’s best to just remove them.
Well since I’m a huge BlackBerry fan, I love to develop for BlackBerry and this context menu seems to be a really disturbing problem for me and a lot of other BlackBerry developers. This is because most of the solutions to remove this context menu works on all other devices but BlackBerry.
So css solutions like:
-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color: rgba(0,0,0,0);
or Javascript solutions like:
$(document).bind('contextmenu', function(e) {
return false;
});
document.oncontextmenu = function() {
return false;
}
or even HTML solutions like:
<body oncontextmenu="return false">
Do not work at all. Most of these solutions do work on Android, Windows and others, however, it never seems to work on BlackBerry10. A work around for this context menu issue on BlackBery10 is:
Replace all <a> tags with something like the <span> tag. This way, the OS would not see this element as a link and not bother your users with a context menu on tap hold.
Remove all <img> tags. Replace them with <div> tags and use css to set their background image instead. So this:
<img src = "data/fincoapps.png" width="300" height="300" />
Becomes:
<div id="fincoappsImage"></div>
#fincoappsImage{
width: 300pc;
height: 300px;
background: url('data/fincoapps.png') no-repeat;
}
Using the method above would show the image just as you want it without the irritating context menu popping up on tap hold.
Eventually, I discovered a better solution. For this you would need to install the BlackBerry context menu plugin. This plugin gives you absolute control over context menus in your application. I won’t be writing about the full functionality of this plugin in this post. To find out more about this plugin, see here.
After installing com.blackberry.ui.contextmenu, simply add this code to your Javascript
document.addEventListener("deviceready", function(){
blackberry.ui.contextmenu.enabled = false;
},true);
With that, the context menu would be completely disabled in your app. 😀
Feel free to ask questions using the comment box below