You must Sign In to post a response.
  • Category: JQuery

    How to start the jquiry application and basic steps

    hi,

    how to start the jquiry application and basic steps and how to add the jquiry file to the application.

    Thanks
    penchala
  • #721024
    In this article I have explained about how to show simple Popup window using jQuery. Each steps I have clearly explained in this article .

    The jQuery java script file can be downloaded from jQuery Official website http://www.jquery.com/

    To load JQuery in your application Just copy and past below line titile tag



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



    Just copy and paste below code after import jquery

    <style type="text/css">
    /* PopupDiv Styles*/
    #PopupDiv
    {
    display:none; /* Hide the PopupDiv */
    position:fixed;
    _position:absolute;
    height:200px;
    width:500px;
    background:grey;
    left: 300px;
    top: 150px;
    z-index:100;
    margin-left: 15px;
    border:10px solid black;
    padding:15px;
    font-size:15px;
    -moz-box-shadow: 0 0 5px Yellow;
    -webkit-box-shadow: 0 0 5px white;
    box-shadow: 0 0 5px #ff0000;
    }

    #MainPage
    {
    background: #d2d2d2;
    width:100%; height:100%;
    }
    a{ cursor: pointer; text-decoration:none; }
    /* Close button */
    #btnClose
    {
    font-size:20px;
    line-height:15px;
    right:5px;
    top:5px;
    position:absolute;
    color:#6fa5e2;
    font-weight:500;
    }
    </style>




    Full Code



    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>
    <title>Simple Popup Window using JQuery</title>

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

    <style type="text/css">
    /* PopupDiv Styles*/
    #PopupDiv
    {
    display:none; /* Hide the PopupDiv */
    position:fixed;
    _position:absolute;
    height:200px;
    width:500px;
    background:grey;
    left: 300px;
    top: 150px;
    z-index:100;
    margin-left: 15px;
    border:10px solid black;
    padding:15px;
    font-size:15px;
    -moz-box-shadow: 0 0 5px Yellow;
    -webkit-box-shadow: 0 0 5px white;
    box-shadow: 0 0 5px #ff0000;
    }

    #MainPage
    {
    background: #d2d2d2;
    width:100%; height:100%;
    }
    a{ cursor: pointer; text-decoration:none; }
    /* Close button */
    #btnClose
    {
    font-size:20px;
    line-height:15px;
    right:5px;
    top:5px;
    position:absolute;
    color:#6fa5e2;
    font-weight:500;
    }
    </style>
    <script type="text/javascript">

    $(document).ready( function() {


    ShowPopupBox();


    $('#btnClose').click( function() {
    HidePopupBox();
    });

    $('#MainPage').click( function() {
    HidePopupBox();
    });

    function HidePopupBox() { // TO Hide PopupBox
    $('#PopupDiv').fadeOut("slow");
    $("#MainPage").css({ // this is just for style
    "opacity": "1"
    });
    }

    function ShowPopupBox() { // To Show PopupBox
    $('#PopupDiv').fadeIn("slow");
    $("#MainPage").css({ // this is just for style
    "opacity": "0.3"
    });
    }
    });
    </script>
    </head>
    <body >
    <form id="theform" runat="server">
    <div id="PopupDiv" style="left: 232px; top: 179px; width: 265px; height: 96px;"> <!-- OUR PopupBox DIV-->
    <table>
    <tr>
    <td style="width: 100px">
    User Name</td>
    <td style="width: 100px">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
    <td style="width: 100px">
    Password</td>
    <td style="width: 100px">
    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td>
    </tr>
    <tr>
    <td style="width: 100px">
    </td>
    <td style="width: 100px">
    <asp:Button ID="btnSave" runat="server" Text="Save" /></td>
    </tr>
    </table>
    <a id="btnClose">Close</a>
    </div>


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



    Thanks & Regards
    G.Renganathan
    Nothing is mine ,Everything is yours!!!

  • #721047
    You can add any Jquery file using the script tag as below.


    <script type="text/javascript" src="jquery-Validation.1.2.6.js"> </script>


    For sample application and syntax please refer the officaial site as


    http :// jquery.com /

    Thanks & Regards
    Anil Kumar Pandey
    Microsoft MVP, DNS MVM

  • #721049
    If you want to start any thing from scratch you need to just follows step by step..
    So I suggest you keep on book and go chapter by chapter.
    for jquery most of the things like javascript you need the study some syntax and different type of selector which is commonly used.
    see the the common selector here
    http://blog.akumars.esoftera.in/post/2012/12/20/jQuery-Selector.aspx

    and than you can start step by step with example
    see this link for sample
    http://www.w3schools.com/jquery/jquery_examples.asp

    Regards & thanks
    Arvind kumar
    Visit--blog.akumars.esoftera.in

  • #721060
    Hi.
    You can also learn jquery from the following site.
    http://learn.jquery.com/

    Thanks

    Reena

  • #721063
    hello Penchala,

    Please follow this below link would help how to start with jquery and asp.net application.

    http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    Regards
    Prabhu.
    www.dotnetgallery.com

  • #721067
    Hi,

    JQuery is a light weight Javascript Library.

    JQuery is the library created using JavaScript and you will be using the inbuilt functionalities from the library by adding reference to it.

    You can go through my article for simple example,
    http://weblogs.asp.net/varadam/archive/2011/03/22/toggling-expand-collaps-panel-using-jquery.aspx

    If you are interested to go through the step by step learning tutorials then please use below link: learn.jquery.com/about-jquery/how-jquery-works/


    Regards,
    Asheej T K

  • #721403
    JQuery is a Light weight tool added to animate some tools,

    It is included as:

    <script type="text/javascript" >
    $(document).ready(function(){
    $("p").click(function(){
    $(this).hide();
    });
    });
    </script>

    the above is for click function(), when any <p> control is clicked can be triggered


    This goes on with Large plug-in files

    When you want to include a large animated files, you wil do as:


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



    Now the current version exceeded Jquery 1.9.2


  • This thread is locked for new responses. Please post your comments and questions as a separate thread.
    If required, refer to the URL of this page in your new post.