Obtaining Outer Dimensions (^) ❘ 171
NOTE Remember: You can download all the book’s examples for free from
http://www.wrox.com/go/webdevwithjquery
Before we explain the concepts in this example, consider this. Although replacing the context menu
that your browser provides can be used to provide useful functionality that can go much further
in making your web-based applications look and feel like desktop applications, you should be cau-
tious about the scenarios that you choose to invoke custom context menu functionality. The context
menu is also heavily used by browser users to do simple things like navigate forward or backward
from their present location, to reload the current page, or to do other useful tasks associated with
using the browser. But if your web application recklessly takes control of the context menu, you risk
alienating or annoying your user base because your application prevents the user from accessing and
interacting with his browser in the way he normally would. In addition, disabling the browser’s
context menu will not prevent users from seeing your application’s source code because you can still
go to the browser’s main menu and click the View Source option.
More savvy users can bypass JavaScript by disabling it or even directly access your source code
through other means, such as via your browser’s cache or by accessing the source code from your
website directly from a command line or script. If you’re considering disabling the context menu
for this purpose, you may want to reconsider publishing your web application for public consump-
tion because this method of preventing access to your website’s source code is ineffective and is sub-
ject to numerous workarounds. Remember, content you place on the web is, by design, made to be
publicly consumed and transportable to browsers of all kinds residing on platforms of all kinds. The
key thing to keep in mind is that rendering your markup and executing your JavaScript is entirely
optional.
That said, the preceding example takes a
of your browser’s default context menu. When you do a contextual click on the document (anywhere
in the browser window), the
based on where the click occurred.
First, you set up the event that fi res when the user accesses the context menu. This is done using
jQuery’s on() method because jQuery does not provide a contextmenu() method. It should also be
noted that contextmenu events can be disabled in Firefox; they are enabled by default.
The following code thus far disables the browser’s default context menu when the user tries to access
the context menu with the mouse cursor within the document window:
$(document).on(
'contextmenu',
function(event)
{
event.preventDefault();
Next, the
variable, and that
var contextMenu = $('div#contextMenu');
contextMenu.show();
http://www.it-ebooks.info