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

Home

Web Design Blog

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>

jQuery graphic effect - zooming and fading caption

Heart

Question

Dizzy

Perfect

I follow the jQuery thumbnail with zooming image tutorial here and make this test. It's simple and fun.

Google Analytics provides an easy way to track clicks on links that lead away from your site. Because these links do not lead to a page on your site containing the UTM JavaScript, you will need to tag the link itself. This piece of JavaScript assigns a pageview to any click on a link - the pageview is attributed to the filename you specify.

For example, to log every click on a particular link to www.example.com as a pageview for "/outgoing/example_com" you would add the following attribute to the link's tag:

 
<a href="http://www.example.com" 
onClick="javascript: pageTracker._trackPageview('/outgoing/example.com');">

It is a good idea to log all of your outbound links into a logical directory structure as shown in the example. This way, you will be able to easily identify what pages visitors clicked on to leave your site.

To verify that _trackPageviewis being called correctly, you can check your Top Content report 24-48 hours after the updated tracking code has been executed. You should be able to see the assigned pagename in your report.

This article source from here.