ASP.NET CLOUD

Thursday, 16 October 2014

Horizontal Div Slider Jquery Demo

Hi friends, today i am going to show you how to slide horizontally.

If you want to implement in your project you can simply just download the project or copy past the code.

Only thing you need to import is jquery 1.4 or higher version will work. You can give css according to your requirement.


Screen 1


Screen 2


Screen 3


Screen 4

CSS:

#container

{

width: 642px;

height: auto;

overflow: hidden;

}

#list-container

{

overflow: hidden;

width: 600px;

float: left;

border: solid 1px blue;

}

.list

{

background: #fff;

min-width: 3400px;

float: left;

}

#arrowR

{

background: yellow;

width: 20px;

height: 50px;

float: right;

cursor: pointer;

margin-top: 90px;

text-align: center;

font-family: Arial;

font-size: 20px;

color: #000;

padding-top: 25px;

}

#arrowL

{

margin-top: 90px;

background: yellow;

width: 20px;

height: 50px;

float: left;

cursor: pointer;

text-align: center;

font-family: Arial;

font-size: 20px;

color: #000;

padding-top: 25px;

}

.item

{

background: red;

width: 140px;

height: 240px;

margin: 5px;

float: left;

position: relative;

text-align: center;

font-family: Arial;

font-size: 20px;

color: White;

}

</style>

HTML:

Horizontal Slider

</h1>

(Slide When Left and Right button click)</h2>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Jquery:

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

<script type="text/javascript">

$(document).ready(function() {

var $item = $('div.item'), //Cache your DOM selector

visible = 4, //Set the number of items that will be visible

index = 0, //Starting index

endIndex = ($item.length / visible) - 1; //End index

$('div#arrowR').click(function() {

debugger;

if (index < endIndex) {

index++;

$item.animate({ 'left': '-=600px' });//Set width of your div here

}

});

$('div#arrowL').click(function() {

if (index > 0) {

index--;

$item.animate({ 'left': '+=600px' });//Set width of your div here

}

});

</script>

Download Link:

Download Complete Project

Enjoyed this post? Share and Leave a comment below, thanks! :)

Saturday, 10 May 2014

How to convert given number to word in asp.net c#

Hi friends, today i am going show you how to convert given number to word in asp.net c#.

In most of the website, application it is required to convert the number or amount in words. Following code will help you to convert a given number into words. For example, if “1234″ is given as input, output would be “One Thousand Two Hundred Thirty Four Only”.


Screen 1

Screen 2

HTML :

<div style="width: 100%; height: auto;" align="center">
        <div style="width: 560px; height: auto; background-color: lightgray; margin: 50px;
            padding: 25px;">
            <h1 style="margin-bottom:50px;">
                How to convert given number to word in asp.net c#
            </h1>
            <table style="width: 60%;">
                <tr>
                    <td>
                        Input Number
                    </td>
                    <td>
                        <asp:TextBox ID="txtNumber" runat="server" style="width:160px; height:25px; padding:5px;"></asp:TextBox>
                    </td>
                </tr>
                 <tr>
                    <td> 
                    </td>
                    <td>
                         
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <asp:Button ID="btnConvert" Text="Convert To Words" runat="server" style="height:25px; width:auto; padding: 0px 10px;" OnClick="btnConvert_Click" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                      <asp:Label ID="lbl2Way" runat="server" style="color:Green;"></asp:Label>
                    </td>
                </tr>
            </table>
        </div>
    </div>

C# Button Click Event :

//Here You need to import this package and Num2Wrd class NumberToEnglish file. You can download class file from below link.

using Num2Wrd;

protected void btnConvert_Click(object sender, EventArgs e)
    {
        NumberToEnglish no = new NumberToEnglish();
        string currency = no.changeCurrencyToWords(Convert.ToInt64(txtNumber.Text.Trim()));
        lbl2Way.Text = currency.ToString().ToUpper();
    }

Download Link :

Download Complete Project

Enjoyed this post? Share and Leave a comment below, thanks! :)

Friday, 28 March 2014

Restrict Special Characters in TextBox using JavaScript in asp.net

Hi friends, today i am going show you how to Restrict Special Characters in TextBox or in Textarea using JavaScript in asp.net.


Screen 1

I have two method to do it in javascript.

First Method:

In this method you only want to add "RestrictHtmlCharacter-Tags.js" file in order to restrict special character in textbox.

Using this method you don't need to add anything to textbox. Only you have to do one thing only call that "RestrictHtmlCharacter-Tags.js" js file in your page and it will restrict all the textbox entering special character. For this you have to add jquery 1.7.2.min.js

Click here to download RestrictHtmlCharacter-Tags.js

If you have update panel on your page please add following initializing code to initialize the "RestrictHtmlCharacter-Tags.js".

        //Restrict HTML Character
        $(document).ready(function() {
            try {
                RestrictHtmlCharacter();                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(RestrictHtmlCharacter);
            }
            catch (err) {
            }
        });

Add this following file in head tag:

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

<script src="Script/RestrictHtmlCharacter-Tags.js" type="text/javascript"></script>

Using this way you don't need too add anything in textbox only add this javascript file.

Second Method:

The second method to do the same is following:

The script works in such a way that the TextBox will accept only alphabets, numbers i.e. alphanumeric values with some allowed special keys, thus unless a special character key has been specified to be excluded it won’t be accepted.