Asteranup, many thanks for the help. That works just a like I asked for; however, is there a way to also allow the user to manually adjust the textbox's height by draging from the lower right hand corner just like this textbox in asp.net here?
Asternaup, there is one more problem. The textbox is inside a nested Listview control so this line $("#<%= txtInsertDefinition.ClientID %>").hover( of code is having problem accessing the textbox. Do you have an idea on how to access the nested Listview
control's textbox?
Asternaup, there is one more problem. The textbox is inside a nested Listview control so this line $("#<%= txtInsertDefinition.ClientID %>").hover( of code is having problem accessing the textbox. Do you have an idea on how to access the nested Listview control's
textbox?
You can do this easily.
By using class-
Add a unique class to the text box like cssClassForTextboxHover and use like below-
mychucky
Contributor
4358 Points
3709 Posts
Textbox expand when focused
Mar 08, 2011 02:43 PM|LINK
I want my textbox to expand, say, from height=20 to 40px when I clicked on the textbox or when it's focused. Below are my codes.
<head runat="server"> <title></title> <link href="../CSS/lusHmoobMain.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script> <script type="text/javascript" src="scripts/jquery.autogrow.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.expanding').autogrow(); //use the following code if I figured out how to get jQuery to recognized repating same Div ID //$("#commands").hide("normal"); //alert("Expanding"); }); $(function () { $("textarea[id$=txtInsertDefinition]").blur(function () { //$("#commands").hide() $(this).next().hide("normal"); //alert("got in first"); }); $("textarea[id$=txtInsertDefinition]").focus(function () { $(this).next().show("normal"); //$("#commands").next().show("normal"); //alert("got in second"); }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="definitionDiv"> <asp:TextBox ID="txtInsertDefinition" AutoPostBack="false" CssClass="expanding" runat="server" Width="300px" TextMode="MultiLine" /> <div id="commands" style="display: none;" runat="server"> <table cellpadding="0" cellspacing="0" width="300px" id="tblCommands"> <tr> <td style="width: 50%; text-align: center;"> <asp:LinkButton CssClass="submitComments" ID="lnbInsertRes" runat="server" CommandName="Insert" Font-Underline="false">Insert</asp:LinkButton> </td> <td style="width: 50%; text-align: center;"> <asp:LinkButton CssClass="submitComments" ID="lnbCancelRes" runat="server" CommandName="Cancel" Font-Underline="false">Cancel</asp:LinkButton> </td> </tr> </table> </div> </div> </form> </body>CSS code:
#definitions { width: 411px; padding: 5px 5px 5px 5px; margin: 5px 15px 5px 15px; background-color: #B9D3EE; font: 10px Verdana, Arial, Helvetica, sans-serif; } #definitionDiv { width: 411px; height:60px; margin-left: 15px; padding: 5px 5px 10px 5px; background-color: #B9D3EE; font: 10px Verdana, Arial, Helvetica, sans-serif; } /*jQuery CSS*/ .expanding { line-height: 20px; width: 400px; } .InsertCancelComm { background-color: Red; width: 402px; } #commentsCommand { background-color: #B9D3EE; width: 99%; vertical-align: middle; height: 20px; } .dialogPopup:hover { cursor: pointer; } .dialogDiv { background-color: Gray; } /*end of jQuery CSS */I also wanted to allow the user to manually drag/adjust the textbox's height as he/she desires.
Any help is much appreciated.
asteranup
All-Star
30184 Points
4906 Posts
Re: Textbox expand when focused
Mar 08, 2011 04:09 PM|LINK
Hi,
Check this code-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#<%= textBox.ClientID %>").hover( function(){ $(this).animate({width: 40}, 500); }, function () { $(this).animate({ width: 20 }, 500); }) }); </script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="textBox" runat="server" style="width:20px"></asp:TextBox> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
mychucky
Contributor
4358 Points
3709 Posts
Re: Textbox expand when focused
Mar 08, 2011 04:38 PM|LINK
Asteranup, many thanks for the help. That works just a like I asked for; however, is there a way to also allow the user to manually adjust the textbox's height by draging from the lower right hand corner just like this textbox in asp.net here?
greatseyes
Member
236 Points
46 Posts
Re: Textbox expand when focused
Mar 08, 2011 04:39 PM|LINK
you may do this
mychucky
Contributor
4358 Points
3709 Posts
Re: Textbox expand when focused
Mar 08, 2011 04:44 PM|LINK
Asternaup, there is one more problem. The textbox is inside a nested Listview control so this line $("#<%= txtInsertDefinition.ClientID %>").hover( of code is having problem accessing the textbox. Do you have an idea on how to access the nested Listview control's textbox?
greatseyes
Member
236 Points
46 Posts
Re: Textbox expand when focused
Mar 08, 2011 04:49 PM|LINK
apply any css class on the textbox and try to get the dom elememt ,e.g ('.TestClass').hover(....)
mychucky
Contributor
4358 Points
3709 Posts
Re: Textbox expand when focused
Mar 08, 2011 06:14 PM|LINK
My textbox does have CSS class on:
I put an alert in and I don't even receive an alert and when I click on the textbox.
$(document).ready(function () { var jObject = $('.expanding'); if (jObject.length) { jObject.focus(function () { $(this).animate({ width: 100 }, 500); alert("got here"); }); jObject.focusOut(function () { $(this).animate({ width: 20 }, 500); }); } });This alert didn't get fire at all. Any suggestion?mychucky
Contributor
4358 Points
3709 Posts
Re: Textbox expand when focused
Mar 08, 2011 06:35 PM|LINK
For what it's worth, here's my whole ASP code.
<script type="text/javascript"> $(document).ready(function () { var jObject = $('.expanding'); if (jObject.length) { jObject.focus(function () { $(this).animate({ width: 100 }, 500); alert("got here"); }); jObject.focusOut(function () { $(this).animate({ width: 20 }, 500); alert("second"); }); } }); $(function () { $("textarea[id$=txtInsertDefinition]").blur(function () { //$("#commands").hide() $(this).next().hide("normal"); alert("got in first"); }); $("textarea[id$=txtInsertDefinition]").focus(function () { $(this).next().show("normal"); //$("#commands").next().show("normal"); alert("got in second"); }); }); </script> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="udpEdit" runat="server"> <ContentTemplate> <table cellpadding="0" cellspacing="1"> <tr> <td class="tblEditLusHmoobCate"> Search Word: </td> <td class="tblEditLusHmoobSearch"> <asp:TextBox ID="txtSrcWord" runat="server" Width="100%" /> </td> <td class="tblEditLusHmoobButton"> <asp:Button ID="btnSearchWrd" runat="server" Text="Search" OnClick="btnSearchWrd_Click" /> </td> </tr> <tr style="text-align: center;"> <td colspan="3"> <asp:Label ID="lblStatus" runat="server"></asp:Label> </td> </tr> </table> <div id="result" class="resultContainer"> <asp:DataList ID="dtlLusHmoob" runat="server" DataKeyField="wordID" RepeatDirection="Horizontal" CellPadding="10" Width="300px" OnItemCommand="dtlLusHmoob_ItemCommand" RepeatColumns="3"> <ItemTemplate> <asp:LinkButton ID="lbnWord" runat="server" CommandName="Select" Text='<%# Eval("word") %>'></asp:LinkButton> </ItemTemplate> </asp:DataList> </div> <div id="edit" class="editContainer"> <asp:SqlDataSource ID="sqlWord" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" DeleteCommand="DELETE FROM [lusHmoob] WHERE [wordID] = @wordID" InsertCommand="INSERT INTO [lusHmoob] ([wordID], [word], [originate], [whoInsert], [whoModify], [insertDate], [modDate], [approval]) VALUES (@wordID, @word, @originate, @whoInsert, @whoModify, @insertDate, @modDate, @approval)" SelectCommand="SELECT * FROM [lusHmoob] WHERE ([wordID] = @wordID)" UpdateCommand="UPDATE [lusHmoob] SET [word] = @word, [originate] = @originate, [whoInsert] = @whoInsert, [whoModify] = @whoModify, [insertDate] = @insertDate, [modDate] = @modDate, [approval] = @approval WHERE [wordID] = @wordID"> <DeleteParameters> <asp:Parameter Name="wordID" Type="Object" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="wordID" /> <asp:Parameter Name="word" Type="String" /> <asp:Parameter Name="originate" Type="String" /> <asp:Parameter Name="whoInsert" /> <asp:Parameter Name="whoModify" /> <asp:Parameter Name="insertDate" Type="DateTime" /> <asp:Parameter Name="modDate" Type="DateTime" /> <asp:Parameter Name="approval" Type="Boolean" /> </InsertParameters> <SelectParameters> <asp:ControlParameter ControlID="dtlLusHmoob" Name="wordID" PropertyName="SelectedValue" /> </SelectParameters> <UpdateParameters> <asp:Parameter Name="word" /> <asp:Parameter Name="originate" Type="String" /> <asp:Parameter Name="whoInsert" /> <asp:Parameter Name="whoModify" /> <asp:Parameter Name="insertDate" Type="DateTime" /> <asp:Parameter Name="modDate" Type="DateTime" /> <asp:Parameter Name="approval" Type="Boolean" /> <asp:Parameter Name="wordID" Type="String" /> </UpdateParameters> </asp:SqlDataSource> <asp:SqlDataSource ID="sqlDefinition" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" DeleteCommand="DELETE FROM [definition] WHERE [defineID] = @defineID" InsertCommand="INSERT INTO [definition] ([dfWordID], [language], [definitions], [usage], [dfWhoInsert], [dfWhoModify], [dateInsert], [dateModify], [dfApproval]) VALUES (@dfWordID, @language, @definitions, @usage, @dfWhoInsert, @dfWhoModify, @dateInsert, @dateModify, @dfApproval)" SelectCommand="SELECT * FROM [definition] WHERE ([dfWordID] = @dfWordID)" UpdateCommand="UPDATE [definition] SET [dfWordID] = @dfWordID, [language] = @language, [definitions] = @definitions, [usage] = @usage, [dfWhoInsert] = @dfWhoInsert, [dfWhoModify] = @dfWhoModify, [dateInsert] = @dateInsert, [dateModify] = @dateModify, [dfApproval] = @dfApproval WHERE [defineID] = @defineID"> <DeleteParameters> <asp:Parameter Name="defineID" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="dfWordID" Type="String" /> <asp:Parameter Name="language" Type="String" /> <asp:Parameter Name="definitions" Type="String" /> <asp:Parameter Name="usage" Type="String" /> <asp:Parameter Name="dfWhoInsert" Type="String" /> <asp:Parameter Name="dfWhoModify" Type="String" /> <asp:Parameter Name="dateInsert" Type="DateTime" /> <asp:Parameter Name="dateModify" Type="DateTime" /> <asp:Parameter Name="dfApproval" Type="Boolean" /> </InsertParameters> <SelectParameters> <asp:ControlParameter ControlID="dtlLusHmoob" Name="dfWordID" PropertyName="SelectedValue" /> </SelectParameters> <UpdateParameters> <asp:Parameter Name="dfWordID" Type="String" /> <asp:Parameter Name="language" Type="String" /> <asp:Parameter Name="definitions" Type="String" /> <asp:Parameter Name="usage" Type="String" /> <asp:Parameter Name="dfWhoInsert" Type="String" /> <asp:Parameter Name="dfWhoModify" Type="String" /> <asp:Parameter Name="dateInsert" Type="DateTime" /> <asp:Parameter Name="dateModify" Type="DateTime" /> <asp:Parameter Name="dfApproval" Type="Boolean" /> <asp:Parameter Name="defineID" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> <asp:ListView ID="ltvWord" runat="server" DataSourceID="sqlWord" InsertItemPosition="FirstItem"> <ItemTemplate> <div id="word"> <asp:HiddenField ID="hdfWordIDItem" runat="server" Value='<%# Eval("wordID") %>' /> Word: <asp:Label ID="lblWord" runat="server" Text='<%# Eval("word") %>' /><br /> Who Insert: <asp:Label ID="lblWhoInsert" runat="server" Text='<%# getWho(Eval("whoInsert").ToString()) %>' /><br /> Who Modify: <asp:Label ID="lblWhoMod" runat="server" Text='<%# getWho(Eval("whoModify").ToString()) %>' /><br /> Originate: <asp:Label ID="lblOrigin" runat="server" Text='<%# Eval("originate") %>' /><br /> Date Insert: <asp:Label ID="lblInsertDate" runat="server" Text='<%# Eval("insertDate", "{0:M/d/yy h:mm tt}") %>' /><br /> Date Modify: <asp:Label ID="lblModDate" runat="server" Text='<%# Eval("modDate", "{0:M/d/yy h:mm tt}") %>' /><br /> <%--Starts of the nested ListView for the definition--%> <asp:ListView ID="ltvDefinition" runat="server" DataKeyNames="defineID" DataSourceID="sqlDefinition" InsertItemPosition="LastItem"> <AlternatingItemTemplate> <div id="definitions"> <asp:HiddenField ID="hdfWordIDItem" runat="server" Value='<%# Eval("dfWordID") %>' /> Definition: <asp:Label ID="lblWord" runat="server" Text='<%# Eval("definitions") %>' /><br /> Who Insert: <asp:Label ID="lblWhoInsert" runat="server" Text='<%# getWho(Eval("dfWhoInsert").ToString()) %>' /><br /> Who Modify: <asp:Label ID="lblWhoMod" runat="server" Text='<%# getWho(Eval("dfWhoModify").ToString()) %>' /><br /> Originate: <asp:Label ID="lblOrigin" runat="server" Text='<%# Eval("usage") %>' /><br /> Date Insert: <asp:Label ID="lblInsertDate" runat="server" Text='<%# Eval("dateInsert", "{0:M/d/yy h:mm tt}") %>' /><br /> Date Modify: <asp:Label ID="lblModDate" runat="server" Text='<%# Eval("dateModify", "{0:M/d/yy h:mm tt}") %>' /><br /> </div> </AlternatingItemTemplate> <EditItemTemplate> <span style="background-color: #008A8C; color: #FFFFFF;"> <asp:TextBox ID="txtWord" runat="server" Text='<%# Bind("word") %>' TextMode="MultiLine" /> <br /> <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" /> <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" /><br /> <br /> </span> </EditItemTemplate> <EmptyDataTemplate> <span>No data was returned.</span> </EmptyDataTemplate> <InsertItemTemplate> <div id="definitionDiv"> <asp:HiddenField ID="hdfInsWordID" runat="server" Value='<%# Bind("dfWordID") %>' /> <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="txtInsertDefinition" WatermarkText="Please enter your definition" WatermarkCssClass="waterMarkTextResponse"> </asp:TextBoxWatermarkExtender> <%--DO NOT CHANGE THE ORDER OF THE FOLLOWING CONTROLS (TEXTBOX="txtInsertDefinition" AND DIV ID="commands") OR JQUERY WILL NOT WORK!! --%> <asp:TextBox ID="txtInsertDefinition" AutoPostBack="false" CssClass="expanding" runat="server" Width="300px" Text='<%# Bind("definitions") %>' TextMode="MultiLine" /> <div id="commands" style="display: none;" runat="server"> <table cellpadding="0" cellspacing="0" width="300px" id="tblCommands"> <tr> <td style="width: 50%; text-align: center;"> <asp:LinkButton CssClass="submitComments" ID="lnbInsertRes" runat="server" CommandName="Insert" Font-Underline="false">Insert</asp:LinkButton> </td> <td style="width: 50%; text-align: center;"> <asp:LinkButton CssClass="submitComments" ID="lnbCancelRes" runat="server" CommandName="Cancel" Font-Underline="false">Cancel</asp:LinkButton> </td> </tr> </table> </div> <%--DO NOT CHANGE THE ORDER OF THE CONTROLS (TEXTBOX="txtInsertComments" AND DIV ID="commands") ABOVE OR JQUERY WILL NOT WORK --%> </div> </InsertItemTemplate> <ItemTemplate> <div id="definitions"> <asp:HiddenField ID="hdfWordIDItem" runat="server" Value='<%# Eval("dfWordID") %>' /> Definition: <asp:Label ID="lblWord" runat="server" Text='<%# Eval("definitions") %>' /><br /> Who Insert: <asp:Label ID="lblWhoInsert" runat="server" Text='<%# getWho(Eval("dfWhoInsert").ToString()) %>' /><br /> Who Modify: <asp:Label ID="lblWhoMod" runat="server" Text='<%# getWho(Eval("dfWhoModify").ToString()) %>' /><br /> Originate: <asp:Label ID="lblOrigin" runat="server" Text='<%# Eval("usage") %>' /><br /> Date Insert: <asp:Label ID="lblInsertDate" runat="server" Text='<%# Eval("dateInsert", "{0:M/d/yy h:mm tt}") %>' /><br /> Date Modify: <asp:Label ID="lblModDate" runat="server" Text='<%# Eval("dateModify", "{0:M/d/yy h:mm tt}") %>' /><br /> </div> <asp:Button ID="btnEdit" runat="server" CommandName="Edit" Text="Edit" /> <asp:Button ID="btnDelete" runat="server" CommandName="Delete" Text="Delete" /> </ItemTemplate> <LayoutTemplate> <div id="itemPlaceholderContainer" runat="server" style=""> <span runat="server" id="itemPlaceholder" /> </div> <div style=""> <asp:DataPager ID="DataPager1" runat="server"> <Fields> <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" /> </Fields> </asp:DataPager> </div> </LayoutTemplate> <SelectedItemTemplate> <div id="Definitions"> <asp:Label ID="lblDefinition" runat="server" Text='<%# Eval("definitions") %>' /><br /> <asp:Label ID="lblDateIns" runat="server" Text='<%# Eval("dateInsert") %>' /><br /> <asp:LinkButton ID="lkbDelete" runat="server" CommandName="Delete">Delete</asp:LinkButton> </div> </SelectedItemTemplate> </asp:ListView> <%--End of the nested ListView for the definition--%> <asp:Button ID="btnEdit" runat="server" CommandName="Edit" Text="Edit" /> <asp:Button ID="btnDelete" runat="server" CommandName="Delete" Text="Delete" /> </div> </ItemTemplate> <insertitemtemplate> </insertitemtemplate> <edititemtemplate> <span style="background-color: #008A8C; color: #FFFFFF;"> <asp:TextBox ID="txtWord" runat="server" Text='<%# Bind("word") %>' TextMode="MultiLine" /> <br /> <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" /> <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" /><br /> <br /> </span> </edititemtemplate> <layouttemplate> <div id="itemPlaceholderContainer" runat="server" style="font-family: Verdana, Arial, Helvetica, sans-serif;"> <span id="itemPlaceholder" runat="server" /> </div> <%--<div style="text-align: center; background-color: #CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;"> </div>--%> </layouttemplate> <selecteditemtemplate> <asp:HiddenField ID="hdfWordID" runat="server" Value='<%# Eval("wordID") %>' /> <asp:Label ID="lblWordSel" runat="server" Text='<%# Eval("word") %>' /><br /> <asp:Label ID="lblWhoInsertSel" runat="server" Text='<%# Eval("whoInsert") %>' /><br /> <asp:Label ID="lblWhoModSel" runat="server" Text='<%# Eval("whoModify") %>' /><br /> <asp:Label ID="lblOriginSel" runat="server" Text='<%# Eval("originate") %>' /><br /> <asp:Label ID="lblInsertDateSel" runat="server" Text='<%# Eval("insertDate", "{0:M/d/yy h:mm tt}") %>' /><br /> <asp:Label ID="lblModDateSel" runat="server" Text='<%# Eval("modDate", "{0:M/d/yy h:mm tt}") %>' /><br /> </selecteditemtemplate> </asp:ListView> </div> </ContentTemplate> </asp:UpdatePanel>This is the textbox (txtInsertDefinition) that I'm trying to access and customized. It does not seem to work at the moment.asteranup
All-Star
30184 Points
4906 Posts
Re: Textbox expand when focused
Mar 09, 2011 03:27 AM|LINK
Hi,
You can do this easily.
By using class-
Add a unique class to the text box like cssClassForTextboxHover and use like below-
$(".cssClassForTextboxHover ").hover(.......);By using attribute selector-
$("input[type=text][id*=txtInsertDefinition]").hover(........);And for the draggable height- I need to check.Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
asteranup
All-Star
30184 Points
4906 Posts
Re: Textbox expand when focused
Mar 09, 2011 03:40 AM|LINK
Hi,
Wel, for resizing you can use jQuery UI. See the below code-
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $("input[type=text][id*=textBox]").resizable(); }); </script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="textBox" runat="server" style="height:20px"></asp:TextBox> </form> </body> </html>I will advice you not to use the previous hover with resizable. Otherwise the resizable behaviour will get disturbed.Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog