Dynamically Resizing TextArea - Jerky And "bounce" When Adding Or Removing Lines
May 23, 2010
This is a two-fold question:
1. first I have a link for something that works but I want to work better:
[url]
The dynamically resizing textarea boxes are in light orange. They work, but they are rather jerky and you see some "bounce" when adding or removing lines -unlike Face Book which doesn't do this. Can anyone propose a better coding system that is smoother AND less processor intensive?
2. If you really do UNDERSTAND javascript at the programmatic level I'd be interested in having you work regularly for me, but I think I might need to post that in another forum. I'm a PHP programmer, and because I don't understand the JS Kernel and how it thinks, I'm always chasing my tail on it.
I have the following requirement for a textarea:Limit the number of lines to 8 Limit the number of characters to 20 per line Force a line beak when the user reaches he end of a line but break the line at the start of the last word (not half way through the word).Allow pasting into the field and auto-format the line/character countKeep he cursor where it should be (don't move it to the end of the field after any formatting)
Is there any way of counting, on the onkeyup event of a textarea, the number of lines? I tried with a split, but the wrap doesn't seem to insert any char I could split on?
I have made a table with a textarea that is resizable. The problem is that when it resizes, it also resizes the table row and columns. Is there a way to fix this? Maybe a way to resize from the right side and bottom of the textarea only.
function myMax(anumber, another) { if (anumber > another) { return anumber; } return another; }
function resizeTextArea(t,minCols,minRows) { var lines = 0; if (t.getAttribute("cols") == null) t.setAttribute("cols",minCols); if (t.getAttribute("rows") == null) t.setAttribute("rows",minRows); textLine = t.value.split(" ");
// get lines of textbox lines = t.value.split(" ").length;
// get longest row of textbox. var max = 0;
for (i=0;i < textLine.length;i++) { if (parseInt(textLine[i].length) > parseInt(t.getAttribute("cols"))) { lines += Math.floor(parseInt(textLine[i].length) / parseInt(t.getAttribute("cols"))) ; } } t.setAttribute("rows",myMax(lines+1,minRows)); }
In Firefox this works really fine! But in IE the text area grows very strange. If I add a line, after a while there seems to be a problem with spacing.
I have a script that limit characters and lines entered by users in a textarea.. I want instead of throwing that alert message to jump to the next line and the user can continue writing, here is the script:
<script type="text/javascript"> var alert_title='Input Restriction'; function limitTextarea(el,maxLines,maxChar){ if(!el.x){ el.x=uniqueInt(); el.onblur=function(){clearInterval(window['int'+el.x])} }window['int'+el.x]=setInterval(function(){ var lines=el.value.replace(/ /g,'').split(' .....
The HTML <textarea onFocus="limitTextarea(this,5,40)" wrap="soft">
I have a textarea with a specific width. I have wrap="off" set because I don't want to force my users to wrap if they don't want to. The reason for this is because this textarea is where the user is typing an email message. However I have a background image set on the textarea with a verticle line going down the textarea which indicates to the user the "Recommend Width"What I want to do is provide them with a link to click on which says something like "Wrap Lines" and when they click on it, the text within the textarea would wrap to the "Recommended Width" line in the background image. The maximum length of a line should be 53 characters when they click on "Wrap Lines" link.So I did some searching around and the code I came up with is:
Code: function showLines(max, text) { max--; text = "" + text; var temp = ""; var chcount = 0;
I have a dropdownbox with values. When the user selects a value and presses the button [add], this value is added to the textareabox. Now I like to create a function that will remove the selected value from the same dropdownbox from the textareabox when the user presses a button [remove]. Currently I check if the textareabox is empty and set the value from the dropdown to the textareabox. If it is not empty, it will add the value + a linebreak ( )
Example: <Select name="A"> <option value="" selected>select</option> <option value="123, xy; ">123, xy</option> (notice the space at the end after the [;] !)
if it's possible to re-size a div vertically based on the size of another div.I have this code but it's malfunctioning. Basically it takes the ID of the two divs and offset their height.
Example: The dynamic div will stretch or re-size vertically based on the size of the content div. So if the contents in the content div is increased, like text size, the the other div stretch to give equal height.Here is my code:
Code: <script type="text/javascript"> <!-- function equalize() {[code].....
I want to be able to add row at the end of the table with a 'remove' link which will remove specific row. The code I've managed to write so far:
$(document).ready(function() { $("#add_item").click(function () { var html = "<tr id='item_" + item_id + "' class='item'><td><a
[code]....
The problem is it wont instert the row at the proper place (after the last .item (class) and the remove link wont work for the last row in the table/list.
I have a number of DIVs that I want to make 'selectable' on click, which means that I give the DIV you click on a class (just to show it's selected) and save its ID into an array. When I click on that DIV again, the class should be removed and its ID should be removed from the array as well. My code goes like
var selected_items = new Array(); $(".selectableDivs").click(function() { if($(this).hasClass("selected")) {
[code]....
But the alert at the end of the code always shows my a list of all divs I ever selected, even those that I unselected again. The IDs are just not removed from the array. Is that maybe because items saved in the array are not exactly $(this).attr("id") anymore?
I'm trying to make a form that will generate some code for game based on what they fill out. The code will be a modification menu of sorts. They will be able to name the menus and submenus and add or remove them if they want. I will need a way to get the information they filled in for each specific menu form, so I figure giving them each a unique id would do the trick. I'm sure there is a MUCH better way to do this, but here's what I have so far:
I have been doing research on parent object nodes & child nodes. I have a small problem with the code I made. What I need for it to do is depending on which link u click, it adds or deletes the node specified in the function. And the name of the div shouldnt matter as it should be used when clicking on the link <a href="javascript:addevent('divname');">Add Element</a>.
for instance:
"Add element" | "Delete element"
if u click on the add element, then it adds an element, and if u click on the delete element, then it deletes the added element.
Here is the code:
<!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>
This code was working originally. Then I had made some modifications and things weren't going right so I went back to how it was originally, and now it's not working!What this does is add a file text box when you click a button & then remove it when you click on its link. I get an error though when I click the Remove link saying that its argument is invalid. I don't understand why since its the exact same line of code the Add button has except assigned to a new variable.
This is the line that's coming up with the error: var d = document.getElementById('addToDiv'); in the removeAdditionalFile function. The error message says 'Invalid Argument'.
Here's the javascript:
function addFileTextbox() { var a = document.getElementById('addToDiv'); var b = document.getElementById('theValue');
I'm building an application where the user can add Questions. For each Question they can add x answers or remove them (see screenshot). I can add questions and add/remove answers, For each question that is added I update the 'gameQuestions' variable with 1; The same goes for answers that I add: for each added answer I update the 'counter' variable with 1. When I remove an answer, the app. doesn't know how many answers each question has, it simply decreases the "counter" variable. So when I remove the 2nd question, it doesn't know how many answers that 2nd question has! How can I store the number of answers per question and how do I remove them correctly?
Here's my code so far: $(document).ready(function(){ var gameQuestions = 1; var counter = 1; // Add a New Question... $(".addQuestion").click(function() { var question = "<table id='questionSet"+gameQuestions+"' class='form-table' style='background-color:#cccccc; width=100%;'>"; .....
I have a list of text-snippets which should be inserted into a textarea, separated by a comma. When I click the same text-snipped again, it should be removed from the textarea. I managed to to implement the "inserting" with the following code,
I am creating textboxes dynamically using the following code:
[Code]...
I want to have a function that will remove textboxes and the newline that is created. I have the following function to remove the text boxes but I cant remove the new lines that were created so an empty space is left on the page.function RemoveElement() {
var d = document.getElementById('spanManualInput'); var oldbox = document.getElementById('Value'+i); d.removeChild(oldbox); d.removeChild('br'); }
function quickadd() { $('.menu').addClass('red').delay(1000).removeClass('red'); }
So, from what I've gathered from the docs, this doesn't work because the addClass and removeClass functions don't observe the queue. How could I get around this and setup a function that will add a class, wait a second, then remove that class? Would it require me to go outside of jQuery a bit and use some standard JS?
I would like to have two columns, the left column showing all available items with an add button. The right column showing all of the added items, and then adding these together to provide an order total, but with the ability for users to add to the quantity or remove from their order.I have the add item to order bit working on, and the sub-total is working.I started to try to add on add/remove buttons to the right #your-order column but am getting stuck.Every time a user adds another item to their order, more buttons are added, and I can't get the "remove item" button working.The page is located here:URL...Should I paste the jQuery code I am using here?
I have a lot of information on my site that is in multiple categories. I have a list of categories, each with its own checkbox. By default, all the information is displayed (therefore all the checkbox's are checked by default).When someone unchecks the box I want to hide the divs with that class, and when someone rechecks the box, they should reappear. Here is my code so far. It is hiding the div's fine, but they are not reappearing when user tics the checkbox again.
<script type="text/javascript"> function toggledisplay(category){ if(document.getElementById(category).checked){
I've been learning a lot about jscript and PHP while I've been building my site...now I'm curious about using a little ajax. I have an internal email setup on my site where users can contact one-another...when you click on Inbox, Sent, Drafts, ect it calls a php script and reloads the page. I'm considering for my next release, doing this with jscript but my question is this...
When I print info to the page that I'm on, how hard is it to get rid of the old data that was there? This might be the easiest thing in the world but i don't even know what to call this on google. Also, if that's the norm, how hard is it to add data to a page with out getting rid of whats already there? I've been reading about ajax and I've been using jscripts to check my forms and do simple things but I'm really interested in learning what I really have the power to do here...
I have just got myself a copy of SWFUpload to show the progress of file uploads, however, it has a few problems, one of which I am trying to fix with the aid of jQuery. Essentially, if JavaScript doesn't load, then a standard input file element will be shown. But, if JavaScript is enabled, then jQuery removes this, and replaces it with all of the input elements that SWFUpload requires. Is this the best way of doing it, or should I be looking at another option? If so, how would I go about telling jQuery to remove and insert the form field, and each and every attribute the HTML will require?
