Post
Ask Question

Highlight Current Input Element in Windows Store App

Introduction

In this article we will reveal the highlighting effect of an input element of a Metro style page; this effect is implemented using jQuery. Here we will use three input boxes in our page; they are Name, Email and word values. The highlight event automatically fires when a user enters a value in any of the input boxes. The current box that is selected will be highlighted. 

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it.

  • Open Visual Studio 2012
  • File -> New -> Project
  • Choose Template -> JavaScript -> Metro Style Application
  • Rename the application

img11.gif

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

img2.gif

Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following are the contents of the project:

 

  • JavaScript Code

  • Style Sheet Code

Code :

 

<script src="/js/default.js"></script>

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

    <script type="text/javascript" src="jquery.datePicker.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("input").focus(function () {

                $(this)

                    .parent()

                    .addClass("curFocus input")

                    .children("div")

                    .toggle();

            });

            $("input").blur(function () {

                $(this)

                    .parent()

                    .removeClass("curFocus input")

                    .children("div")

                    .toggle();

            });

        });

</script>

Code :

<style type="text/css">

    div.curFocus

   {

     background: -webkit-gradient

     (linear, left top, left bottom, color-stop(0%,#b7deed),

     color-stop(50%,#71ceef),

     color-stop(51%,#21b4e2),

     color-stop(100%,#b7deed));

     background-color:yellow;

   }

   div.input

   {

       border:5px groove yellow;

   }

        #div1 {

            background: -webkit-gradient (linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)),

       color-stop(50%,rgba(140,51,16,1)),

       color-stop(51%,rgba(117,34,1,1)),

       color-stop(100%,rgba(191,110,78,1)));

        }

</style>

 

Step 4 : The complete code of this application is written below. It contains the HTML file code and the JavaScript file code.

 

Code :

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>App16</title>

 

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

 

    <!-- App16 references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

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

    <script type="text/javascript" src="jquery.datePicker.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("input").focus(function () {

                $(this)

                    .parent()

                    .addClass("curFocus input")

                    .children("div")

                    .toggle();

            });

            $("input").blur(function () {

                $(this)

                    .parent()

                    .removeClass("curFocus input")

                    .children("div")

                    .toggle();

            });

        });

</script>

 <style type="text/css">

    div.curFocus

   {

     background: -webkit-gradient

     (linear, left top, left bottom, color-stop(0%,#b7deed),

     color-stop(50%,#71ceef),

     color-stop(51%,#21b4e2),

     color-stop(100%,#b7deed));

     background-color:yellow;

   }

   div.input

   {

       border:5px groove yellow;

   }

        #div1 {

            background: -webkit-gradient (linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)),

       color-stop(50%,rgba(140,51,16,1)),

       color-stop(51%,rgba(117,34,1,1)),

       color-stop(100%,rgba(191,110,78,1)));

        }

   </style>

 

</head>

<body style="background-color:#0094ff">

    <div style="margin-left:50px;margin-top:50px; background-color:#f00; width:800px">

   <div id="div1" style="font-family: 'Comic Sans MS'; font-size: x-large; color: #FFFF00; background-color: #000000; margin-top:50px; font-weight:bolder" >

                Highlighing the current input element in Metro Style Apps

        </div>

        <div>

                <label for="Name"

                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Name:

                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

            <input name="Name" type="text"/>

        </div>

        <div>

                <label for="Email"

                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">Email:

                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <input name="Email" type="text"/>

        </div>

        <div>

                <label for="Pwd"

                    style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">word:

                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <input name="word" type="word"/>

        </div>

        </div>

</body>

</html>

 

Step 5 : After running this code the output looks like this:

img3.gif

img4.gif

img5.gif


Similar Articles