I have a textarea which is dynamicly changed in c# by doing this:
TextBox1.Text=(String)Application["chat"];
When the text is to big for the textarea, I would like the scroll to always be on the bottom. I have tried to do this in JS(jquery) with the change event.
$("#TextBox1").change(function () {
alert("alert");
// $('#TextBox1').scrollTop($('#TextBox1')[0].scrollHeight);
});
This is the code I use in Javascript. The problem is that the event does not occur, even if the text in the textarea is changed, which I have proven by debuging it with the alert which does not execute.
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Regarding this issue of your event not firing: If this is ASP.NET webforms, it's unlikely that the client-side id of your textbox (input) is TextBox1.
View source on the generated page and check what the ID renders as and update you JS accordingly.
You sould use this code to scroll down the textarea to the bottom:
$("#TextBox1").scrollTop($("#TextBox1").height());
If you would like to scroll down, when it's content changes, use this:
$("#TextBox1").change(function(){
$(this).scrollTop($(this).height());
});
Related
I a have a web form with few textboxes,dropdowns and finally towards the end of the page is 4 custom ajax editors. So on page load the focus is always inside the last editor and no way it comes to the first text box or top of page.On each page load the cursor goes inside the last editor control.How to bring the focus inside the first text box?
Below are the few methods i tried
1.<body onload="document.body.scrollTop = 0;">
2. void Page_Init(object sender, EventArgs e)
{
SetFocus(txtReqtitle);
}
for the above while loading the page i could see the focus goes to the desired text box and then it comes to the last custom control.
3. if(!Page.ClientScript.IsStartupScriptRegistered("scrFocus"))
{
string strScript="var txtBox=document.getElementById('" + txtReqtitle.ClientID.ToString() +"');txtBox.focus();";
ClientScript.RegisterStartupScript(this.GetType(),"scrFocus", strScript,true);
}
4.
function setFocus() {
document.getElementById("txtReqtitle").focus();
}
5. ScriptManager.GetCurrent(this.Page).SetFocus(txtReqtitle);
Any ideas? Thanks..
Seems focus property is not working in load event because of ajax editors
Please add txtReqtitle.Focus() in Page Prerendercomplete() event and let me know whether it works
found the solution which worked for me .would like to share it .. its simple ..just make the autofocus=false for the control.
using jquery
$(document).ready(function(){
$('#<%= txtReqtitle.ClientID %>').focus();
});
I have a form in asp.net webpage which contains 2 drop down lists and a hyperlink + a button.
I want that if user changes an option is dropdowns to change navigate url.
I have done like so:
<asp:DropDownList ID="ddlPackages" AutoPostBack ="true" runat="server"
onselectedindexchanged="ddlPackages_SelectedIndexChanged"></asp:DropDownList>
and then I have the method defined.
The point is that I don't want to make a submit when I change the drop down. Can I do it using only aspx or I have to use javascript?
If I understand you correctly you want to change the href of the hyperlink based on the selected value of the dropdown. You can do this with javascript. Make sure you have AutoPostBack="false" and remove the OnSelectedIndexChanged attribute as well.
To do it using jQuery, use something like this:
<script type="text/javascript>
$(function(){
var $dropdown = $('#<%= ddlPackages.ClientId %>');
$dropdown.change(function(){
//Put logic to decide the link here based on the select value
var newPage = 'page' + $dropdown.val() + '.aspx';
$('#linkId').attr('href', newPage);
});
});
</script>
Edit:
In case you absolutely must have the logic for getting the new url based on the drop down value on the server side, you can turn the method into a Page Method and call it using ajax from the jQuery script above. But you can probably get away with creating the javascript dynamically in the aspx page instead.
I see two options:
1) Wrap the controls in an Update Panel (.NET 3+). Put AutoPostBack=true on the dropdownlist, and define a SelectedIndexChange event for it that changes the hyperlink control's Navigate URL property. When the user changes the dropdown, you're method will fire without the APPEARANCE of a form submission. Downside: there's a slight delay between the dropdown changing and the link changing. If your server is really, really slow, this delay could potentially cause problems (but this is probably unlikely).
2) Use custom JavaScript and do away with your .NET controls completely. This is what I would probably do, assuming you don't need to do anything else with these controls programatically. Your JavaScript function would monitor the dropdown for a SelectedINdexChange and adjust the href attribute of the anchor tag accordingly. Look into jQuery to speed up development if you aren't too familiar with plain JavaScript.
If the control is an ASP:DropDownList, you can use the AutoPostBack="True|False" property to prevent a postback
If you don't want to use the AutoPostBack you have to post the form using jQuery or Javascript
You can add an event on your drop down list onchange and add the code you need to post the form usin jQuery:
$('#formId').submit();
http://api.jquery.com/submit/
If you to want navigate to another Url add the below code at your DropDownList control (make sure AutoPostBack=false)
onchange="window.location.href='yourUrl'"
it would be better put that Javascript on a separate file anyway
I am currently making a asp.net form that will have a Copyright bar at the bottom of the page. I have a panel, which has a width of 100%, at the bottom of the page. I want that to be always visible while people are scroll through the website, but as soon as I add the AJAX ALwaysVisibleExtender control to the panel, it resizes the panel to a small box.
How can I modify the AJAX AlwaysVisibleExtender to keep the original format and at the same time stay on top of my content. I tried adding stuff like style="width:100%" and all sorts of HTML coding, but it doesn't seem to help. It errors out all the time.
Thank you
I'd suggest possibly using some javascript to keep the box the full width of the page (ideally using something like jQuery)
Without seeing what your code looks like, it's hard to know completely, but perhaps add something like this as a script
$(document).ready(function () {
$(window).resize(function() {
$('#<%= pnlCopyrightBar.ClientID %>').width($(document).width()));
});
$('#<%= pnlCopyrightBar.ClientID %>').width($(document).width());
});
Wondering if there is a way upon clicking on a hyper link to set drop downlist to visible in code behind or asp?
<asp:HyperLink ID="HyperLink2" runat="server">View More Workout Programs »</asp:HyperLink>
If you have to do it in code-behind, then use a LinkButton instead of a HyperLink. Then it will have a click event just like any button and in that click event you can set the other element to .Visible=true.
However, does this need to be done in code-behind? Keep in mind the difference in "visibility" between server-side and client-side code:
If set to .Visible=false on the server-side, the content is not delivered to the client at all.
If set to display:none on the client-side, the content is present and can be viewed in the page source, it's just not displayed by the browser.
In some cases, the former is needed for security purposes. But if it's just a matter of user experience then I would recommend showing/hiding the content entirely on the client-side so as to avoid post-backs that do nothing more than change element display properties.
For example (assuming jQuery):
<a id="toggler" href="#">Show the content</a>
<div id="hidden" style="display:none;">Content</div>
<script>
$(document).ready(function(){
$("#toggler").click(function(){
$("#hidden").show();
});
});
</script>
Use an asp:LinkButton instead of a hyperlink and handle the OnClick event. In the OnClick event, toggle myDropDownList.Visible depending on whether you want to show it or not.
You should implement that kind of feature in the client (javascript code) to improve user experience.
Anyway, you can use a Panel with Visibility=false and put Visibility=true in code behind when link is clicked. You would need to adjust the position of that panel with css to look like a dropdown.
You can try with JQuery : http://www.jquery.com
It will be something like
<script type="text/javascript">
$(document).ready(function(){
$("#<% =HyperLink2.ClientID %>").click(function() {
$("#<% =DropDownList1.ClientID %>").toggle();
});
});
</script>
If you need to send form back to the server, use asp:LinkButton instead and handle OnClick event on the server side. If you need to show drop down list on the client side, use javascript function with onclick client event to show or hide any section you want.
I got this Text box with default value as "First Name" ..Now when I click inside this text box to enter name , this value "First Name" keeps on displaying. What I want is to the text box to clear as soon as I click inside it. What property do I need to set in mt textbox tag ?
[Edit]
ok anything from Telerik that I can use to do that ?
There is not out of the box functionality in TextBox that will accomplish this, but the ASP.Net Ajax Toolkit has a Watermark Extender that will do everything you want.
I have used both, but now personally use a jQuery Watermark Plugin
Either will work just fine, choose based on your needs.
According to the Telerik docs you just have to set the EmptyMessage property on their TextBox control. Demo Page Here
In the code behind, on Page Load you can add the following code to achieve this
TextBox1.Attributes.Add("onClick", "javascript:if(this.value=='First Name'){this.value='';}");
You can use the method suggested by #Josh. If you do not want to use Ajax Toolkit controls or JQuery you could write it on your own using Javascript. Write a function which gets called when the foucs is received by the textbox control. I thik the function is called onfocus or just focus in Javascript.
Hi I just wrote this small function which will achieve your desired result
function clearInputBox(x,prefil){
if(x.value == prefil){
x.value = '';
}
}
Your input box looks like this
<input type='text' value='First Name' onfocus="clearInputBox(this,'First Name')" />
May be this will help you
Taking Shobans advice one step farther, you could add something like this to your Page subclass
protected override void OnInitComplete(EventArgs e)
{
string jsString = "javascript:if(this.value=='" + TextBox1.Text + "'){this.value='';}";
TextBox1.Attributes.Add("onFocus", jsString);
base.OnInitComplete(e);
}
What this will do is, it will always consider that default string is the one this controll contains at esign time (the initial one in your .aspx file), so you wont have to manually change it in codebehind every time you change your .aspx. Remember, that OnIinitComplete fires before any viewstate or postback data has been applied, but after the controlls on your page have been set to their default values.
P.S. As anishMarokey pointed, use onFocus vs onClick, since fields can gain focus without clicks via Tab key.