10
X

Beginner

How to Disable Right Click Using jQuery

There are many reasons a developer may want to disable right-click on their websites. While it’s not always considered a best practice, it’s definitely doable and can actually be achieved quite easily. With jQuery it’s really simple to disable right-click on your site. All you need to do is add this snippet to your scripts:

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
   return false;
 });
});

These few lines of code will completely block your user from being able to use right-click on your site.

Using jQuery to Dynamically Add CSS to HTML

jQuery easily allows for CSS to be dynamically changed as a result of different event triggers. This is especially useful if you want to change some styling of a particular element after a click. Implementing this type of code is fairly simple. The code in the following example would change the color of the text within a div after a div is clicked:

JAVASCRIPT:
  1. <br />
  2. $('div').click(function(){<br />
  3. $('div p').css("color", "#000");<br />
  4. });<br />

In the above example, the .css() method takes two values -- the first should be the name of the CSS property you want to change, the second should be the property's new value. Make sure the values are separated by a comma (not a colon like they would be in your stylesheets), and make sure they're within quotes.

How to Validate Forms Using jQuery

Writing your own form validation code doesn't have to be a scary or time-consuming process. jQuery's Validation Plugin makes form validation easy and straightforward. validate To get started, all you need to do is link to the plugin files (files are also available for download if you'd prefer to host them locally) along with your standard jQuery library link.
JAVASCRIPT:
  1. <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>

From there, you can start coding. Here's what the validation code might look like if you have a form with 4 different input fields (First Name, Last Name, Email, Password) you'd like to validate:
JAVASCRIPT:
  1. //we're going to run form validation on the #validate-form element
  2. $("#validate-form").validate({
  3. //specify the validation rules
  4. rules: {
  5. firstname: "required",
  6. lastname: "required",
  7. email: {
  8. required: true,
  9. email: true //email is required AND must be in the form of a valid email address
  10. },
  11. password: {
  12. required: true,
  13. minlength: 6
  14. }
  15. },
  16.  
  17. //specify validation error messages
  18. messages: {
  19. firstname: "First Name field cannot be blank!",
  20. lastname: "Last Name field cannot be blank!",
  21. password: {
  22. required: "Password field cannot be blank!",
  23. minlength: "Your password must be at least 6 characters long"
  24. },
  25. email: "Please enter a valid email address"
  26. },
  27.  
  28. submitHandler: function(form){
  29. form.submit();
  30. }
  31.  
  32. });

It's important to makes sure that the names of your input fields match your jQuery code, so for example, the HTML for the First Name input field should look something like this:
HTML:
  1. <input type="text" name="firstname">

Additionally, the id of your form needs to match the id called to validate in the first line of the above jQuery code, so in this case, the form's id would need to be #validate-form in order for this code to work. That's all it takes to create some basic form validation in only a few minutes! Read through the jQuery Validation Plugin's documentation to learn even more about how to utilize this helpful plugin.

Using jQuery’s Data APIs

In the beginning (well, beginning with jQuery 1.2.3 in early 2008) there was the jQuery.data() API. It offers a way to associate JavaScript data — strings, numbers, or any object — with a DOM element. As long as you manipulate the DOM element with jQuery, the library ensures that when the DOM element goes away, the associated data goes away as well. This is especially important for older versions of IE that tend to leak memory when JavaScript data is mixed with DOM data.

Most jQuery code sets data values using the higher-level .data() API; for example, $("div").data("imaDiv", true) sets a boolean value on every div in the document. This API, in turn, calls down to jQuery.data() with each element to set the value. For completeness, there are also jQuery.removeData() and .removeData() to remove data elements, and jQuery.hasData() to determine if any data is currently set for an element.

Read the rest of this entry »

Accessible Showing and Hiding

Editor's Note: When I started this blog nearly three years ago, one of the first things I did was write a series on showing and hiding elements on a page. The posts were very basic, as was my knowledge at the time. At best, they demonstrated an incomplete answer to the question of how to selectively reveal content based on user interaction. At worst, they encouraged a solution without any regard to accessibility. That's why I was thrilled when I saw an article on the Filament Group blog describing their accessible collapsible content widget. They've graciously accepted my request to re-post that article here, so without any further ado, here it is…

Collapsible content areas are frequently presented in web sites and applications as a way to let users to control how content is shown or hidden on the page. Also called collapsibles, spin-downs, toggle panels, twisties, and content disclosures, they're ideal for selectively displaying optional information — like instructional text or additional details, for example — so users can focus on the task at hand and view this content only as needed.

The collapsible content area widget is fairly simple — a couple of HTML elements controlled with minimal CSS and JavaScript — but when we were researching our book, Designing with Progressive Enhancement, we discovered that many common approaches to creating collapsible content fail to incorporate accessibility features. Happily, there is a way to build collapsible content with progressive enhancement so it delivers an optimal accessible experience for sighted and screen reader users alike.

The code example described in this article is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets that accompanies our new book, Designing with Progressive Enhancement.

Read the rest of this entry »

Detecting Ajax Events on the Server

When working with an Ajax-enhanced website, it's generally a good idea to provide a regular request fallback for any core functionality of the site. When you work to ensure that a fallback is in place, you will be faced with determining when a particular request is an Ajax request or just a normal page request. In most situations, it's considered a best practice to build your site without Ajax first, adding the Ajax functionality afterward so the fallbacks are in place from the beginning.

Fortunately, jQuery makes it super easy to differentiate the Ajax requests from normal page views.

Read the rest of this entry »