.htaccess file | JIA Website Design & Web Development - search engine friendly - Los Angeles South Bay

Home

Web Design Blog

The Apache Web server provides a feature called .htaccess file, which provides commands to control a Web site. This file is simply a text file containing Apache directives. Those directives apply to the documents in the directory where the file is located, and to all subdirectories under it as well. Other .htaccess files in subdirectories may change or nullify the effects of those in parent directories.

Here are some useful information:

Redirect non-www to www version of site

 
RewriteEngine On
RewriteCond %{HTTP_HOST} ^YourSite.com [nc]
RewriteRule (.*) http://www.YourSite.com/$1 [R=301,L]

Or the code below that you don't have to rewirte the domain:

 
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Redirects

You can use .htaccess file to redirect any request for a specific page to a new page...

 
Redirect /OldDir/old.html http://site.com/NewDir/new.html

Redirect the missing file to index

 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://%{HTTP_HOST}/ [R]

Apache Module mod_rewrite reference

jQuery: Disable right click

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>