Click here to Skip to main content
11,410,118 members (60,625 online)
Click here to Skip to main content

Tagged as

Client-side Zoom Window for Textbox in ASP.NET

, 2 Nov 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Client-side Zoom Window using JavaScript for Textbox in ASP.NET

Introduction

An image button next to a textbox server control launches a div window displaying the content of the textbox. The window also allows the user to edit the content and paste it back to the textbox. All this happens on the clientside without any postback.

img.JPG

Background

Many web developers prefer to wrap their ASP.NET server textbox controls into user controls that include validation, labels, FAQ note, etc. One feature that users requested was a large size scrollable popup window through which they can see the contents of a textbox and also edit and submit it back on the clientside. A multi-line textbox may not be enough in some cases.

Using the Code

First add your textbox and the image right next to it in the aspx code:

<div style="float:left"><asp:TextBox ID="txt" runat="server" Width="200px" /></div>
<div style="float:left">
<img alt="zoom text" id="imgZoom" runat="server" style="cursor:pointer;" /></div>	

Next, you add the DIV popup to the aspx page. This remains hidden by default. This DIV includes the multiline textbox to hold the content, a submit button to post the changes back to the parent textbox, a cancel button to close the popup without any changes, and a hidden input to hold the parent textbox id.

<div id="divZoom" style="z-index:1000;" style="font-size:smaller;
	font-family:Arial;position:absolute;top:0; left:8;visibility:hidden;
	background-color:#C0C0C0;padding:3px 3px 3px 3px;border:solid 1px black;">
    <asp:TextBox runat="server" ID="txtZoom" TextMode="MultiLine" Wrap="false" 
	Width="400px" Height="300px"></asp:TextBox><br />
    <button id="btnZoomSubmit" onclick="HideZoom(true);return false;" 
	style="cursor:hand;">Submit</button>&nbsp;<button id="btnZoomCancel" 
	onclick="HideZoom(false);return false;" style="cursor:hand;">Cancel</button>    
    <input type="hidden" id="txtid" name="txtname" value="txtvalue" />
</div>   

In the page pre-render method, add the JavaScript call to the imagebutton depending on the enable/readonly state of the textbox. Below are the two images I used - one for enabled state and other for disabled state of the textbox.

Enabled textbox, show this: txtzoom.png

Disabled textbox, show this: txtzoomdisabled.PNG

 private void Page_PreRender(object sender, System.EventArgs e)
 {      
        if (txt.Enabled && !txt.ReadOnly)
        {   //add onclick call
            imgZoom.Attributes.Add("onclick", "ShowZoomPopup('" + txt.ClientID + "');");
            imgZoom.Src = "../images/txtzoom.png";
        }
        else
        {   //remove onclick call
            imgZoom.Attributes.Add("onclick", ""); 
            imgZoom.Src = "../images/txtzoomdisabled.png";     
        }
}		 

This goes in the JavaScript section of the aspx:

<script language="JavaScript" type="text/javascript" >   

        function ShowZoomPopup(txtboxid) {
            
            //GET THE TEXTBOX VALUE
            var txtbox = document.getElementById(txtboxid);
            var strTextBoxValue = document.getElementById(txtboxid).value;
            
            //SET THE ZOOM PANEL
            var hp = document.getElementById("divZoom");
            hp.style.visibility = "Visible";
            hp.style.top = getAbsoluteTop(txtbox) + 'px';
            hp.style.left = (getAbsoluteLeft(txtbox) + 2) + 'px';
            txtZoom = document.getElementById('ctl00_txtZoom');
            txtZoom.value = strTextBoxValue;
            
            //SET THE HIDDEN FIELD WITH TXT ID
            document.getElementById('txtid').value = txtboxid;
        }
	function HideZoomPopup(status) {
	    //IF TRUE (SUBMIT BUTTON WAS CLICKED i.e. COPY DATA TO TEXTBOX)
	    //FALSE MEANS CANCEL BUTTON WAS CLICKED.
            if (status) {
		//GET HIDDEN CONTROLS DATA
                var txtboxid = document.getElementById('txtid').value;
                document.getElementById(txtboxid).value = 
		document.getElementById('ctl00_txtZoom').value;     
            }
            //SET THE ZOOM PANEL
            var hp = document.getElementById("divZoom");
            hp.style.visibility = "Hidden";
        }
        function getAbsoluteLeft(objectId) {
            o = objectId; 
            var objwidth = o.offsetWidth;
            oLeft = o.offsetLeft;           
            while (o.offsetParent != null) {   
                oParent = o.offsetParent;    
                oLeft += oParent.offsetLeft;
                o = oParent;
            }

            return oLeft;
        }

        function getAbsoluteTop(objectId) {
	        o = objectId;
	        oTop = o.offsetTop  ;          
	        while(o.offsetParent!=null) { 
		        oParent = o.offsetParent;  
		        oTop += oParent.offsetTop; 
		        o = oParent;
	        }

	        return oTop;
        } 
</script> 

That's it!

History

  • 23rd September, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

razarizvi

United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 4 PinmemberMonjurul Habib3-Nov-11 10:10 
Questionnice Pinmembersa2ed_jomaa2-Nov-11 15:47 
GeneralMy vote of 5 Pinmembersa2ed_jomaa2-Nov-11 15:45 
Questiontxt can't get value from txtZoom Pinmembergizeh24-Oct-11 6:12 
AnswerRe: txt can't get value from txtZoom Pinmembergizeh25-Oct-11 8:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150414.5 | Last Updated 2 Nov 2011
Article Copyright 2010 by razarizvi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid