jQuery: Disable right click | JIA Website Design & Web Development - search engine friendly - Los Angeles South Bay

Home

JavaScript

Some of us might want to disable right click, or want to create our own context menu for the website, this is how we can detect right click:

 
 
# $(document).bind("contextmenu",function(e){  
#     //you can enter your code here, e.g a menu list  
#           
#     //cancel the default context menu  
#     return false;  
# });

Preloading images

When you’re using images in Javascript, a good thing is to preload it before you have to use it. This code will do the job:

 
jQuery.preloadImages = function()
{
  for(var i = 0; i").attr("src", arguments[i]);
  }
};
 
// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

jQuery-based Image Rotator

Follow up with the tutorial in on-line class in Lynda.com - jQuery - Essential Training. Here is an example of creating a jQuery-based image rotator.

There are 31 pictures in size of 400px x300px and the speed is 0.4 seconds for each rotation.

jQuery is a free, powerful, open source javascript library. It simplifies the task of creating highly responsive web pages. It works across modern browsers. Abstracts away browser-specific features, allowing you to concentrate on design.

Vision	Exams: $40 max. LASIK: 15% or 5% off promo rates Optometry: 5-20%
Dental	10-35%
Alternative Care	20%
Wellness	10-50%
Health Supplies	10-25%
Long-Term Care Services	5-30% Facilities: 5-15%
Hearing	Lower of 30% off MSRP or $300 off retail (per device)
Infertility Treatment	5-20%
Medical Care	Practitioners: 15-35% Facilities: 5-20% Diagnostic Testing 20-60% Physical therapy/rehab: 15-25%
Pharmacy	20-50%
Behavioral Health	Practitioners 15-35% Facilities 15-25%
NurseLine	No charge to member

This is a table to demo the effect by using jQuery to assign the background colors on even and odd rows, and the highlight on mouse over effect. Click read more button to see the scripts and css.

Except the effect in previous example to zoom in and out on hovering the graphics, I have added an opacity level changed on each. Only need to add a class name imghover and add the script below.

Function: fadeTo(speed, opacity, callback) - Fades the opacity of all matched elements to a specified opacity and fires an optional call back after completion.

 
<script type="text/javascript">
    $(function() {
    $(".imghover").hover(
      function() {             
        $(this).fadeTo("fast", 0.7);
      },
      function() {             
        $(this).fadeTo("fast", 1.0);
      });
    });
</script>