Pages

Friday, September 6, 2013

Show loading image for 5 secs after button click

function showLoading() {
 document.getElementById('myHiddenDiv').style.display = "";
 setTimeout('document.images["myAnimatedImage"].src="work.gif"', 500000000);  
}


<span id='myHiddenDiv' style='display: none;' align="Center">
 <img id="myAnimatedImage" src="Images/ajax-loader.gif" align="middle" alt="" />
</span>


<asp:Button ID="btnUpload" runat="server" Text="Submit" CssClass="button" OnClientClick="return showDiv();" />

Jquery datepicker with month and year only


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
 Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
        $(document).ready(
    function () {
        $('#txtPeriod').datepicker(
        {
            changeMonth: true,
            changeYear: true,
            dateFormat: 'MM yy',
            onClose: function () {
                var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            },
            beforeShow: function () {
                if ((selDate = $(this).val()).length > 0) {
                    iYear = selDate.substring(selDate.length - 4, selDate.length);
                    iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
                    $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
                }
            }
        });
    });
</script>
<style>
        .ui-datepicker-calendar
        {
            display: none;
        }
        .red
        {
            color: Red;
            font-size: 10px;
        }
       
        td
        {
            text-align: left;
        }
        #divValidate
        {
            text-align: center;
        }
    </style>
<div id="divPeriod" style="display: none;">
 Period :
 <asp:TextBox ID="txtPeriod" runat="server" Width="100px" onkeydown="return false;"></asp:TextBox>
</div>
</body>
</html>

Tuesday, May 21, 2013

405 method not allowed web api (PUT & DELETE)

Just add these lines to the web.config:

<system.webServer>
  <modules>
    <remove name="WebDAVModule" />
  </modules>
  <handlers>
    <remove name="WebDAV" />
  </handlers>
</system.webServer>

Wednesday, May 8, 2013

Passing sorting parameter to stored procedure


In Data-driven application or website, dynamic sorting is common need. Ideally we should write stored procedure for dynamic sorting.
We found nice solution for above problem. Bellow stored procedure fetch ordered data with passed parameter. There two parameters for dynamic sorting stored procedure. Parameter @sortDirection pass for order direction (asc or desc). Second parameter @sortCol for pass sorting field name.


Code
=====================================================-
  -- Description:   Example of Fetch Data With Sorting Parameter
 =====================================================
 Create PROCEDURE Product_Sorting_Parameter
     -- Add the parameters for the stored procedure here
     @sortDirection as varchar(5),
     @sortCol as varchar(50)
 AS
 BEGIN
     -- SET NOCOUNT ON added to prevent extra result sets from

    SET NOCOUNT ON;
     -- Select Query
    SELECT
         [ProductID] ,[Name],[ProductNumber],[Color],[ListPrice],[Size]     
     FROM         [AdventureWorks2008R2].[Production].[Product]
     ORDER BY
      -- Name
      Case WHEN @sortCol = 'Name' and @sortDirection = 'asc' THEN Name end,
      Case WHEN @sortCol = 'Name' and @sortDirection = 'desc' THEN Name end desc,
      -- Size
      Case WHEN @sortCol = 'Size' and @sortDirection = 'asc' THEN Size end,
      Case WHEN @sortCol = 'Size' and @sortDirection = 'desc' THEN Size end desc,
      -- Color
      Case WHEN @sortCol = 'Color' and @sortDirection = 'asc' THEN Color end,
      Case WHEN @sortCol = 'Color' and @sortDirection = 'desc' THEN Color end desc,
      -- Price
      Case WHEN @sortCol = 'Price' and @sortDirection = 'asc' THEN ListPrice end,
      Case WHEN @sortCol = 'Price' and @sortDirection = 'desc' THEN ListPrice end desc
 END
 GO


Execution
exec Product_Sorting_Parameter 'asc', 'Name'

Thursday, April 4, 2013

Without opening popup window Print Part Of A Web Page With jQuery


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="WebApplication1.Test1" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.print.js" type="text/javascript"></script>
    <script type="text/javascript">

        // When the document is ready, initialize the link so
        // that when it is clicked, the printable area of the
        // page will print.
        $(function () {
            // Hook up the print link.
            $("a")
.attr("href", "javascript:void( 0 )")
.click(
function () {
    // Print the DIV.
    $(".printable").print();
    // Cancel click event.
    return (false);
}
);
        }
);
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        Print Part of a Page With jQuery
    </h1>
    <p>
        <a>Print Bio</a>
    </p>
    <div class="printable">
        <h2>
            Jen Rish
        </h2>
        <p>
            Jen Rish, upcoming fitness and figure model has some crazy developed legs!
        </p>
        <p>
            <img src="Form2.png" width="380" height="570" alt="Jen Rish Has Amazing Legs!" />
        </p>
        <p>
            I bet she does some <strong>serious squatting</strong>!
        </p>
    </div>
    </form>
</body>
</html>

=====================jQuery.print.js===========


// Create a jquery plugin that prints the given element.
jQuery.fn.print = function(){
// NOTE: We are trimming the jQuery collection down to the
// first element in the collection.
if (this.size() > 1){
this.eq( 0 ).print();
return;
} else if (!this.size()){
return;
}

// ASSERT: At this point, we know that the current jQuery
// collection (as defined by THIS), contains only one
// printable element.

// Create a random name for the print frame.
var strFrameName = ("printer-" + (new Date()).getTime());

// Create an iFrame with the new name.
var jFrame = $( "<iframe name='" + strFrameName + "'>" );

// Hide the frame (sort of) and attach to the body.
jFrame
.css( "width", "1px" )
.css( "height", "1px" )
.css( "position", "absolute" )
.css( "left", "-9999px" )
.appendTo( $( "body:first" ) )
;

// Get a FRAMES reference to the new frame.
var objFrame = window.frames[ strFrameName ];

// Get a reference to the DOM in the new frame.
var objDoc = objFrame.document;

// Grab all the style tags and copy to the new
// document so that we capture look and feel of
// the current document.

// Create a temp document DIV to hold the style tags.
// This is the only way I could find to get the style
// tags into IE.
var jStyleDiv = $( "<div>" ).append(
$( "style" ).clone()
);

// Write the HTML for the document. In this, we will
// write out the HTML of the current element.
objDoc.open();
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
objDoc.write( "<html>" );
objDoc.write( "<body>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write( document.title );
objDoc.write( "</title>" );
objDoc.write( jStyleDiv.html() );
objDoc.write("<style type=\"text/css\"> @import url(\"./CSS.css\") </style>");
//console.log(this.html());
objDoc.write( "</head>" );
objDoc.write( this.html() );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
objDoc.close();

// Print the document.
objFrame.focus();
objFrame.print();

// Have the frame remove itself in about a minute so that
// we don't build up too many of these frames.
setTimeout(
function(){
jFrame.remove();
},
(60 * 1000)
);
}

======================

Wednesday, April 3, 2013

Zoom In Zoom Out Contents of Page using JQuery


// Include JQuery File 
<script type="text/javascript">
        $(document).ready(function () {
            var currZoom = $("#divpnlChart").css("zoom");
            if (currZoom == 'normal') currZoom = 1; // For IE


            $(".zoomIn").click(function () {
                currZoom *= 1.2;
                $("#divpnlChart").css("zoom", currZoom);
                $("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
                $("#divpnlChart").css("-moz-transform-origin", "0 0");


            });
            $(".zoomOff").click(function () {
            $("#divpnlChart").css("zoom", 1);
$("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
            $("#divpnlChart").css("-moz-transform-origin", "0 0");


            });
            $(".zoomOut").click(function () {
                currZoom *= .8;
              $("#divpnlChart").css("zoom", currZoom);
              $("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
              $("#divpnlChart").css("-moz-transform-origin", "0 0");


            });
        });
</script>


//  HTML Code


<span class="zoomIn" style="font-size:120%">A</span>
<span class="zoomOff">A</span>
<span class="zoomOut" style="font-size:80%">A</span>


<div id="divpnlChart" runat="server" style="float: left; width: 85%;">
    //  your content
</div>

Move div up / down / left / right zoom in zoom out using button - jQuery


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="WebApplication1.Demo" %>

<!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>
    <title></title>
    <style type="text/css">
        .block
        {
            background-image:url('Form.png');
            width: 263px;
            height: 103px;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .innerblock
        {
            background-color: yellow;
            position: relative;
            left: 5px;
            top: 5px;
        }
    </style>
   <%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>--%>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
      

</head>
<body>
    <button id="top">
        Shift Down</button>
    <input type="text" id="txtTopBottom" value="5" />
    <button id="bottom">
        Shift Up</button>
    <button id="left">
        Shift Left</button>
    <input type="text" id="txtLeftRight" value="5" />
    <button id="right">
        Shift Right</button>

<div align="left"><br>
<input type="radio" id="BothTextAndImage" name="group1" value="BothTextAndImage" checked="checked"/> Both Text and Image<br/>
<input type="radio" id="ChangeColor" name="group1" value="ChangeColor" /> Change Color<br/>
<input type="radio" id="OnlyText" name="group1" value="OnlyText" /> Only Text<br/>
<hr />
</div>

<div align="left"><br>
<input type="radio" id="z100" name="group2" value="100" checked="checked"/> 100%<br/>
<input type="radio" id="z80" name="group2" value="80" /> 80%<br/>
<input type="radio" id="z60" name="group2" value="60" /> 60%<br/>

</div>



    <div class="block">
        <div class="innerblock">
            <div class="html">
                <div style="float:left"><input type="text" id="Text2" value="N" style="width:50px" /></div>
                <div style="float:left"><input type="text" id="Text1" value="A" style="width:50px" /></div>
                <div style="float:left"><input type="text" id="Text3" value="C" style="width:50px" /></div>
                <div style="float:left"><input type="text" id="Text4" value="L" style="width:50px" /></div>                
            </div>
        </div>
    </div>
    <br />
    
   <script type="text/javascript">


             $("#right").click(function () {
                 var currentVal = parseInt($("#txtLeftRight").val());
                 if (currentVal != NaN) {
                     $("#txtLeftRight").val(currentVal + 1);
                     $(".block").animate({ "left": "+=5px" }, "slow");
                 }
             });
             $("#left").click(function () {
                 var currentVal = parseInt($("#txtLeftRight").val());
                 if (currentVal != NaN) {
                     $("#txtLeftRight").val(currentVal - 1);
                     $(".block").animate({ "left": "-=5px" }, "slow");
                 }
             });
             $("#top").click(function () {
                 var currentVal = parseInt($("#txtTopBottom").val());
                 if (currentVal != NaN) {
                     $("#txtTopBottom").val(currentVal + 1);
                     $(".block").animate({ "top": "+=5px" }, "slow");
                 }
             });
             $("#bottom").click(function () {
                 var currentVal = parseInt($("#txtTopBottom").val());
                 if (currentVal != NaN) {
                     $("#txtTopBottom").val(currentVal - 1);
                     $(".block").animate({ "top": "-=5px" }, "slow");
                 }
             });

             $("#BothTextAndImage").click(function () {
                 $(".block").css({ 'background-image': 'url("Form.png")' });
                 }
             );
             $("#ChangeColor").click(function () {
                 $(".block").css({ 'background-image': 'url("Form2.png")' });
             }
             );
             $("#OnlyText").click(function () {
                 $(".block").css({ 'background-image': 'none' });
                 }
             );
             ////////////////

             $("#z100").click(function () {
                 $(".block").animate({ zoom: 1.5 });
             }
             );
             $("#z80").click(function () {
                 $(".block").animate({ zoom: 1 });
             }
             );
             $("#z60").click(function () {
                 $(".block").animate({ zoom: 0.6 });
             }
             );



     ///////////
    </script>
</body>
</html>