W3 Lessons

Saturday, June 9, 2012

Custom File upload control jQuery

Making Stylish HTML Form file input control in designing part of Web Layout was create browser compatibility issues and upload problems. Customizing Form Input Control using following jQuery technique.

jquery.fileControl.js

(function($) {
    
    $.fn.fileControl = function(options) {
                
        /* TODO: This should not override CSS. */
        var settings = {
            width : 250
        };
                
        if(options) {
            $.extend(settings, options);
        };
                        
        return this.each(function() {
            
            var self = this;
            var wrapper = $("<div>")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": settings.imageheight + "px",
                                "background": "url(" + settings.image + ") 0 0 no-repeat",
                                "background-position": "right",
                                "display": "inline",
                                "position": "absolute",
                                "overflow": "hidden"
                            });
                            
            var filename = $('<input class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px"
                             });

            $(self).before(filename);
            $(self).wrap(wrapper);

            $(self).css({
                        "position": "relative",
                        "height": settings.imageheight + "px",
                        "width": settings.width + "px",
                        "display": "inline",
                        "cursor": "pointer",
                        "opacity": "0.0"
                    });

            if ($.browser.mozilla) {
                if (/Win/.test(navigator.platform)) {
                    $(self).css("margin-left", "-142px");                    
                } else {
                    $(self).css("margin-left", "-168px");                    
                };
            } else {
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");                
            };

            $(self).bind("change", function() {
                filename.val($(self).val());
            });
      
        });
        

    };
    
})(jQuer
fileControl

FileControl.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Custom File Upload Control - W3Lessons.com</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.filecontrol.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// Custom File Input Control
 $("input.attachment").fileControl({ 
 image: "browse_btn.png",
 imageheight : 39,
 imagewidth : 128,
 width : 175,
 height:40,
 marginleft:0
 });
 
 })



</script>
<style type="text/css">
body,td,th {
 color: #D3BCA7;
}
body {
 background-color: #333;
}

.attachment, .attach
{
 padding:10px;
 margin-bottom:5px;
}
</style>
</head>

<body>

<form method="post" enctype="multipart/form-data">
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="submit" class="attach" value="Upload" />
</form>

</body>
</html>

Copy Button Image

Thursday, May 31, 2012

htaccess redirect with or without www

Developing SEO friendly website, you have to decide the domain name is whether it is with "WWW" or without "WWW". as per your need you can transform the user behavior by redirecting reversal order based on your need. If you decide without WWW mean, while user attempt to type with http://www.example.com you need to redirect http://example.com, If you decide with WWW mean, you need to redirect with www when user typing http://example.com to http://www.example.com

In this case, We have the great option in .htaccess to decide with or without WWW .
Here is the solutions for htaccess redirect with or without www

Examples with mentioning Domain Name

Redirect WWW to non-WWW or without WWW Domain Name:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.example\.com [NC]
RewriteRule ^(.*)$ http://example.com/$1 [L,R=301]

Redirect non-WWW to with WWW Domain Name:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.com [NC]
Rewriterule ^(.*)$ http://www.example.com/$1 [R=301,NC]

Example with Suitable for any Website without mentioning the domain name:
(Suitable for any Website) no need to tell the domain name on code.

Redirect www to non-www (both: http + https)
if we need to do this for separate http and https:

Options +FollowSymLinks
RewriteEngine On

# if without https
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

# if https
RewriteCond %{HTTPS} on
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

Redirect non-www to www (both: http + https)
if we need to do this for separate http and https:

Options +FollowSymLinks
RewriteEngine On

# if without https
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} !^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

# if https
RewriteCond %{HTTPS} on
RewriteCond %{HTTP_HOST} !^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]