Home arrow Web Design Blog
Web Design Blog

.htaccess file PDF Print E-mail

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 PDF Print E-mail

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");
 
Read more...
 

jQuery-based Image Rotator PDF Print E-mail

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-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator
jQuery-based Image Rotator

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.

Read more...
 

jQuery table effect - hover and background colors PDF Print E-mail
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.

Read more...
 

jQuery graphic effect - hover and fading opacity PDF Print E-mail
Heart
Question
Dizzy
Perfect

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 PDF Print E-mail

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

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.

Read more...
 
<< Start < Prev 1 2 3 4 Next > End >>

Results 1 - 6 of 21
Banner

USATODAY.com Video - Talking Tech