Tuesday, 22 April 2014

Create a Pop Up Using JavaScript and CSS when click event

<div id="toPopup" style="background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #ccc; border-radius: 3px 3px 3px 3px; color: #333333; display: none; font-size: 14px; left: 50%; margin-left: -402px; position: fixed; top: 20%; width: 800px; z-index: 2;">
    <div class="close" style="background: url('../images/close.png'); cursor: pointer; height: 30px; position: absolute; right: -27px; top: -24px; width: 30px;"></div>
    <span class="ecs_tooltip" style="background: none repeat scroll 0 0 #000000; border-radius: 2px 2px 2px 2px; color: #FFFFFF; display: none; font-size: 11px; height: 16px; opacity: 0.7; padding: 4px 3px 2px 5px; position: absolute; right: -62px; text-align: center; top: -51px; width: 93px;">Press Esc to close
        <span class="arrow" style="border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #000000; display: block; height: 1px; left: 40px; position: relative; top: 3px; width: 1px;"></span></span>
    <div id="popup_content" style="margin: 4px 7px;">

"Pop up content"
 </div>

</div>
<div class="loader" style="background: url('../images/Spinningloading.gif'); height: 32px; width: 32px; display: none; z-index: 9999; top: 40%; left: 50%; position: absolute; margin-left: -10px;"></div>
<div id="backgroundPopup" style="z-index: 1; position: fixed; display: none; height: 100%; width: 100%; background: #000000; top: 0px; left: 0px;"></div>

<script type="text/javascript">
    $(document).ready(function () {
        function Click() {
            loading(); // loading
            setTimeout(function () { // then show popup, deley in .5 second
                loadPopup(); // function show popup
            }, 500); // .5 second
            return false;

        }
        $("div.close").hover(
              function () {
                  $('span.ecs_tooltip').show();
              },
                            function () {
                                $('span.ecs_tooltip').hide();
                            }
               );

        $("div.close").click(function () {
            disablePopup();  // function close pop up
        });

        $(this).keyup(function (event) {
            if (event.which == 27) { // 27 is 'Ecs' in the keyboard
                disablePopup();  // function close pop up
            }
        });

        $("div#backgroundPopup").click(function () {
            disablePopup();  // function close pop up
        });
       
        function loading() {
            $("div.loader").show();
        }
        function closeloading() {
            $("div.loader").fadeOut('normal');
        }

        var popupStatus = 0;

        function loadPopup() {
            if (popupStatus == 0) { // if value is 0, show popup
                closeloading(); // fadeout loading
                $("#toPopup").fadeIn(0500); // fadein popup div
                $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
                $("#backgroundPopup").fadeIn(0001);
                popupStatus = 1; // and set value to 1
            }
        }

        function disablePopup() {
            if (popupStatus == 1) { // if value is 1, close popup
                $("#toPopup").fadeOut("normal");
                $("#backgroundPopup").fadeOut("normal");
                popupStatus = 0;  // and set value to 0
            }
        }

    
    });
</script>

Friday, 11 April 2014

How to enter data in only 1 textbox if we have 2 textbox's in our page using jquery (generics)(2nd box will set to readdonly)

 <script type="text/javascript">      
        function OnChangeEventforpercentage() {
            compareValues(document.getElementById('x'), document.getElementById('y'));
        }

        function OnChangeEventfordiscount() {
            compareValues(document.getElementById('y'), document.getElementById('x'));
        }


        function compareValues(x, y) {          
            var value = x.value;         
           if (value == "") {
                $(y).prop('readonly', false);
            }
            else if (value != "" ) {
                $(y).prop('readonly', true);
            }
          
           
        }

    </script>

Wednesday, 2 April 2014

HTTP Error 500.21 - Internal Server Error Handler "ExtensionlessUrlHandler-Integrated-4.0" has a bad module "ManagedPipelineHandler" in its module list in IIS7.0 (MVC4.0)

To overcome this error go to command prompt right click on it and select run as administrator and type the following

%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i

                                  or

%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe -i

You can get the bellow cmd. PFA

Note: Don't change the directory of CMD.


How to check From date , To date using jquery in generic format


    function IsDateNull(dateValue) {
        if (dateValue == null || dateValue == "") {
            return false;
        }
        else {
            return true;
        }
    }

    function IsValidDate(validDate) {
        var validformat = /^\d{1,2}\/\d{1,2}\/\d{4}$/; //Basic check for format validity
        var a = validDate.match(validformat);
        if (a == null)
            return false;
        var item = [];
        item = a[0].split('/');
        if (item[0] < 1 || item[0] > 12)
            return false;
        else if (item[1] < 1 || item[1] > 31)
            return false;
        else if ((item[0] == 4 || item[0] == 6 || item[0] == 9 || item[0] == 11) && item[1] == 31)
            return false;
        else if (item[0] == 2) {
            var isleap = (item[2] % 4 == 0 && (item[2] % 100 != 0 || item[2] % 400 == 0));
            if (item[1] > 29 || (item[1] == 29 && !isleap))
                return false;
        }

    }

    function IsValidDateRange(validDateRange) {//Detailed check for valid date ranges
        var monthfield = validDateRange.split("/")[0]
        var dayfield = validDateRange.split("/")[1]
        var yearfield = validDateRange.split("/")[2]
        var dayobj = new Date(yearfield, monthfield - 1, dayfield)
        if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (yearfield < 1753 || yearfield > 9999)) {
            return false;
        }
        else {
            return true;
        }
    }

    function DateAlert(DateType) {
        return "Please Enter or Select a Valid " + DateType + " Date(Ex:MM/DD/YYYY).";
    }

    function ValidDateAlert(DateType) {
        return "Please Enter or Select a Valid " + DateType + " Date(Ex:MM/DD/YYYY). And year should be greater than equal to 1753 and less than equal to 9999.";
    }

    function InValidDateAlert(DateType) {
        return "Invalid " + DateType + " Date";
    }

    function CheckDates(FromID, ToID) {
        var IsfromDate = true;
        var FromDate = $(FromID).val();
        var IsToDate = true;
        var ToDate = $(ToID).val();
        var fromDateObj = new Date(FromDate);
        var toDateObj = new Date(ToDate);
        if (IsDateNull(FromDate) == false) {
            IsfromDate = false;
            alert(DateAlert("From"));
            $(FromID).focus();
            return false;
        }
        else {
            if (IsValidDate(FromDate) == false) {
                IsfromDate = false;
                alert(InValidDateAlert("From"));
                $(FromID).focus();
                return false;
            }
            else {
                if (IsValidDateRange(FromDate) == false) {
                    IsfromDate = false;
                    alert(ValidDateAlert("From"));
                    $(FromID).focus();
                    return false;
                }
            }
        }
        if (IsfromDate == true) {
            if (IsDateNull(ToDate) == false) {
                IsToDate = false;
                alert(DateAlert("To"));
                $(ToID).focus();
                return false;
            }
            else {
                if (IsValidDate(ToDate) == false) {
                    IsToDate = false;
                    alert(InValidDateAlert("To"));
                    $(ToID).focus();
                    return false;
                }
                else {
                    if (IsValidDateRange(ToDate) == false) {
                        IsToDate = false;
                        alert(ValidDateAlert("To"));
                        $(ToID).focus();
                        return false;
                    }
                }
            }
            if (IsfromDate == true && IsToDate == true) {
                if (fromDateObj > toDateObj) {
                    alert("Please ensure that the From Date is greater than or equal to the To Date.");
                    $(FromID).focus();
                    return false;
                }
                else {
                    return true;
                }
            }
        }
    }