Draggable or Movable div Using Jquery in Asp.Net

Draggable div Using Jquery

Div tag Drag or move One place to another place Using JQuery in Asp.Net.

                               DEMO

                         Download

                    HTML Coding

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

<head>

    <title>Draggable or Movable div Using Jquery in Asp.Net</title>

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

    <script src="Scripts/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>     

<script  type="text/javascript">

    $(document).ready(function () {

        $("#div1").draggable();

        $("#div2").draggable();

        $("#div3").draggable();

        $("#div4").draggable();

    });

</script>

<style type="text/css">

    .div01

    {      

        color:greenyellow;

        padding: 20px;

         width: 25px;

        height: 25px;      

        font-size: 20px;

        font-weight: bold;

        cursor: pointer;

         border: solid 5px #ccc;

    }

     .div02

    {      

        color:lightpink;

        padding: 20px;

        width: 25px;

         height: 25px;         

        font-size: 20px;

        font-weight: bold;

        cursor: pointer;

         border: solid 5px #ccc;

    }

      .div03

    {      

        color:maroon;

        padding: 20px;

        width: 25px;

         height: 25px;         

        font-size: 20px;

        font-weight: bold;

        cursor: pointer;

         border: solid 5px #ccc;

    }

       .div04

    {      

        color:blueviolet;

        padding: 20px;

        width: 25px;

          height: 25px;            

        font-size: 20px;

        font-weight: bold;

        cursor: pointer;

         border: solid 5px #ccc;

    }

</style>   

</head>

<body>

    <div align="center">

<div id="div1"  class="div01">

                    3

</div>

    <div id="div2" class="div02">

2

    </div>

    <div id="div3" class="div03">

4</div>

    <div id="div4" class="div04">

1</div></div>

</body>

</html>

First Add New Webform - Add Required div tag &

JQuery Plugins

Next - Add Css Class to Div Tag

Read More

JQuery Audio Equalizer Animation in Asp.Net

          JQuery Audio Equalizer

Audio Equalizer Animation Using JQuery Plugins in Asp.Net.

                                       Demo
                                 
                     
                                Download

                              Html Coding

   <html lang="en">

       <head>

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

              <link rel="stylesheet" href="css/jquery.equalizer.css" />

       </head>

       <body>

             

              <section id="main_section" style="width:100%;height:100%;">

                    

                    

                     <div class="relative_left" style="width: 800px;margin: 30px 0px;height: 500px;left : 50%;margin-left: -300px;">

                           <h2 id="title">jQuery Audio Equalizer Animation </h2>

                           <p>

                                  <div class="song1 equalizer"></div>

                                  <audio controls loop id="song1">

                                         <source src="music/filec.mp3" >

                                  </audio>

                           <p>

                           <p>

                                  <div class="song2 equalizer"></div>

                                  <audio controls loop id="song2">

                                         <source src="music/file2.mp3" >

                                  </audio>

                           </p>

                          

              </div>

              </section>   

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

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

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

              <script>

                  $(document).ready(function () {

                      $('#song1').equalizer({

                          color: "#f2b400",

                          color1: '#a94442',

                          color2: '#f2b400',

                          //color3: '#000000'

                      });

                      $('#song2').equalizer();

                  });

              </script>

       </body>

</html>

Add New WebForm - Add Jquery Pluging Call to Audio source 

Read More

World Map Generator with Jquery Plugin in Asp.Net

WorldMap Generator with Jquery 

World Map Generator by Jquery Plugins  .if select map timearea display.

                           Download

                               DEMO

HTML Coding

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

<head runat="server">

    <title></title>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

   

    <script type="text/javascript" src="WorldMapGenerator.min.js">       

    </script>

   

</head>

<body>

    <form id="form1" runat="server">

  <div align="center">

      <br />

    <div id="map" style="width:50%">

    </div>

     <script type="text/javascript">

         $('#map').WorldMapGenerator();

    </script>

      </div>

    </form>

</body>

</html>

Add New Webform - Add Plugins - 

WorldMapGenerator.min.js

Read More

How to Split string Between Characters from label Using Asp.net C#

Split string Between Characters from label

Split String   two or more Character from label or Variables Using Asp.Net C#.

                                    DEMO 

                                 Download

                            HTML Coding

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

<head>       

     <title>How to Split string Between Some characters in label Using Asp.net C#</title>  

</head>

<body>

    <form runat="server">

        <div align="center">

        <br />

<asp:Label ID="lblSplit" runat="server" Text="(DotnetdrizzleS)"></asp:Label>

        <br />

<asp:Label ID="lblResult" runat="server" ForeColor="Red"></asp:Label>

        <br />

<br />

<asp:Button ID="Button1" runat="server" Text="Split" OnClick="Button1_Click" /></div>

    </form>

</body>

  

</html>

                           
                                C# Coding

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Text;

public partial class Default4 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

      

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        // (DotnetdrizzleS)

        lblResult.Text = lblSplit.Text.Split('(', ')')[1];  // 1 is destination character of split (index based)

    }

}

Add New Webform - Select Label & Button from 

ToolBox - Text add to label

Next - Code Behind file - add - split for label string with index assign

Read More