Jquery Method to Check the File upload control Empty or not, File Size and File Type(e.g. JPG,BMP,PDF)

Html:
<input type="file" id="file" name="file" />
<span id="valFile" class=""></span> // span for showing error message.

CSS:


.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}


JQuery Snippet:
$(document).ready(function( )
{

//Changing the Error message of the File Upload and checking the File size and File type.
        $("#file").change(function () {

            $("#valFile").html("Please select file."); // Default Error Message
         
            var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'doc', 'docx', 'pdf'];

            if ($(this).val() != "") { //checking wheather the file uploader is empty or not
             
                //Checking the File type
                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    $(this).addClass("input-validation-error").removeClass("valid");
                    $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid")
                        .html("Invalid Filetype(only image files/doc/docx/pdf)");
                }
                else {
                    $(this).removeClass("input-validation-error").addClass("valid");
                    $("#valFile").removeClass("field-validation-error").addClass("field-validation-valid");

                    if ((this.files[0].size > 4194304) && ($(this).val() != '')) {
                        $(this).addClass("input-validation-error").removeClass("valid");
                        $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid")
                            .html("File size exceeded 4MB");
                    }
                }
            } else {
                $(this).addClass("input-validation-error").removeClass("valid");
                $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid");
            }
        });

});

Happy Coding!

How to count the number of check-box checked on a particular condition from a table using Jquery

Scenario: Assume that a table has data from a cricket team with details such as ID , Name, Role , Age ,City, Average. SO you need to calculate how many bowlers you have selected from the table, total no. of players selected and their average age.

Similarly, if batsman age or count is required then simply change the value of Contains to "Batsman" from the above code.

Happy Coding!

Kendo UI Sorting Date field in a grid having empty spaces and dates

Today i came to an issue that the date field are not sorted properly in the kendo grid if it has empty or Null spaces in it. the sorting occurs fine for descending order but fails when it is ascending order.

To fix the above issue a small trick will work for it. Just use this line of code in the grid filtration.

{field: "DateJoined", title: "Deployed", width: 50, template: '#=(DateJoined==null)?"":kendo.toString(kendo.parseDate(DateJoined,"MM/dd/yyyy"),"MM/dd/yyyy") #', format: "{0:M/d/yyyy}", type: "date" },

Happy coding!

Center an element on the screen using jQuery

jQuery.fn.center = function () {

    this.css("position","absolute");

    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");

    return this;

}

 This is how you use it:  $('#window').center();

The above method will show the control @ center of the Window.

How to resize a website dynamically as per the window size

Today I got some requirement to re-size the some website that should doesn't have scroll bar and need to adjust dynamically as per the window size.

To do that you need to do it JQuery or CSS. I am posting here how you will do it in JQuery.

Just put this script in the page which you want to adjust its size.

<script type="text/javascript">
    $(document).ready(function () {
        Resize();
    });
    
 $(window).resize(function () { Resize(); location.reload(true); }); // when the window get re-sized
   
    function Resize() {
        var height = window.innerHeight ? window.innerHeight : $(window).height();
        height = height - 96; // Height of the Logo and the Footer is 96px so it is deducted.
        $("#leftNav").height(height);
    }
</script>

Here i am concerned about the height. I you want to resize with width also you can use $(window).width().

Note: Be cautious if you are still want to work the code in IE7 the do remember the following things, you need to deduct the view port

    // IE7

    if (jQuery.browser.msie) {

        if(parseInt(jQuery.browser.version) == 7) {

            viewportHeight -= 3;

        }

    }

    if($('#leftNav').height() > viewportHeight) {

        $('#leftNav').height($('#leftNav').height() - viewportHeight);

    }

    if($('#leftNav').height() < viewportHeight) {

        $('#leftNav').height(viewportHeight - $('#leftNav').height());

    }

 

Images are not updating in the IE on updating the Image file in websites using asp.net

This is a situation that occurs to each and every web developer who is developing the website.
Being a web developer using Microsoft .Net Framework i found this issue almost every next user it has. So, there are lot of solutions to this problem but I had found one of them is to be a very fine for the website  I am developing.


These are Some of the solutions that peoples nearby told me and some I find out in googling.

1) You need to remove the cache while updating the record, so the previous image is removed from the cache.

2)Force loading the web-page once image  is updated.

3) Load the image asynchronously only as per the current time.

However I like the last solution, i.e. is as below:

solution:
<img alt="Image" id="imgApp" src="@Url.Content("~/Images/Thumbnails/Apps/" + Model.App.ID + ".png?version=" + DateTime.Now.Ticks.ToString(CultureInfo.InvariantCulture))"

I had done this thing in mvc3 but you can do it any language.

Check All the CheckBox when a "All" Check box is Checked using Jquery

 Sometimes it is required that to do bulk action, you need to select a checkbox so all the check-box corresponding to it get checked. This can be done as below.

Here you can use a ID instead of a class and rather than change you can go for a click event.
 $(".chkAll").live("change", function () {
 if ($(this).is(":checked")) {
                    $(this).siblings(".selectedSchool:checkbox").each(function () {
                        $(this).attr('checked', true);
                    });
                }
                else {
                    $(this).siblings(".selectedSchool:checkbox").each(function () {
                        $(this).attr('checked', false);
                    });
                }
            });

This code is used to check whether the total check-box is equal to the checked check-box or not & change the checked attribute for "All" check-box.

            $(".selectedSchool:checkbox").live("change", function () {

                if ($(".selectedSchool:checkbox:checked").length === 0) {
                    $(".chkAll").attr('checked', false);
                }
                if ($(".selectedSchool:checkbox:checked").length === $(".selectedSchool:checkbox").length) {
                    $(".chkAll").attr('checked', true);
                }
                if ($(".selectedSchool:checkbox:checked").length != $(".selectedSchool:checkbox").length) {
                    $(".chkAll").attr('checked', false);
                }
            });

How to change the Image of a button or control on MouseOver as in Windows7

<script type="text/javascript">

        function OnMouseOver( ) {           

            document.getElementById("imgbtnSubmit").src = "btnActive.png";

        }

        function OnMouseOut( ) {

            document.getElementById("imgbtnSubmit").src = "btnInActive.png";

        }

    </script>

Method 1 :-

    Call the above JavaScript function on client MouseOver and MouseOut;

Method 2 :-

    Using styles in the CSS file,

 You can change the image on hover and on out of focus you can show the default Image.

for e.g. :

              <asp:ImageButton   ID="imgBtnSubmit"  ImageUrl="~/Image/btnInActive.png" CssClass="btnSubmit" runat="server"></asp:ImageButton>

In the CSS File:

      .btnSubmit:hover {backgroundImage:url("~/images/btnActive.png"); }

 Method 3 :-

In the page's Load event, call the Add method of the control's Attributes collection.

imgbtnSubmit.Attributes.Add("onmouseover","OnMouseOver( )");

imgbtnSubmit.Attributes.Add("onmouseout", "OnMouseOut( )");

Just enjoy..........that's all.

ReSetting Form Fields using javascript/Jquery

function ClearAll(){
for (i=0;forms[0].length; i++)
{
doc = document.forms[0].elements[i];
switch (doc.type)
{
case "text" :
doc.value = "";
break;
case "checkbox" :
doc.checked = false;
break;
case "radio" :
doc.checked = false;
break;
case "select-one" :
doc.options[doc.selectedIndex].selected = false;
break;
case "select-multiple" :
while (doc.selectedIndex != -1)
{
indx = doc.selectedIndex;
doc.options[indx].selected = false;
}
doc.selected = false;
break;
default :
break;
}
}
}
}

The JavaScript function center_body() is used to center the main elements within the body.

<html>
<head>
<style>
body {
   margin: 0px;
   overflow: hidden;
   background: #000;
}
#background {
   position: absolute;
   margin-top: 50px;
   width: 1024px;
   height: 600px;
}
#container {
   height: 600px;
   width: 1024px;
   position: absolute;
   top: 100px;
}
span {
   color: #bcd2ee;
   font-size: 28px;
}
</style>
<script>
function center_object(v)
{
 var obj = document.getElementById(v);
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape") {
   var ww = window.innerWidth;
   var gw = obj.clientWidth;
   var l = ((ww-gw)/2)-4;
   obj.style.left = l+"px";
  }
  if (navigator.appName.indexOf("Microsoft")!=-1) {
   var ww = document.body.offsetWidth;
   var gw = obj.offsetWidth;
   var l = ((ww-gw)/2)+16;
   obj.style.left = l+"px";
  }
 }
}
</script>
</head>
<body onload="center_object('background');center_object('container');" onresize="center_object('background');center_object('container');">
<img id="background" src="myImage.jpg" width="512" height="100%" border="6" />
<div id="container">
<span>
 <p>The div with the ID "container" is used as the new body of your web page.</p>
 <p>Any thing you want displayed above the background image, must be contained in this div.</p>
 <p>The "container" div is totally independant of the background image.</p>
 <p>The background image's dimensions can be set to any dimensions you choose.</p>
 <p>The background image and the "container" div can be positioned anywhere on the screen you choose.</p>
 <p>The JavaScript function center_body() is used to center the main elements within the body.</p>
</span>
</div>
</body>
</html>

rotation in IE-7

<!-- This DIV is the target container for an image.  -->        
    <DIV ID="oDiv" STYLE="position:absolute; left:270px;" >
        An Image - >    
        <IMG SRC='/workshop/graphics/earglobe.gif' />
    </DIV>
<BUTTON onclick="oDiv.style.filter=
        'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'">
    Rotate 270 degrees</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=''">Clear Filter</BUTTON><BR/>

Removing Dotted Border on Clicked Links Using CSS

css:---

/* hide the dotted lines around an element when it receives focus */


* { _noFocusLine: expression(this.hideFocus=true); } /* ie7 */
::-moz-focus-inner {border:0;}                         /* firefox */
:focus {outline:none;}                               /* ie8, chrome, etc */










Reference:


http://perishablepress.com/press/2008/12/16/unobtrusive-javascript-remove-link-focus-dotted-border-outlines/

Css Browser Hacks

/* for IE6 */
*html .someClass {color:red}
/* for IE7 */
*:first-child + html .someClass {color:red}
/* inline IE7 CSS */
.someElement {
   color:blue; /* all browsers */
   *color:red;
}
/* inline IE7 CSS */
.someElement {
   color:blue; /* all browsers */
   //color:red;/* IE7 browser */
}
/* inline IE8 CSS */
.someElement {
  color:crimson; /* all browsers */
  color:black\0/; /* IE 8 & 9 */
}
/* IE9 CSS */
:root .someElement { color:green\0/IE9; }  /* IE9 */

/* FireFox 3 and Up */
html>/**/body .someClass, x:-moz-any-link, x:default {left:1em !important}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
   .someElement 
    {
         margin:1em
    }
}

Validating file types of Doc / Docx / Pdf / Jpeg / Bmp / Gif / Png by regular expression

^.+\.(?:(?:[dD][oO][cC][xX]?)|(?:[pP][dD][fF]))$

Will accept .doc, .docx, .pdf files having a filename of at least one character:

^           = beginning of string
.+          = at least one character (any character)
\.          = dot ('.')
(?:pattern) = match the pattern without storing the match)
[dD]        = any character in the set ('d' or 'D')
[xX]?       = any character in the set or none 
              ('x' may be missing so 'doc' or 'docx' are both accepted)
|           = either the previous or the next pattern
$           = end of matched string

 Similarly you can validate any file type as the above,

For JPG / BMP / Gif :- 

(.*\.([Jj][Pp][Gg])|([Bb][Mm][Pp])|([Gg][Ii][Ff])|([Pp][Nn][Gg])$)

Validating For Email:-

^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|

  (([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$

Validating USA Phone No.

((\(\d{3}\) ?)|(\d{3}[-.]))?\d{3}[-.]\d{4}( ext\d{0,}) 

it will accept as: 123.456.7890 

or

123-456-7890 or 123.456-7890(1 hyphen and 1 dot)
You can test it here: http://www.regextester.com/ 

 You can embed case insensitity into the regular expression like so: 

 \.(?i:)(?:jpg|gif|doc|pdf)$