jQuery Succinctly®
CHAPTER 7
jQuery and the Web Browser
Disabling the right-click contextual menu
Using JavaScript, you can disable the browser’s native right-click contextual menu. Doing so with jQuery is a snap. We simply cancel the contenxtmenu event.
Sample: sample80.html
<!DOCTYPE html>
<html lang="en">
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> (function ($) { $(document).bind('contextmenu', function () { return false; }); })(jQuery); </script>
</body>
</html>
Scrolling the browser window
While there are numerous plugins for scrolling the browser window, doing so can be trivial when a simple scroll is required. By setting the scrollTop CSS property on the <html> and <body> elements, it is possible to control the position of the horizontal or vertical scrolling. In the code below, I use the animate() method to animate the horizontal scrolling to a specific element in the page.
Sample: sample81.html
<!DOCTYPE html>
<html lang="en">
<body>
<style>
li
{
padding-bottom: 500px;
}
</style>
<ul>
<li><a href="#" class="next">Next</a></li>
<li><a href="#" class="next">Next</a>/<a href="#" class="prev">Previous</a></li>
<li><a href="#" class="next">Next</a>/<a href="#" class="prev">Previous</a></li>
<li><a href="#" class="prev">Previous</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> (function ($) {
$('.next')
.click(function () { $('html, body').animate({ scrollTop: $(this).parent().next().find('a').offset().top }, 1000); });
$('.prev')
.click(function () { $('html, body').animate({ scrollTop: $(this).parent().prev().find('a').offset().top }, 1000); });
})(jQuery); </script>
</body>
</html>
- 1800+ high-performance UI components.
- Includes popular controls such as Grid, Chart, Scheduler, and more.
- 24x5 unlimited support by developers.