In my ASP.NET page I have a text box which shows data which is bind to an (JavaScript) object variable.
I want that textbox to resize everytime, the JavaScript object, e.g. result.title will change everytime.
Important:
I want to fit the textbox exactly to the text length inside.
Here is a great tutorial that teaches you how to make a jQuery plugin to do exactly what your talking about.
You could use onChange:
<textarea onChange="resize(this)"></textarea>
<script>
function resize(el) {
el.cols = el.value.length;
}
</scrip>
Btw are you using Ajax?
Here's a jQuery plug-in: http://www.unwrongest.com/projects/elastic/
Related
I have a c#.net web app which has multiple asp:textbox fields. I want to be able to change the background colour or text colour of the text within this boxes but only a specific range so for example the first 200 characters are to be red, the remaining characters should be green.
I am aware you can't control the content of a asp:textbox field but I am using ASPNetSpell to perform inline spell checking on all boxes and this renders the field as a asp:textbox.
Does anyone have any idea how I can achieve this functionality: ability to format partial content within a field and apply a spell checker? I am open to any suggestions.
Any and all help greatly appreciated.
Laura
It looks like the ASPNetSpell textbox is rendered as a div so you should be able to format the text using jQuery. Here is a way you can do this:
$(document).ready(function () {
$("#aspnetspellbutton").bind("click", function(eventData) {
var textfrominputelement = $("#yourinputelementid").text().substr(0, 200);
textfrominputelement.fontcolor("Red");
});
});
Basically, your binding the aspnetspellbutton click event to the jQuery function and then assigning the first 200 characters of text from the aspnetspell textbox and then changing the color of that text to Red.
This is a terse example. Depending on your requirements it could be a little more complicated. Script Junkie is a great resource for jQuery if your new to it.
You need something like a RichTextBox control. Check this out as well, those could be your solution. Good luck!
Hai to all,
How can i give alert message with ok and cancel button within dataset function.if ok procced further else return in asp.net .......pls help
You can't show a client-sided message-box without using client-sided script.
It isn't possible. Both a standard browser alert window and a lightboxed one require JavaScript to display.
If you don't want to handcode the JavaScript, you can use the ASP.NET Ajaxtoolkit (http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx) which contains a ModelPopup control that handles it for you.
Add an "onclick" attribute to the object.
Page_load(){
object.Attributes.Add("onclick", "javascript:confirm('Are you sure')");
}
something like that.
You could use basic html to create a page that only has a small form in the centre of the page.
This would eliminate javascript.
I'm generating a table of content in an ASP.NET page and I want to add client side OnClick actions to each cell (the action should be to set the value of a named TextBox control to the text in the clicked cell). If I could directly add stuff to the HTML output, I think I could do this with a single line of JavaScript in each cell.
Given that I'me not now using JQuery (and never have before), what is the simplest solution to adding this (including the time spent learning stuff)?
Edit: this seems to work
If you are creating your table programmatically, using HtmlControls, you can set the onclick client attribute of the HtmlTableCell:
HtmlTableCell cell = new HtmlTableCell();
cell.Attributes.Add("onclick", "someFunction();");
However, if you're using jQuery you can do something like this:
$('td').click(function(){ // Select all the table cells on the document.
$(this).html($('#textboxId').val()); // When clicked, change the innerHTML
}); // with a textbox value.
it depends how you're generating that table of content.
If bulding up using a table control, you can add JavaScript to TableCell controls using the Attributes.Add() method.
If building up with the GridView, you can add JavaScript when the RowDataBound event is raised
You should give each cell a css class... class="contentsCell"
You can then add the following script to your head tag (along with a jquery include)
$(document).ready(function(){
$(".contentsCell").click(function(){
CallYourFunction();
})
})
Where CallYourFunction() is you own function...
This will basically attach an
onclick=" CallYourFunction();"
to each td cell (or any other element) with the class "contentsCell"
Also, if you want to grab the text inside the cell, something like:
$(document).ready(function(){
$(".contentsCell").click(function(){
var mytext = $(this).text();
CallYourFunction(mytext);
});
});
Check out visualjquery.com for a great reference for jquery
Well, your question is kind of difficult to follow, but I'll give you a few pointers.
Each control has a ClientID property. This is useful for injecting into your javascript so you know the client side id of the control.
jQuery syntax for putting text into a textbox would be like the following:
$("#" + clientId).attr("value", theValue);
and the jQuery syntax for getting text from a cell would be:
$("#" + cellId).html()
Using the viewer control for display of SQL Reporting Services reports on web page (Microsoft.ReportViewer.WebForms), can you move the View Report button? It defaults to the very right side of the report, which means you have to scroll all the way across before the button is visible. Not a problem for reports that fit the window width, but on very wide reports that is quickly an issue.
No, you cannot reposition the view report button in the ReportViewer control.
However, you could create your own custom report viewing control. The control would be comprised of fields for report parameters and a button to generate the report. When a user clicks the button you could generate the report in the background. You could display the report as a PDF, HTML, etc.
It's kind of a hack, but you can move it in JavaScript. Just see what HTML the ReportViewer generates, and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we wanted our own View Report button). Any JavaScript code that manipulates the generated ReportViewer's HTML must come after the ReportViewer control in the .aspx page. Here's my code for hiding the button, to give you an idea of what you'd do:
function getRepViewBtn() {
return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}
function hideViewReportButton() { // call this where needed
var btn = getRepViewBtn();
btn.style.display = 'none';
}
The reason the button is pushed over to the right is that the td for the parameters has width="100%". I'm solving this problem with the following jquery. It simply changes the width of the parameters td to 1. Browsers will expand the width on their own to the width of the contents of the element. Hope this helps.
<script type="text/javascript">
$(document).ready(function() {
$("#<%= ReportViewer1.ClientID %> td:first").attr("width", "1");
});
</script>
Since I was searching for this answer just yesterday, I thought I'd post what I came up with to solve our problem. Our reports were coming back wide, and we wanted the "view reports" button to exist on the left side of the control so there was no need to scroll to get to the button. I did need to go into the source of the rendered file to find the ID names of the button and the target table.
I wrote a simple cut and paste javascript function to pull the button from its original position and essentially drop it into the next row in the containing table below the date pickers.
function moveButton() {
document.getElementById('ParameterTable_ctl00_MainContent_MyReports_ctl04').appendChild(document.getElementById('ctl00_MainContent_MyReports_ctl04_ctl00'));
}
This function gets called on the report viewer load event.
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "moveButton", "moveButton();", True)
To adjust the position, I used the CSS ID.
#ctl00_MainContent_MyReports_ctl04_ctl00 {
margin: 0px 0px 0px 50px;
}
I had the same problem and ended up using an extension on Travis Collins answer; As well as changing the table column width I also align the "View Report" button left so that it appears neearer to rest of the controls.
<script type="text/javascript">
$(document).ready(function() {
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1");
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left");
});
</script>
You may need to tweak the JQuery selector depending on the element naming assigned to your existing control.
I am using the example on the AJAX website for the DropDownExtender. I'm looking to make the target control (the label) have the DropDown image appear always, instead of just when I hover over it.
Is there any way to do this?
This can be done using the following script tag:
<script>
function pageLoad()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
$find('TextBox1_DropDownExtender').unhover = VisibleMe;
}
function VisibleMe()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
}
</script>
I found this and some other tips at this dot net curry example.
It works but I'd also consider writing a new control based on the drop down extender exposing a property to set the behaviour you want on or off.
Writing a new AJAX control isn't too hard, more fiddly than anything.