Arc's Review: March 2012

Friday 30 March 2012

How to print document in javascript? or How to show print dialog box in javascript?

Definition:

window.print() Method

Using window.print() to print a document

The JavaScript syntax used to simulate the print button currently only works in all modern browsers, so it can be a valid substitute inside a browser window where the toolbar is disabled.

Syntax used to print a document:

window.print()

Example:

Another way to accomplish the exact same task as above is to use a "JavaScript url". A JavaScript url is a special kind of url that executes a command, instead of loading the specified url.

<a href="javascript:window.print()"><img src="../images/print.gif"></a>

Output:

You can see print dialogue box.

How to create jump menu or dorpdown or select option in javascript?

Definition: Jump menu/dropdown menu/select menu

Sometimes we need to show various option to user. By using <select> tag we can achieve this.

in .Net by using DropDownList control. Here, I have use <select>.

Example:-

As user select any option a new window will open with following selected link.

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

<!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>Create Jump Menu and Open new window</title>
    <script language="javascript" type="text/javascript" >

    function jumpto(url)
    {
        if (document.form1.jumpmenu.value != "null")
        {
             open_new_window(url); //here we are passing the value of selected option
        }
    }
    function open_new_window(URL)
    {
       NewWindow = window.open(URL,"_blank","toolbar=no,menubar=0,status=0,copyhistory=0,scrollbars=yes,resizable=1,location=0,Width=1500,Height=760") ;
       NewWindow.location = URL;
    }

</script>
</head>
<body>
<form name="form1">
<div align="center">
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option>Jump to...</option>
<option value=http://arcreview.blogspot.in/>Arc's Review</option>
<option value=http://www.google.com>Google</option>
<option value=http://www.yahoo.com/javascript/>Yahoo</option>
<option value=http://www.facebook.com/html/>Facebook</option>
</select>
</div>
</form>
</body>
</html>

Wednesday 21 March 2012

For loop in Javascript

Definition: For Loop

Syntax:

for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
code to be executed
}

startvalue = from which value your loop will start. here it is starting from 0.

endvalue = upto how much time loop to execute.

The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs.

It is same as "For Loop" in our C language.

Example:

<!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>For Loop</title>
    <script type="text/javascript">
        var i=0;
        for (i=0;i<=5;i++)
        {
            document.write("Hello World " + i);
            document.write("<br />");
        }
</script>
</head>
<body>

</body>
</html>

Output:

Hello World 0
Hello World 1
Hello World 2
Hello World 3
Hello World 4
Hello World 5

Friday 16 March 2012

How to show large image on mousehover in javascript?

Definition:

OnMouseHover show large image.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

    <title>On mousehover show large image</title>
    <script type="text/javascript" language="ecmascript">
        function ShowBiggerImage(obj)
        {
            document.getElementById("LargeImageDiv").innerHTML = "<img src='" + obj.src + "'+'width=350 height=500' >";
        }

        function ShowDefaultImage(obj)
        {
            document.getElementById("LargeImageDiv").innerHTML = "";
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div id="LargeImageDiv" style="position: absolute; z-index:2">
        </div>
            <table align="center" frame="box" style="border: thin solid #660033; table-layout: fixed">
            <tr>
                <td>
                    <div align="center">
                        <asp:Image ID="Image1" runat="server" Width="80px" Height="100px"
                         ImageUrl="~/Images/cutebird.png"
                         onmouseover="ShowBiggerImage(this);"
                         onmouseout="ShowDefaultImage(this);"/>
                    </div>
                </td>
                <td></td>
                <td>
                    <div align="center">
                        <asp:Image ID="Image2" runat="server" Width="80px" Height="100px"
                         ImageUrl="~/Images/snowtwt.png"
                         onmouseover="ShowBiggerImage(this);"
                         onmouseout="ShowDefaultImage(this);" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="center">
                        <asp:Image ID="Image3" runat="server" Width="80px" Height="100px"
                         ImageUrl="~/Images/springtwt.png"
                         onmouseover="ShowBiggerImage(this);"
                         onmouseout="ShowDefaultImage(this);" />
                    </div>
                </td>
                <td></td>
                <td>
                    <div align="center">
                        <asp:Image ID="Image4" runat="server" Width="80px" Height="100px"
                         ImageUrl="~/Images/summertwt.png"
                         onmouseover="ShowBiggerImage(this);"
                         onmouseout="ShowDefaultImage(this);" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div align="center">
                        <asp:Image ID="Image5" runat="server" Width="80px" Height="100px"
                         ImageUrl="~/Images/twt.png"
                         onmouseover="ShowBiggerImage(this);"
                         onmouseout="ShowDefaultImage(this);"/>
                    </div>
                </td>
                <td></td>
                <td>
                    <div align="center" >
                        <asp:Image ID="Image6" runat="server" Width="80px" Height="100px"
                         ImageUrl="~/Images/flytwt.png"
                         onmouseover="ShowBiggerImage(this);"
                         onmouseout="ShowDefaultImage(this);" />
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Output:

It will look like this.

Wednesday 14 March 2012

Convert unix date to datetime.

Definition: Convert Unixdate to DateTime stamp.

protected void Button1_Click(object sender, EventArgs e)
    {
        // UNIX timestamp
        double timestamp = 1309177737;

        // Step1 : Make System.DateTime equivalent to the UNIX Epoch.

        System.DateTime dateTime = new System.DateTime(1970, 1, 1, 0, 0, 0, 0);

        // Step 2: Add the number of seconds in UNIX timestamp to be converted.

        dateTime = dateTime.AddSeconds(timestamp);

        // The dateTime now contains the right date/time so to format the string,

        // use the standard formatting methods of the DateTime object.

        string printDate = dateTime.ToShortDateString() + " " + dateTime.ToShortTimeString();

        // Print the date and time
        Response.Write(printDate);
    }

Output :

6/27/2011 12:28 PM

Wednesday 7 March 2012

How to add click event to Anchor or tag?

Definition:

In script part you can add click event to Achor or <a></a> tag. With the help of Jquery you can do this. First download the following jquery (jquery-1.4.3.min.js) if you don't have.Second add jquery.

To Add use following code:

<script src="Jquery/jquery-1.4.3.min.js" type="text/javascript"></script>

(please take care of path where you have save jquery)

Example:

<!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>Clcik event</title>
<script src="Jquery/jquery-1.4.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">
       $(document).ready(function(){
             $("a").click(function(event){
             alert("Thanks for visiting!");
          });
        });
    </script>
  </head>
  <body>
    <a href="http://arcreview.blogspot.in/">Arc's Review</a>
  </body>
</html>

Output:

You will see alert box and you press ok button , you will redirect to my blog.

Monday 5 March 2012

How to insert tab in JavaScript?

Definition: "\t" will insert tab in the text.

Example:

Script Part:

   function show()
        {

           var text = "how to insert tab \t 123456789";
            document.getElementById("txtsp").value = text;

        }

Control Part:

Output:
how to insert tab 123456789

How to insert Single Quote in Javascript?

Definition: To insert ('') single quote in JavaScript, use ( \ ) backslash.
The backslash ( \ ) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.

Example:
Script Part:

<script type="text/javascript" language="javascript">
        function show()
        {
                     var text ="how to use \'single quote\'";
                    document.getElementById("txtSpecial").value = text;
         }
</script>

HTML Control:

        <input value="" id="txtSpecial" name="txtSpecial" type="text"/><br />
        <input type="submit" name="show" id="show" value="Special Character" onclick="show();"/>

Output:

how to use 'single quote'

Friday 2 March 2012

setTimeout() Method Javascript

Definition:

setTimeout() - executes a code some time in the future

Syntax:

var tTime = setTimeout("javascript statement",milliseconds);

The first parameter of setTimeout() can be a string of executable code, or a call to a function.
The second parameter indicates how many milliseconds from now you want to execute the first parameter.

1000 milliseconds = one second

Example:

When the button is clicked in the example below, an alert box will be displayed after 2 seconds.

<html>
<head>
<script type="text/javascript">
function timeMessage()
{
var tTime = setTimeout("HelloWorld()",2000);
}
function HelloWorld()
{
alert("Hello World");
}
</script>
</head>

<body>
<form>
<input type="button" value="Display alert box in 2 seconds" onclick="timeMessage()" />
</form>
</body>
</html>

Arc's Review

Friday 30 March 2012

How to print document in javascript? or How to show print dialog box in javascript?

How to create jump menu or dorpdown or select option in javascript?

Wednesday 21 March 2012

For loop in Javascript

Friday 16 March 2012

How to show large image on mousehover in javascript?

Wednesday 14 March 2012

Convert unix date to datetime.

Wednesday 7 March 2012

How to add click event to Anchor or tag?

Monday 5 March 2012

How to insert tab in JavaScript?

How to insert Single Quote in Javascript?

Friday 2 March 2012

setTimeout() Method Javascript

Example:

About

Blogroll