Showing posts with label Cross-Browser. Show all posts
Showing posts with label Cross-Browser. Show all posts

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.

Restrict Special Characters in TextBox 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.

HTML:

<div align="center" style="width: 100%;">
        <div style="width: 300px;">
            <fieldset>
                <legend>Restrict Special Character</legend>
                <br />
                Note: Special character <b>not</b> allowed.
                <br />
                <br />
                <asp:TextBox ID="txtSearch" runat="server" onkeypress="return IsCharacterRestrict(event);"
                    ondrop="return false;" onpaste="return false;" Style="font-size: 14px;
                    margin-top: 10px; height: 30px; width: 250px; color: #353535;" MaxLength="100"></asp:TextBox>
                <br />
                <br />
                <br />
            </fieldset>
        </div>
    </div>

Script:

<script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8);  //Backspace
        specialKeys.push(9);  //Tab
        specialKeys.push(46); //Delete
        specialKeys.push(36); //Home
        specialKeys.push(35); //End
        specialKeys.push(37); //Left
        specialKeys.push(39); //Right
        function IsCharacterRestrict(e) {
            var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
            var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
            return ret;
        }
    </script>
 

Download Link :

Download Complete Project

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

Thursday 20 March 2014

Add Timer in Javascript & Jquery in asp.net c#

Hi friends, today i am going show you how to set timer in javascript and call events or function when times up!

You can also set dynamic timer just passing the value to hidden field "hdnTimer" or you can set your own fix time.

Here is time value given below:

1200 - 20 minutes
2400 - 40 minutes
3600 - 1 Hours
7200 - 2 Hours
So on..



Timer in javascript
Screen 1
Once timer get over it fire alert.

When timer get over fires alert
Screen 2

JS :

You need to add this jquery file

  • jquery-1.7.2.min.js

     

HTML : 

<div align="center" style="width: 100%; height: auto; font-family: Arial;">
        <div style="width: 960px; height: auto;">
            <div style="background-color: #eee; width: 500px; border: 1px solid #CCC;">
                <h1>
                    Timer in Javascript and Jquery</h1>
                <div>
                    <div style="width: 150px; height: 80px; background-color: #ececec; border: 1px solid #eaeaea;">
                        <div style="padding: 20px 20px 30px 20px; color: #323232; font-family: Arial; font-size: 20px;">
                            <input type="hidden" id="hdnTimer" value="10">
                            Time Left <b id="idTimerLCD"></b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 

Script :

 var _timerHandle = setInterval(function() { MyTimer() }, 1000);

        function MyTimer() {
            var valueTimer = $('#hdnTimer').val();

            if (valueTimer > 0) {
                valueTimer = valueTimer - 1;
                //Get Hours Min Secs
                hours = (valueTimer / 3600).toString().split('.')[0];
                mins = ((valueTimer % 3600) / 60).toString().split('.')[0];
                secs = ((valueTimer % 3600) % 60).toString();

                if (hours.length == 1) hours = '0' + hours;
                if (mins.length == 1) mins = '0' + mins;
                if (secs.length == 1) secs = '0' + secs;

                $('#idTimerLCD').text(hours + ':' + mins + ':' + secs);
                $('#hdnTimer').val(valueTimer);
                //Set time as Page title
                document.title = $('#idTimerLCD').text();
            }
            else {
                //Here Timer get over you can call any function here
                clearInterval(_timerHandle);
                alert(" Your time is up ! \n\n Trigger button click or any function you want to execute.");
                //(Add Button name) Button click event comes here
                //$('#btnName').click();

            }
        }

 

Download Link :

Download Complete Project

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

Wednesday 19 March 2014

AJAX Image Upload in Asp.net C#

We've got a sweet solution that uploads an image with AJAX and then immediately displays.

Ajax ,an acronym for Asynchronous Javascript and Xml is a group of interrelated web development techniques used on the client side to create asynchronous web applications.With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

Here we are using ajaxupload.js to upload an image and show upload button on mouse hover and mouse out same like facebook.

On mouse out hide upload button
Screen 1


On Mouse hover show upload button

On mouse hover show upload button
Screen 2

Choose image file

choose image file
Screen 3

Finally Preview of image without postback (without refreshing page)

Upload image without postback
Screen 4

JS :

You need this following javascript file to perform AJAX Image Upload they are following:

  • jquery-1.7.2.min.js

  • ajaxupload.js

HTML:

<div align="center" style="width: 100%; height: auto;">
        <div style="width: 960px; height: auto;">
            <div style="background-color: #eee; border: 1px solid #CCC;">
                <h1>
                    AJAX Image Upload in Asp.net C#</h1>
                <h4>
                    Contains front-end (jQuery) and back-end code (c#) to upload an image and display
                    the same image on screen.</h4>
                <div align="left">
                    <h4 style="margin-left: 60px;">
                        > On Mouse hover show upload button</h4>
                    <h4 style="margin-left: 60px;">
                        > On Mouse out hide upload button</h4>
                </div>
                <div style="width: auto; height: auto; margin-top: 45px; margin-bottom: 50px; margin-left: 420px;
                    overflow: hidden;">
                    <div class="pic" style="float: left; height: 160px; width: 150px; border: 1px solid #CCC;">
                        <img id="imgUser" height="160" width="150" src="Images/NoPhotoAvailable.jpg" runat="server" />
                        <div align="center" style="height: 23px; z-index: 5; width: auto; position: absolute;
                            bottom: 0px; right: 0px;">
                            <asp:Button ID="btnUpload" ValidationGroup="vgUploadImage" runat="server" Text="Upload"
                                class="btn-update" Style="border: 0px; width: 69px; height: 23px; margin: 0px;
                                background-color: #93bbe1;" />
                        </div>
                    </div>
                </div>
                <div style="width: auto; height: 80px; margin-left: 35px;">
                    <div style="height: 25px; width: auto;">
                        <asp:Label runat="server" ID="lblImageMsg"></asp:Label>
                        <asp:TextBox ID="txtImage" placeholder="Image name come here" runat="server" Style="height: 30px;
                            font-size: 16px; width: 250px;"></asp:TextBox>
                    </div>
                </div>
            </div>
        </div>
    </div>

Script :

//Ajax Upload Script
        $(function() {
            new AjaxUpload('#<%=btnUpload.ClientID %>', {
                action: 'UploadHandler.ashx?Image=True',
                onComplete: function(file, response) {
                    debugger;
                    if (response != null) {
                        $('#<%=imgUser.ClientID %>').attr('src', response.toString());
                        document.getElementById("<%=txtImage.ClientID %>").value = file.toString();
                    }
                    else {
                        alert('Response is null!!!');
                    }
                },
                onSubmit: function(file, ext) {
                    if (!(ext && /^(jpeg|png|gif|bmp|jpg)$/i.test(ext))) {
                        alert('Invalid Image Format.');
                        return false;
                    }
                }
            });
        });

// If you don't want to show upload button on mouse hover and out just remove this code.

//On mouse hover and mouse out show/hide button code
        $(document).mousemove(function(e) {
            var $targ = $(e.target);
            if ($targ != "") {
                if ($targ.closest('.pic').length || $targ.is('.pic').length || $targ.closest('input[type=file]').length || $targ.is('input[type=file]').length) {
                    $('#<%=btnUpload.ClientID %>').show();
                }
                else {
                    $('#<%=btnUpload.ClientID %>').hide();
                }
            }
        });

Handler Code :

if (context.Request.QueryString["Image"] != null && context.Request.QueryString["Image"].ToString() != "")
        {
            if (context.Request.Files[0] != null && context.Request.Files[0].ToString() != "")
            {
                HttpPostedFile postedFile = context.Request.Files[0];

                string ImagePath = "UploadedImage/";
                postedFile.SaveAs(System.Web.HttpContext.Current.Server.MapPath(ImagePath) + postedFile.FileName.ToString());

                context.Response.Write(ImagePath + postedFile.FileName.ToString());
                context.Response.End();
            }
        }

Download Link :

Download Complete Project

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

Wednesday 26 February 2014

Flex Slider With Animation "slide" and "Fade" Effect

FlexSlider 2 is the most powerful slider available. Fully responsive; Retina display support (image slider types only) (New); Easing effects (New) and more. The plugin requires jQuery 1.4.2 and above.

 Flex Slider with Animation "Slide" Effect

Flex Slider Animation "Slide" Effect
Screen 1
Flex Slider with Animation "Fade" Effect


Flex Slider Animation "Fade" Effect
Screen 2
To Add Flex Slider you need to add this file in head tag :
1. flexslider.css
2. jquery-1.7.2.min
3. jquery.flexslider.js


Script :

<script type="text/javascript">
        // Can also be used with $(document).ready()


        //Flex Slider Animation "slide" Effect
        $(window).load(function() {
            $('#flexSlide').flexslider({
                animation: "slide"
            });
        });


        //Flex Slider Animation "fade" Effect
        $(window).load(function() {
            $('#flexsliderFade').flexslider({
                animation: "fade"
            });
        });
         
    </script>





HTML :


//Place this html code inside div tag
<h1>
                Flex Slider</h1>
            <div>
                //Place somewhere in the <body> of your page                 <h2 align="left" style="border-bottom: solid 1px white;">
                    Flex Slider Animation "slide" Effect
                </h2>
                <div id="flexSlide" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="Images/Screen 1.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 2.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 3.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 4.jpg" />
                        </li>
                    </ul>
                </div>
            </div>
            <div>
            <h2 align="left" style="border-bottom: solid 1px white;">
                    Flex Slider Animation "Fade" Effect
                </h2>
                <div id="flexsliderFade" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="Images/Screen 1.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 2.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 3.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 4.jpg" />
                        </li>
                    </ul>
                </div>
            </div>


General Notes


Two new methods are available for adding/removing slides, slider.addSlide() and slider.removeSlide(). More details about this coming soon.
  • slider.addSlide(obj, pos) accepts two parameters, a string/jQuery object and an index.
  • slider.removeSlide(obj) accepts one parameter, either an object to be removed, or an index. 

For more details and properties visit : FlexSlider 2.2.2 Updates, General Notes, Examples, Properties

Download Link :

Download Complete Project Link

If you have any query feel free to comment it will be appreciated :)


Saturday 22 February 2014

Tooltip on div Hover using onmouseover and onmouseout events

Here i am showing you how to create your own style tooltip in jquery. Its very simple to create different type of tooltip by changing it design style. 

Tooltip On div Hover using onmouseover and onmouseout events
Screen 1


Here we are calling a jquery function on hover of div and call another function after hover out to hide that div.
We are using two event to call jquery function:
  1. onmouseover
  2. onmouseout
OnMouseOver - The onmouseover event fires when the mouse pointer go to the boundaries of the target object.

OnMouseOut - The onmouseout event fires when the mouse pointer leaves the boundaries of the target object. 

Hover Me
Screen 2

CSS:

//CSS for hover div style
<style type="text/css">
        .hoverContiner
        {
            width: 215px;
            height: auto;
            margin-top: 20px;
            position: absolute;
            display: none;
            z-index: 10000;
            font-family: Arial;
        }
        .hoverDivSyle
        {
            float: left;
            width: 11px;
            height: 50px;
            background-image: url('Images/txt-corner.png');
            background-repeat: no-repeat;
            background-position: left 12px;
            position: absolute;
            left: -10px;
        }
        .hoverTextStyle
        {
            float: left;
            width: 180px;
            height: auto;
            background-color: #FFFFFF;
            border: solid 1px #cbcbcb;
            padding: 15px 10px 15px 10px;
            font-family: Arial;
            font-size: 12px;
            color: #222222;
            overflow: hidden;
        }
    </style>


HTML:

<div align="center">
        <h1 style="font-family: Arial; margin-bottom: 80px;">
            Tooltip On div Hover using onmouseover and onmouseout events</h1>

        //Calling function onmouseover and onmouseout
       // HoverDetails is the function which we need to pass current div id and message that you want to display in tooltip
        <div class="QuestionImg" id="divRoleDetails" onmouseover="HoverDetails(this.id,'Lorem ipsum dolor sit amet, cons ectet uer adipiscing elit. Lorem ipsum dolor sit amet, co nsect tuer adipiscing elit.');"
            onmouseout="HideHoverDetails();" style="background-color: rgb(152, 0, 0); height: 30px;
            padding-top: 10px; width: 150px; text-align: center; cursor:pointer; font-family: Arial; color: White;">
            Hover Me
        </div>
        //Hover Details div
        <div id="divHoverDetails" class="hoverContiner">
            <div class="hoverDivSyle">
            </div>
            <div id="divHoverDetailsText" class="hoverTextStyle">
            </div>
        </div>


Script:

you need to add jquery.min file.
Jquery CDN: http://code.jquery.com/jquery-1.10.2.min.js

<script type="text/javascript">

            function HoverDetails(divID, text) {
                debugger;
                var dvMouseover = $('#divHoverDetails');
                var offset = $('#' + divID).offset();
                var leftValue = offset.left;
                var topValue = offset.top;
                dvMouseover.css({ "top": (topValue - 25) + "px" });
                dvMouseover.css({ "left": (leftValue - -158) + "px" });
                $('#divHoverDetailsText').text(text);
                $(dvMouseover).stop().fadeIn(400); //Show tooltip
            }

            function HideHoverDetails() {
                document.getElementById('divHoverDetails').style.display = "none";

  //Hide tooltip            }

        </script>


Download Link:

Download From Here

 If you have any query feel free to comment it will be appreciated :)

Friday 27 December 2013

javascript - jQuery fading "Back To Top" link


Here i am explaining how to add javascript - jQuery fading "Back To Top" link

We need to style and position it. Here I’m setting its position to fixed and adding the image of "Back To Top". I also added the Fade In and Fade Out effect.

Back To Top

Script

//Add This Jquery CDN
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js">
 </script>


//A Simple FadeIn and FadeOut Effect Back to top
<script type="text/javascript">
        $(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() != 0) {
                    $("#toTop").fadeIn();
                }
                else {
                    $("#toTop").fadeOut();
                }
            });
            $('#toTop').click(function() {
                $('body,html').animate({ scrollTop: 0 }, 800);
            });
        });
</script>


CSS

<style type="text/css">
        #toTop
        {
            position: fixed;
            bottom: 50px;
            right: 30px;
            width: 180px;
            height:100px;
            padding: 5px;         
            cursor:pointer;
            display: none;
        }
</style>

 

HTML

//This is the Fixed div
<div id="toTop">
        <img src="images/BackToTopArrow.png" style="width: 250px;
            height:100px;" alt="back to top" title="back to top" />
</div>


If you have any query feel free to comment it will be appriciated :)

Tuesday 24 December 2013

Facebook Style Cross-Browser Jscroll Pane



jScrollPane is a cross-browser jQuery plugin which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.

How to use

It is very simple to use JScrollPane. You will need to download the necessary files and place them on your server. Then you just need to include the relevant files in the <head> tag of your document.

You can get needed file by downloading attached file below clicking on Download Link

Screen shot :





Here is the example :

CSS

//styles needed by jScrollPane
<link href="CSS/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />

Script Path



//styles needed by jScrollPane
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

//latest jQuery direct from google's CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
 

Script

//Call the jScrollPane  
<script type="text/javascript">
        $(document).ready(function() {
            $('.MultipleDivScroll').jScrollPane();
        });
</script>

 

Body

//body demo content for jScrollPane
<body>
    <div align="center" style="width: 100%;">

        <h1>
            Facebook Style JScroll Pane</h1>
        <div align="left" id="divScrollPane" class="MultipleDivScroll" style="width: 180px;
            height: 300px; border: solid 0px; outline: none !important;">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
                sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
                sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
                sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam.</p>
        </div>
    </div>
</body> 


Download Link


  
Reference Link For More Details on jScrollPane

http://jscrollpane.kelvinluck.com/

If you have any query comment will be appreciated :)