Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

How To Create Simple Barchart using Javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>

<!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 runat="server">
   <title>Untitled Page</title>
   <script type="text/javascript">
function BarChart()
{

 document.getElementById("Bar1").style.width = document.getElementById("Qty1").value;
 document.getElementById("Bar2").style.width = document.getElementById("Qty2").value;
 document.getElementById("Bar3").style.width = document.getElementById("Qty3").value;
 document.getElementById("Bar4").style.width = document.getElementById("Qty4").value;
 document.getElementById("Bar5").style.width = document.getElementById("Qty5").value;
}
</script>

</head>
<body>
   <form id="form1" runat="server">
       <div>
           <table border="0" cellpadding="0" cellspacing="0">
               <tr>
                   <td style="padding-right: 5px">
                       <input id="Qty1" type="text" style="width: 50px" value="30" /></td>
                   <td style="border-left: solid 2 #000000">
                       <div id="Bar1" style="height: 20; background-color: red"></div>
                   </td>
               </tr>
               <tr>
                   <td style="padding-right: 5px">
                       <input id="Qty2" type="text" style="width: 50px" value="55" /></td>
                   <td style="border-left: solid 2 #000000">
                       <div id="Bar2" style="height: 20; background-color: blue"></div>
                   </td>
               </tr>
               <tr>
                   <td style="padding-right: 5px">
                       <input id="Qty3" type="text" style="width: 50px" value="110" /></td>
                   <td style="border-left: solid 2 #000000">
                       <div id="Bar3" style="height: 20; background-color: green"></div>
                   </td>
               </tr>
               <tr>
                   <td style="padding-right: 5px">
                       <input id="Qty4" type="text" style="width: 50px" value="75" /></td>
                   <td style="border-left: solid 2 #000000">
                       <div id="Bar4" style="height: 20; background-color: yellow"></div>
                   </td>
               </tr>
               <tr>
                   <td style="padding-right: 5px">
                       <input id="Qty5" type="text" style="width: 50px" value="35" /></td>
                   <td style="border-left: solid 2 #000000; border-bottom: solid 2 #000000">
                       <div id="Bar5" style="height: 20; background-color:brown"></div>
                   </td>
               </tr>
           </table>
           <input type="button" value="Chart" onclick="BarChart()" />
       </div>
   </form>
</body>
</html>

How To Create Dynamic Div Using Javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicDiv.aspx.cs" Inherits="DynamicDiv" %>

<!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 runat="server">
    <title>Javascript create new div</title>
    <style type="text/css">
   .dynamicDiv {
   width : 200px;
   height : 100px;
   border : solid 1px #c0c0c0;
   background - color : #e1e1e1;
   font - size : 11px;
   font - family : verdana;
   color : #000;
   padding : 5px;
   }
   </style>

    <script type="text/javascript" language="javascript"> function createDiv() {
   var divTag = document.createElement("div");
   divTag.id = "div1";
   divTag.setAttribute("align", "center");
   divTag.style.margin = "0px auto";
   divTag.className = "dynamicDiv";
   divTag.innerHTML = "This HTML Div tag is created using Javascript DOM dynamically.";
   document.body.appendChild(divTag);
   }
    </script>

</head>
<body>
    <input id="btn1" type="button" value="create div" onclick="createDiv();" />
</body>
</html>
In the above example Javascript code to create new div HTML tag we have used the appendChild method for document body element. appendChild method takes one parameter as the name of the object of newChild that you want insert into the specified HTML tag like body tag in the above example. You can use the document.getElementById method of javascript passing the id value of any HTML tag along with appendChild method to insert the dynamic new HTML element into the specified id of the HTML tag. In the next

Working with the DOM




<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM Tree 2</title>
</head>
<body>
<h1 id="hdr1">
This is the Header</h1>
<p id="p1">
This is a paragraph of text.</p>
<ul id="ul1">
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

<script type="text/javascript">
// Get a node reference to the header element
var hdr = document.getElementById("hdr1");
// Use that reference to change the text/data.
hdr.firstChild.data = "My Dynamically written Header Text";
// Get a node reference to the paragraph element
var paragraph = document.getElementById("p1");
// Use that reference to change the text/data.
paragraph.firstChild.data = "This represents the new text of the first paragraph.";
// Get a node reference to the ul element
var ul = document.getElementById("ul1");
// Using the parentNode (in this case the ‘body’ element), remove that child element
paragraph.parentNode.removeChild(ul);
// create a new Text node for the second paragraph
var newTextNode = document.createTextNode("This text is the second set of paragraph text");
// create a new Element to be the second paragraph
var newElementNode = document.createElement("p");
// put the text in the paragraph
newElementNode.appendChild(newTextNode);
// and put the paragraph on the end of the document by appending it to
// the BODY (which is the parent of para)
paragraph.parentNode.appendChild(newElementNode);
</script>

</body>
</html>

How To Open div popup with a LightBox effect




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DivBox.aspx.cs"
Inherits="DivBox" %>


<!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">

function showBox()
{
var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

var layer = document.createElement('div');
layer.style.zIndex = 2;
layer.id = 'layer';
layer.style.position = 'absolute';
layer.style.top = '0px';
layer.style.left = '0px';
layer.style.height = document.documentElement.scrollHeight + 'px';
layer.style.width = width + 'px';
layer.style.backgroundColor = 'black';
layer.style.opacity = '.6';
layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
document.body.appendChild(layer);

var div = document.createElement('div');
div.style.zIndex = 3;
div.id = 'box';
div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';
div.style.top = '200px';
div.style.left = (width / 2) - (400 / 2) + 'px';
div.style.height = '50px';
div.style.width = '400px';
div.style.backgroundColor = 'white';
div.style.border = '2px solid silver';
div.style.padding = '20px';
document.body.appendChild(div);

var p = document.createElement('p');
p.innerHTML = 'Some text';
div.appendChild(p);

var a = document.createElement('a');
a.innerHTML = 'Close window';
a.href = 'javascript:void(0)';
a.onclick = function()
{
document.body.removeChild(document.getElementById('layer'));
document.body.removeChild(document.getElementById('box'));
};

div.appendChild(a);
}
</script>
</head>
<body style="height:2000px">
<form id="form1" runat="server">
<div>


<a href="javascript:void(showBox())">Toggle box</a>


</div>
</form>
</body>
</html>

JavaScript Get Key Values Or Code On KeyDown

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Find KeyCode</title>

    <script language="JavaScript">
        function TriggeredKey(e) {
            var keycode;
            if (window.event) keycode = window.event.keyCode;
            alert("keycode: " + keycode);
        }
    </script>

</head>
<body onkeydown="TriggeredKey(this)">
</body>
</html>
Special Keyboard Key(s) Code

KeyCode
Backspace      8
Tab            9
Enter         13 
Shift         16 
Ctrl          17 
Alt           18 
Pause/Break   19 
Caps Lock     20 
Esc           27 
Page Up       33 
Page Down     34 
End           35 
Home          36 
Left Arrow    37 
Print Screen  44
Delete        46
F1            112
F2            113
F3            114
F4            115
F5            116
F6            117
F7            118
F8            119
F9            120
F10           121
F11           122
F12           123

Restrict User From Ctrl Key Press

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Restrict Ctrl Key Press</title>

    <script>
        function Restrict() {
            if ((window.event.keyCode == 17)) {
                alert("Ctrl Key Press In !" + '\r\n' + "Add Your Own Code Here"); // Add Your Code Here
            }
        }
    </script>

</head>
<body onload="JavaScript:document.body.focus();" onkeydown="Restrict()">
</body>
</html>

Get Mouse Position Using JavaScript

<html>
<body>

    <script language="JavaScript">

        document.onmousemove = getCoordinate;
        var mosX = 0;
        var mosY = 0;
        function getCoordinate(e) {
            mosX = event.clientX + document.body.scrollLeft;

            //clientX Property Sets or retrieves the x-coordinate of the mouse
            //pointer's position relative to the client area of the window,
            //excluding window decorations and scroll bars
            //scrollLeft Property Sets or retrieves the distance between the
            //left edge of the object and the leftmost portion of the content
            //currently visible in the window.

            mosY = event.clientY + document.body.scrollTop;

            //clientY Property Sets or retrieves the y-coordinate of the mouse
            //pointer's position relative to the client area of the window,
            //excluding window decorations and scroll bars.
            //scrollTop Property Sets or retrieves the distance between the top
            //of the object and the topmost portion of the content currently
            //visible in the window.

            document.title = "(X Co-Ordinate » " + mosX + ") ( " + "Y Co-ordinate » " + mosY + ")";
            document.getElementById('dx').innerHTML =
"Mouse X ==» " + mosX + "<br>" + "Mouse Y ==» " + mosY;

            return true
        }

    </script>

    <div id="dX">
    </div>
</body>
</html>

Dynamically Increase The Size Of The TextBox Using JavaScript

<html>
<head>

    <script>
        function incr() {
            var len = document.getElementById('txt').value;
            document.getElementById('txt').style.width = 75 + len.length * 4 + 'px';
        }
    </script>

    <body>
        <input type='text' id='txt' onkeydown='incr()' style='width: 75px' />
    </body>
</html>

Trap F1 key in IE, ByPass Showing Help Window

<html>
<head>
<script>
function ByPass()
{
var kCode = window.event.keyCode;
       if(kCode == 112)
      {
             alert('F1 Clicked'); // Alter Code As Your Wish
       }
}
</script>
</head>
<body onhelp="return false;" onkeydown="ByPass()">
</body>
</html>

javascript function for invoking button click event

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>javascript function for invoking btnclick event</title>

    <script language="javascript" type="text/javascript">
        function TrigButton() {
            if (window.event.keyCode == 13) {
                if (document.getElementById('txt').value.length > 0) {
                    document.getElementById('bt').focus();
                    document.getElementById('bt').click();
                }
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:textbox id="txt" runat="server" onkeydown="TrigButton()"></asp:textbox>
        <asp:button id="bt" runat="server" text="Button" onclientclick="javascript:alert('Button Triggered');"
            onclick="bt_Click" />
    </div>
    </form>
</body>
</html>

How To Use Sleep Function Using JavaScript

<html>
<head>

    <script language='javascript'>
        function sleep() {

            var Sleep = setTimeout("alert('Hi Have A Nice Time And Day ')", 2000);
            // 2000 Millisecond(2 sec)

        }
    </script>

    <body onload='sleep()'>
        Alert Box Will Be Displayed After 2 Seconds the Body is Loaded
    </body>
</html>

Restrict Numberic Input In TextBox

<html>
<head>

    <script language="javascript">
        function blockNum(e) {
            var keyVal = (window.event) ? event.keyCode : e.keyCode;
            if (window.event) keyVal = window.event.keyCode;
            if ((keyVal > 47 && keyVal < 58) || (keyVal > 95 && keyVal < 107)) {
                return false;
            }
        }
    </script>

</head>
<body onload="javascript:document.getElementById('txt').focus();">
    <input type="text" id='txt' onkeydown="return blockNum(this);" />
</body>
</html>

Restrict Alphabet Input In TextBox

<html>
<head>

    <script language="javascript">
        function blockChar(e) {
            var keyVal = (window.event) ? event.keyCode : e.keyCode;
            if (window.event) keyVal = window.event.keyCode;
            if ((keyVal > 64 && keyVal < 93)) {
                return false;
            }
        }
    </script>

</head>
<body onload="javascript:document.getElementById('txt').focus();">
    <input type="text" id='txt' onkeydown="return blockChar(this);" />
</body>
</html>

Restrict Alphabet Input In TextBox Using Regular Expression

<html>
<head>

    <script language="javascript">
        function blockChar() {
            var str = document.getElementById('txt').value;
            str = str.replace(/[^\d]*/g, '');
            document.getElementById('txt').value = str;
        }
    </script>

</head>
<body onload="javascript:document.getElementById('txt').focus();">
    <input type="text" id='txt' onkeyup="blockChar();" />
</body>
</html>

How TO Add copy to clipboard Button On Page

<html>
<head>
</head>
<body>
    <textarea id='clipText'>
Enter Text And Click Button To Copy Text To ClipBoard</textarea><br />
    <input type="button" id='bt' onclick="clipboardData.setData('Text',document.getElementById('clipText').value);"
        value="Copy" />
    <input type="button" onclick="clipboardData.clearData('Text');" value="Clear" />
    <input type="button" onclick="alert(clipboardData.getData('Text'));" value="Paste" />
</body>

How To Block F5(Refresh) Key In IE and Firefox

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Block F5 Key In IE & Mozilla</title>

    <script language="JavaScript">

        var version = navigator.appVersion;

        function showKeyCode(e) {
            var keycode = (window.event) ? event.keyCode : e.keyCode;

            if ((version.indexOf('MSIE') != -1)) {
                if (keycode == 116) {
                    event.keyCode = 0;
                    event.returnValue = false;
                    return false;
                }
            }
            else {
                if (keycode == 116) {
                    return false;
                }
            }
        }

    </script>

</head>
<body onload="JavaScript:document.body.focus();" onkeydown="return showKeyCode(event)">
</body>
</html>

Sample source code for JavaScript Page Processing

We have provided below sample source code for JavaScript Page Processing in Asp.Net. You can copy and paste it in your pages to create the sample application. Code for Processing Page (PageProcessor.aspx)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Please wait...We Are Processing Your Request..</title>

    <script>
        function PageOnLoad() {
            location.href = "<%=PageToLoad%>";
            document.images['imgsrc'].src = "Images/Loading.gif";
        }
    </script>

</head>
<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" onload="PageOnLoad();">
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            <tr>
                <td height="50" class="NormalText" align="center" valign="bottom">
                    <h3>
                        We are processing your request. Please wait..
                    </h3>
                </td>
            </tr>
            <tr>
                <td align="center" height="250" valign="top">
                    <img src="" name="imgsrc" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Source Code of code-behind file (PageProcessor.aspx.cs)
  protected string PageToLoad;

    protected void Page_Load(object sender, EventArgs e)
    {
        PageToLoad = Request.QueryString["PageId"];
    }

Trapping close of IE window in ASP.NET

Trap window close event for IE browser
Let's say you want to trap the window close event for the web browser
so that you can give a confirmation dialog asking if the user is sure
to leave the page.The problem is that there is no onclose event for the
window object.The closest event might be onunload since it fires immediately
before the window object is unloaded. However, when the onunload event fires
it is too late to display a JavaScript alert. Therefore, we need an event that
fires prior to a page being  unloaded, which is onbeforeunload.
Define onbeforeunload event in your page <BODY> element as follows:

<BODY onbeforeunload="HandleOnClose()">

Then, add the following JavaScript code into the <HEAD> section of your
ASPX page:


<script type="text/javascript">
       function HandleOnClose() {
           if (event.clientY < 0) {
               event.returnValue = 'Are you sure you want to leave the page?';
           }
       } 
       
   </script>
The trick here is to check clientY property of the event object, which is used to set or retrieve the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars. This way, you can detect if the user clicked on X button to close the page, or clicked on Refresh button to refresh the page, etc. This approach does not handle key events such as Alt-F4 that lets the user close the window by using the keyboard. You have to handle keyboard events separately
<!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>

  <script type="text/javascript">
      function HandleOnClose() {
          if (event.clientY < 0) {
              event.returnValue = 'Are you sure you want to leave the page?';
          }
      }
     
  </script>

</head>
<body  onbeforeunload="return HandleOnClose()">
</body>
</html>