Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Converting normal textbox into password textbox on clicking on the textbox

In this tutorial i will show how can u show the text in the textbox which is having TextMode=password but when clicked on that textbox it converts it to the password textbox.
Steps:
Take one textbox & set its TextMode to password.
now go to source mode of visual studio write this in the textbox

onfocus="if(this.value =='PASSWORD')this.value='';" onblur="if(this.value==''){this.value='PASSWORD';this.TextMode='SingleLine';}"
After adding this what happens is .....
It will initially show text "PASSWORD".
After that when you click on it ..it will be converted password textbox which will show text as "*"

your textbox markup should look something like this....

 < asp:TextBox ID="Password" runat="server" TextMode="Password"
  onfocus="if(this.value =='PASSWORD')this.value='';"    onblur="if(this.value==''){this.value='PASSWORD';this.TextMode='SingleLine';}">PASSWORD< /asp:TextBox>
0 comments
Labels: ,

How to show large image on mouse click on the small image using JavaScript in asp.net ?

In this tutorial I will show you how we can use java script to display the large image by clicking on the small image.

Steps:

Create new website.

Now add one more div tag in the body ....

<div id="bigDiv" style="position: absolute; z-index: 2; border: solid 1px black;

width: auto; height: auto; left: 250px;">

Drag the image control in the body of the form (also set the attribute ImageUrl to some image in the project )& place it after the above div tag.

Now add the following javascript in the head of the page.

<script type="text/javascript" language="javascript">
 
        function showZoomImage(obj) {
            document.getElementById("bigDiv").style.visibility = "visible";
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.left = event.clientX;
            document.getElementById("bigDiv").style.top = event.clientY;
           document.getElementById("bigDiv").style.zIndex = "0";
 
        }
        function ShowDefaultImage(obj) {
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.visibility = "hidden";
        }
 
 
   script>

This will look something like this.....

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default"EnableViewState="false" ViewStateMode="Disabled" %>
 
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>title>
    <script type="text/javascript" language="javascript">
 
        function showZoomImage(obj) {
            document.getElementById("bigDiv").style.visibility = "visible";
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.left = event.clientX;
            document.getElementById("bigDiv").style.top = event.clientY;
            document.getElementById("bigDiv").style.zIndex = "0";
 
        }
        function ShowDefaultImage(obj) {
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.visibility = "hidden";
        }
 
    script>
head>
<body>
    <form id="form1" runat="server" enableviewstate="false" viewstatemode="Disabled">
    <div>
        <div id="bigDiv" style="position: absolute; z-index: 2; border: solid 1px black;
            width: auto; height: auto; left: 250px;">
        div>
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Desert.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />
        div>
    form>
body>
html>

Just keep in mind that id of the empty div & id in the script should be the same (i have indicated in the Green colour in the above mark-up)

Like this we can make much more things ....I have made this.....

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    EnableViewState="false" ViewStateMode="Disabled" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>title>
    <script type="text/javascript" language="javascript">
 
        function showZoomImage(obj) {
            document.getElementById("bigDiv").style.visibility = "visible";
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.left = event.clientX;
            document.getElementById("bigDiv").style.top = event.clientY;
            document.getElementById("bigDiv").style.zIndex = "0";
 
        }
        function ShowDefaultImage(obj) {
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.visibility = "hidden";
        }
 
 
    script>
    <style>
        .oneImage
        {
            padding: 5px 5px 5px 5px;
        }
        .allImage
        {
            padding: 0px 10px 0px 10px;
            width: 200px;
            height: 605px;
            overflow: scroll;
        }
    style>
head>
<body>
    <form id="form1" runat="server" enableviewstate="false" viewstatemode="Disabled">
    <div>
        <div id="bigDiv" style="position: absolute; z-index: 2; border: solid 1px black;
            width: auto; height: auto; left: 250px;">
        div>
        <div class="allImage">
            <div class="oneImage">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Desert.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Chrysanthemum.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/Hydrangeas.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image4" runat="server" ImageUrl="~/Images/Jellyfish.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image5" runat="server" ImageUrl="~/Images/Lighthouse.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image6" runat="server" ImageUrl="~/Images/Desert.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Chrysanthemum.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image8" runat="server" ImageUrl="~/Images/Hydrangeas.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image9" runat="server" ImageUrl="~/Images/Jellyfish.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image10" runat="server" ImageUrl="~/Images/Lighthouse.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
        div>
    form>
body>
html>

0 comments
Labels: ,
Subscribe to: Posts (Atom)