Dotnet Galaxy: jQuery

Showing posts with label jQuery. Show all posts

Monday, February 22, 2016

How to use Toastr.js in ASP.NET

First let me ask you a question, what is Toastr.js and what is the use of it?

Toastr is a simple JavaScript library which can be used along with jQuery to show a simple and appealing notification in your web application. Good thing about Toasr is, since it is a JavaScript library it won’t create any performance issue and the coding looks very simple.

Lets start with a very simple .net application with one label, textbox and a button. Then on click of the button we will show the Toastr alert.

First we need to add the Toastr library like below in your .aspx page.

Here you might have noticed that I am referring the path directly from the online URL. In your case you may download the toast.js and toastr.css and also the jQuery and refer it internally.

Now we will write the code to show the alert.

protected void Button1_Click(object sender, EventArgs e)
       {
           Page.ClientScript.RegisterStartupScript(this.GetType(),"toastr_message", "toastr.error('Please Enter Name', 'Error')", true);
       }

On click of the button Toastr message will be shown like below. You can have a condition based on your requirement to show the alert.

Here I didn’t show that because everyone got their on requirement.

You have many option to show different color, different title and different icon depends on the message.

Another sample below is for success,

Similarly you have toastr.info and toastr.warning to show the alert.

Another useful option you may require is the position where you want to show the alert.

Below are some of the options available in toastr,

toastr.options = {
  "closeButton": false,
  "debug": true,
  "newestOnTop": true,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

I hope you enjoyed reading this article. Please try this in your project and let me know your client feedback. I am sure they will definitely like this.

Monday, March 25, 2013

How to do animation in .NET using jQuery

In general everybody likes animation. Earlier animation in a page was a difficult tasks. Now after jQuery library animation can be done using two lines of code.

In this article I am going to explain you how to do animation in a webpage using jQuery.

First you have to download the jQuery library. Use the jQuery download page to download the library. If you don’t wanted to download you can add the reference directly as well. Here in this article I am directly referring the jQuery library.

Now we will see the complete code used for animation. I have tried to explain most of the details in the code itself and rest of the codes are self explanatory.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Animations.aspx.cs" Inherits="Sample_2012_Web_App.CustomerDetails" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Animation Sample</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
<body>
    <button id="GoLeft">&laquo;Move Left</button>
    <button id="GoRight">&raquo;Move Right</button>
    <div class="block" style="position:absolute;background-color:#f00;left:100px;width:200px;height:100px;margin:20px;">This box is going to Animate</div>
    <script>
        $("#GoRight").click(function () {
            $(".block")
            .animate({ "left": "+=100px" }, "slow")//This code will move the box Right.
            .animate({ "height": "250px" }, 500)//This code will increase the height.
            .animate({ "width": "250px" }, 500)//This code will increase the width.
            .animate({ "opacity": "0.15" }, "slow")//This code will reduce the Opacity.
            .animate({ "opacity": "1" }, "slow")//This code will increase the Opacity.
            .animate({ "height": "100px" }, 500)//This code will reduce the increased height.
            .animate({ "width": "100px" }, 500);//This cide will reduce the increased width.
        });
        $("#GoLeft").click(function () {
            $(".block")
            .animate({ "left": "-=100px" }, "slow")
            .animate({ "height": "250px" }, 500)//This code will increase the height.
            .animate({ "width": "250px" }, 500)//This code will increase the width.
            .animate({ "opacity": "0.15" }, "slow")//This code will reduce the Opacity.
            .animate({ "opacity": "1" }, "slow")//This code will increase the Opacity.
            .animate({ "height": "100px" }, 500)//This code will reduce the increased height.
            .animate({ "width": "100px" }, 500);//This cide will reduce the increased width.
        });
</script>
</body>
</html>

When you look at the code you can see that I have written many animate code on click of the button. Actually that is the beauty of jQuery. Add as many animation code and make it interesting.

There are many more animation options available but I have limited here with 6 or 7 options.

Below is the interface I have created for animation.

Let me know your feed back after trying this feature in jQuery

Sunday, January 22, 2012

Sliding Image using JQuery

Here I am going to explain you how you can make a sliding image in your web application using jQuery. There are many ways to implement this feature in your web application but Using jQuery it will be very easy and you don't need to use any timer control for sliding it automatically.

Sliding Image using JQuery.

Let's start with step by step.
First we will download the required jQuery Library for this purpose.
Below are the library names to be downloaded for this purpose and the respective URL for that,

1. jquery-1.6.4.min.js
2. jquery.easing.1.3.js
3. jquery.cycle.all.js

Now we will start the coding

First Open a simple web application using your visual studio.

Go to the webapplication root folder and create two folder named "Scripts" and "images" to save jQyery Library which we downloaded and to save the image we will be using in the application.

Copy all the 3 jQuery library in your "Scripts" folder and all the images in your "images" Folder.

Once this is done we will open our web application and copy below lines in your head section of the .aspx page.

<head runat="server"><%--needs to download "jquery-1.6.4.min.js","jquery.easing.1.3.js" and jquery.cycle.all.js files from the net. Just search in google for this file directly --%>    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>    <script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>    <script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>    <title>Sample jQuery Sliding Image Application</title>    <script type="text/javascript">        jQuery(document).ready(function ()         {            if (jQuery('#SlideImages').length > 0)             {                jQuery('#SlideImages').cycle(                {                    fx: 'curtainX', speed: 500, timeout: 5000, randomizeEffects: true, easing: 'easeInOutBounce',                    next: '.NextSlide',prev: '.PrevSlide',pager: '#SlideStyleNav',cleartypeNoBg: true                });            }        });   </script>   <%--Prev.png and Next.png are the two small buttons to navigate next and prev on click ImageCount.png is the image count we display at the bottom of the page.--%>   <style type="text/css">#SlideStyle{position:relative;width:400px;}#SlideStyle .PrevSlide, #SlideStyle .NextSlide{display:block;position:absolute;width:40px;height:40px;top:150px;z-index:9999;text-decoration:none;}#SlideStyle .PrevSlide{left:0;background:transparent url(images/Prev.png) no-repeat top left;}#SlideStyle .NextSlide{right:0;background:transparent url(images/Next.png) no-repeat top left;}#SlideStyleNav {position:absolute; bottom:0; z-index:9999;}#SlideStyleNav a{background:transparent url(images/ImageCount.png) no-repeat 0 0 ; float:left; height:15px; overflow:hidden; text-decoration:none; text-indent:-1234px; width:16px;}#SlideStyleNav a.activeSlide {background-position:-32px 0;}#SlideImages{overflow: hidden; position: relative;}</style></head>

Now in your body tag add below code.

<body>    <form id="form1" runat="server"><div id="SlideStyle">    <div id="SlideImages">    <%--Needs to add images in IMAGE folder, in this examle I have added 6 Images--%>    <%--Image size can be changed depends on the size of image you are using, my code shrinks the image according to the size you are mentioning --%>        <img src="images/1.jpg" alt="Image 1" width="400" height="300" />        <img src="images/2.jpg" alt="Image 2" width="400" height="300" />        <img src="images/3.jpg" alt="Image 3" width="400" height="300" />        <img src="images/4.jpg" alt="Image 4" width="400" height="300" />        <img src="images/5.jpg" alt="Image 5" width="400" height="300" />        <img src="images/6.jpg" alt="Image 6" width="400" height="300" />    </div>    <a class="PrevSlide" href="#"> </a>    <a class="NextSlide" href="#"> </a>    <div id="SlideStyleNav"> </div></div>    </form></body>

Below is the sample image you will get after creating this application.

In this code you may change the image name based on the images you are using. You don't need to worry about the size of the images as I am adjusting the size of the images to fit it into the space.

Below are the some of the fx: options you can try:

1. shuffle
2. Zoom
3. fade
4. turnDown
5. curtainX

Below are the some of the easing: options you can try:

1. easeOutBounce
2. easeInBounce
3. easeInOutBack
4. easeOutBack
5. easeInOutQuint

you can find many more options if you search over the net I have given you just 5 options in each category there are lot many...

Tuesday, August 17, 2010

Toggling panel using Jquery

Enter this code just below the <title> tag. File name “jquery-1.2.6.min.js” depends on the jquery file you have downloaded.

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

Then Add css code to give style to the panels.

   1:  <style type="text/css">

   2:          .Header

   3:          {

   4:              color: white;

   5:              background-color: Black;

   6:              font: bold 13px auto "Trebuchet MS",

                   Verdana;

   7:              font-size: 12px;

   8:              cursor: pointer;

   9:              width:500px;

  10:              height:18px;

  11:              padding: 4px;

  12:          }

  13:          .Body

  14:          {

  15:              background-color: Cyan;

  16:              font: normal 11px auto Verdana, Arial;

  17:              border: 1px gray;

  18:              width:500px;

  19:              padding: 4px;

  20:              padding-top: 7px;

  21:          }

  22:      </style>

Add the jquery code which does the panel toggling

   1:  <script type="text/javascript">

   2:          $(document).ready(function()

   3:            {

   4:              $('#Panel1').click(function()

   5:                {

   6:                  $('#Panel2').slideToggle('slow');

   7:                }

   8:               );

   9:             }

  10:           );

  11:      </script>

All the above codes are continuous one after another.
Now it’s the time to add two panels, first panel with a label and second panel with some text in it. On clicking the first panel second panel with text will toggle...
Add this code just after form tag or add it through .NET interface.

<asp:Panel ID="Panel1" runat="server" CssClass="Header">
<asp:Label ID="Label1" runat="server">
What is JQuery {Click here to toggle}</asp:Label></asp:Panel>
                
<asp:Panel ID="Panel2" runat="server" CssClass="Body">
JQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig. Dual licensed under the MIT License and the GNU General Public License, jQuery is free and open source software.
     Both Microsoft and Nokia have announced plans to bundle jQuery[1] on their platforms, Microsoft adopting it initially within Visual Studio[2] and use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework whilst okia will integrate it into their Web Run-Time platform.
</asp:Panel>

This is what JQUERY code less do more….

Thursday, January 8, 2009

Advantages of JQuery? or Why we Use JQuery?

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
window.onload = function(){ alert("welcome"); }
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using “window.onload” in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, here comes jQuery...Write Less, Do More, JavaScript Library.

   1:  <HTML>

   2:  <head>

3:

   4:  <!--download jquery.js and use the same version.

       here i used "jquery-1.2.6.min.js"-->

   5:  <script type="text/javascript"

       src="jquery-1.2.6.min.js"></script>

6:

   7:  <script type="text/javascript">

8:

   9:  //Mandatory function to start jquery on load.

  10:  $(document).ready( function() {

11:

  12:  //below line will apply style to all paragraph so

       this should come first.

  13:  //Try moving this line below the paragraph by id tag

       style and see the difference.

  14:  $("p").css( {color: "yellow", background: "green"} );

15:

16:

  17:  //Firsr and second are the name of the paragraph.

  18:  $("#First").css( {color: "red",

       background: "yellow"} );

  19:  $("#Second").css( {color: "white",

       background: "black"} );

20:

  21:  //another function to play around the anchor <a> tag

  22:     $("a").click(function(event)

  23:      {

  24:        alert("Welcome to asheej.blogspot.com");

25:

  26:  //comment the above single line and uncomment below

       three line and see what JQyery can do.

27:

  28:  //      alert("As you can see, the link no longer took

       you to jquery.com");

  29:  //      event.preventDefault();

  30:  //        $(this).hide("slow");

31:

  32:       }

  33:       );

34:

  35:  });

  36:  </script>

37:

  38:  <head/>

39:

  40:  <BODY>

41:

  42:      <DIV style="border: 3px solid Green;">

  43:      <A href= "http://asheej.blogspot.com/">Google</a>

  44:      </DIV>

45:

  46:      <P id="First">This is First paragraph</p>

  47:      <P id="Second">This is Second paragraph</p>

  48:      <P>This is Third paragraph</p>

  49:      <P>This is Fourth paragraph</p>

50:

  51:  </BODY>

  52:  </HTML>