JavaScript - Textarea Scrolls With The Page
Is there anyway to make a text area scroll down with the page?
Code: <textarea name = "scrollBox" rows = "1" cols = "10">A B C D </textarea> Similar TutorialsHi, Can anyone please tell me that " how to write a JavaScript function to pop up an alert() if a user scrolls down the webpage faster than a certain speed" Looking forward for a urgent reply Thanks So it took me forever but I finally found a floating menu that works with a horizontally scrolling page - but of course, there's still a little bug. View the page he http://uconn.kappaphilambda.org/sisters.shtml As you can see, the more you scroll right, the more the menu "compacts" itself, eventually disappearing altogether. Any ideas as to how to fix it? You can view the code & script codes by viewing the source of the page. Thanks in advance :] I've been handed an html document that contains a centered, scrollable <iframe> element with a static height and width. This iframe element displays a simple html document that houses the 'terms of service' text. Their goal is to have it to where the <a href> link at the bottom that is shown to the user as 'next' is disabled until the user scrolls to the bottom of the terms of agreement box. The clickable link could be a button, image or text (no preference). They have to have it this way for legal reasons and radio buttons or checkboxes will not suffice unfortunately. Question: What is the best way to go about doing this that seems to be cross-browser friendly (especially IE7). I offer $10 via paypal for well commented method/script. hi guys, i am using this script (jquery) to resize textareas when a user enters text. it works well. in the management system im writing i would like to also resize all textareas so that all text is visible when forms load i.e. a user loads a form with textareas on and all the text is visible when they read the contents Code: /* * jQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04 */ (function($){ $.fn.autoResize = function(options) { // Just some abstracted details, // to make plugin users happy: var settings = $.extend({ onResize : function(){}, animate : true, animateDuration : 150, animateCallback : function(){}, extraSpace : 20, limit: 1000 }, options); // Only textarea's auto-resize: this.filter('textarea').each(function(){ // Get rid of scrollbars and disable WebKit resizing: var textarea = $(this).css({resize:'none','overflow-y':'hidden'}), // Cache original height, for use later: origHeight = textarea.height(), // Need clone of textarea, hidden off screen: clone = (function(){ // Properties which may effect space taken up by chracters: var props = ['height','width','lineHeight','textDecoration','letterSpacing'], propOb = {}; // Create object of styles to apply: $.each(props, function(i, prop){ propOb[prop] = textarea.css(prop); }); // Clone the actual textarea removing unique properties // and insert before original textarea: return textarea.clone().removeAttr('id').removeAttr('name').css({ position: 'absolute', top: 0, left: -9999 }).css(propOb).attr('tabIndex','-1').insertBefore(textarea); })(), lastScrollTop = null, updateSize = function() { // Prepare the clone: clone.height(0).val($(this).val()).scrollTop(10000); // Find the height of text: var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace, toChange = $(this).add(clone); // Don't do anything if scrollTip hasen't changed: if (lastScrollTop === scrollTop) { return; } lastScrollTop = scrollTop; // Check for limit: if ( scrollTop >= settings.limit ) { $(this).css('overflow-y',''); return; } // Fire off callback: settings.onResize.call(this); // Either animate or directly apply height: settings.animate && textarea.css('display') === 'block' ? toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback) : toChange.height(scrollTop); }; // Bind namespaced handlers to appropriate events: textarea .unbind('.dynSiz') .bind('keyup.dynSiz', updateSize) .bind('keydown.dynSiz', updateSize) .bind('change.dynSiz', updateSize); }); // Chain: return this; }; })(jQuery); many thanks for any help Hi All, I am new to javascript and actually I need to insert the data into a textarea from a text file when the user loads the browser.. and I am using this program to do it..but its throwing error 405, I dont know whats the problem..can any one please check the code or give me some code to do the same funtionality. Quote: <script type="text/javascript"> function getfile() { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Browser does not support HTTP Request"); return; } var url = "${pageContext.request.contextPath}/static/files/email1.txt"; xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("POST", url, true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { var emm = xmlHttp.responseText; alert(emm); } } function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> can one give me some idea regarding this. Thanks in Advance, Best Regards, Rajasekhar. Hey there everyone. I've got a form which has a couple of inputs. The 1st is just a text input and the 2nd a textarea. I have it so that when someone types into the 1st input some javascript causes a div elsewhere on the page to update with whatever's being typed. html: Code: <div class="input text required"> <label for="CampaignTitle">Title</label> <input name="data[Campaign][title]" type="text" maxlength="76" id="CampaignTitle" /> </div> Javascript: Code: $('#CampaignTitle').bind("onpropertychange input", function() { $('#titleBar').text(this.value); }); That works fine. But using the above I tried to create a similar effect for the textarea but it doesn't work: html: Code: <div class="input textarea"> <label for="CampaignStory">Story</label> <textarea name="data[Campaign][story]" class="ckeditor" cols="30" rows="6" id="CampaignStory" ></textarea> </div> javascript: Code: $('#CampaignStory').bind("onpropertychange input", function() { $('#story').text(this.value); }); How can I make it work thanks I already asked that question on Stack Overflow, however so far I haven't gotten any answers there, so I thought maybe somebody here could help me. Below is the question, copied from Stack Overflow. I've got this problem that I've been trying to solve for a week and I'm at wit's end (which, well, most likely means my wit's not so great, since it doesn't seem to be a very hard problem; nonetheless I'm very new to Javascript and am trying to look at this as a learning experience). I wanted to have a fixed position element that would rotate as a user scrolls the page. Doing so in CSS is trivially easy, however it doesn't work all that great, especially across browsers (works fine in Chrome, but is janky in Firefox) and under stress (when I turn on FPS meter or some other stuff in Chrome Developer Tools it stops working correctly ― I assume it would also behave similarly if there was another CPU-extensive app open etc.). So I figured that animating in the canvas would be a more stable technique. Doing the basic animation in the canvas is, again, rather easy. However I started having problems while trying to emulate the CSS transition effect. In short, I'm trying to emulate a code like this: Code: <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { height: 3000px; } #square { margin: 50px; width: 150px; height: 150px; position: fixed; background-color: black; transition: transform linear 0.3s; } </style> <script> window.onload = function() { var deg = 0; var pos = window.pageYOffset; var square = document.getElementById('square'); window.onscroll = function() { var npos = window.pageYOffset; deg += (npos - pos) / 10; pos = npos; square.style.transform = 'rotate(' + deg + 'deg)'; } } </script> </head> <body> <div id='square'></div> </body> </html> And what I've got currently is below. This is, like, fifteenth try, and if you run it, you'll see that it kind of works but is very ugly and totally not how it should look. I have had better results before, but still not what I was looking for. Code: <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { height: 3000px; } canvas { position: fixed; } </style> </head> <body> <canvas id='canvas' width='250' height='250'></canvas> <script> window.onload = function() { // some canvas geometry stuff var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.translate(125,125); var deg = Math.PI / 180; // initializing variables var request = null; var deg = 0; var ndeg = 0; var base_degree; var pos = window.pageYOffset; var time = 0; var duration = 300; // in milliseconds draw(); document.addEventListener('scroll', rotateStart, false); function rotateStart() { // at the beggining of the scroll, set the time variable and start the loop. // if scroll continues, only set the time (thus resetting the animation), // but don't call loop, since it's already set as a callback to requestAnimationFrame. if (request == null) { time = (new Date()).getTime(); loop(); } else { time = (new Date()).getTime(); } } function loop() { // time passed as a fraction of total duration of animation. Describes our progress var fraction = ((new Date()).getTime() - time) / duration; if (fraction == 0) { // if current time and old time are the same, skip this frame request = window.requestAnimationFrame(loop); } else if (fraction < 1) { base_degree = (window.pageYOffset - pos) / 10; ndeg = deg + base_degree * fraction; // we operate on ndeg, and preserve deg as a reference point request = window.requestAnimationFrame(loop); draw(); } else { // clean up code. // we draw one last time at a definitive degree of rotation because // in my experience with similar scripts it sometimes doesn't go all the way there, // e.g. maybe it stops at fraction == 0.95 or something like that. ndeg = deg + base_degree; draw(); deg = ndeg; pos = window.pageYOffset; request = null; } } function draw() { c.save(); c.clearRect(-125,-125,250,250); c.rotate(ndeg * deg); c.fillRect(-75,-75,150,150); c.restore(); } }; </script> </body> </html> Could somebody point out errors in what I'm doing, post a solution, give a hint as to what method would be preferred here, whatever? Hi there Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at: http://www.mrjindustrial.com.au/scro..._concrete.html Thanks, hope someone can help. Hi i have a problem, i've been trying to fix this for the whole day pls see my code below Code: for ($o = 0; $o <= $totalclass; $o++) { for($i = 1; $i <= 45; $i++) { if ($_SESSION['classification'][$o] == $i) { $sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'"; $result2=mysql_query($sql2); // If successfully queried if($result2) { while ($row2 = mysql_fetch_assoc($result2)) { $ClassDesc2 = $row2['ClassDesc']; } } //echo $ClassDesc2; ?> <tr> <td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td> <input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>"> <td bgcolor="FAFAF6"> <textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea> <input type="button" value="Reset" onclick="window.reset();" name="reset"> </td> </tr> <? } } } i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful. i've seen this on other website and i know it is possible to do this, pls help! Hello there . Here is my simple code Quote: <html> <head> <script> function addText(){ document.getElementById("textarea").value+=document.getElementById("text").value+'\n'; document.getElementById("text").value=""; document.getElementById("text").onblur=document.getElementById("text").value=" Your Message..."; } </script> <style> #textarea{background-color:#F3F3F3; } </style> </head> <body> <form> <TEXTAREA id="textarea" COLS="80" ROWS="20" ></TEXTAREA><br/><br/> <input type="text" id="text" name="text" value=" Your Message..." onclick="this.value=''" size="96"> <input type="button" value="Send" name="submit" onclick="addText()"> </form> </body> </html> My problem is I dont know what to do iorder to make my send button to push the text entered in the text field from bottom to the top (not from the top to the bottom) Hi all, I'm loading external xml and displaying specific tagged elements in a textarea. It works fine in IE because I can turn the variable object into text with a simple object.text property, but in Firefox (using the serializeToString method), the object appears in my textarea tags and all. The code looks something like this (this is just a dummy script - imagine the xml is already loaded into the object xmlDoc ): Code: function writePage(){ document.write('<textarea name="inputText">'+myText+'</textarea>'); } function xmlIsLoaded(){ if(window.ActiveXObject){ //tests for IE myText = xmlDoc.getElementsByTagName("desiredTag")[0].text; } else { //tests for FF myText = (new XMLSerializer()).serializeToString(xmlDoc.getElementsByTagName("desiredTag")[0]); } writePage(); } What am I missing here? I've tried toString, textContent, innerText, childNodes - just about everything I can think of to get just the text w/o the tags from the xml for the FF version. Any thoughts? ~gyz Hey everyone....I just started learning how to use Javascript and I have a problem.... I have an exercise in which I have to validate a form and write the info of all the fields in a textarea by pressing the submit button.....and I just can't do it. Code: <html> <head> <script language="javascript" type="text/javascript"> var radio_selection=""; function ValMode(){ Empty(myForm.name); Empty(myForm.addr); Empty(myForm.city); Empty(myForm.mail); radioButtons(); Empty2(myForm.multi); return false; } function Empty(x){ if ((x.value.length==0)||(x.value==null)){ alert("Empty field");} } function Empty2(x){ if ((x.value==null)){ alert("Select an option"); } } function radioButtons() { if (radio_selection=="") alert("\nYou must check one of the radio buttons."); } </script> </head> <body> <big><b>Example Form</b></big><br><br> <b>The form</b><br> <form name="myForm" onsubmit= "return ValMode();" > Name <input type="text" name="name" size=30><br> Address <input type="text" name="addr" size=30><br> City <input type="text" name="city" size=30><br> E-mail <input type="text" name="mail" size=30><br> Room Type<br> <input type="radio" name="personnumb" onClick="radio_selection='One person'">For One person<br> <input type="radio" name="personnumb" onClick="radio_selection='For Two'">For Two<br> <input type="radio" name="personnumb" onClick="radio_selection='For three'">For three<br> <input type="radio" name="personnumb" onClick="radio_selection='Family suite'">Family suite<br> How did you learn about us?<select name="mutli"> <option selected value="">--Select-- <option>From friend <option>By chance <option>Search engine <option>Advertisement </select><br> I'd like additional service as: <br> <input type="checkbox" name="veg">Vegetarian<br> <input type="checkbox" name="hand">Handicap<br> <input type="checkbox" name="allerg">Allergic to various substances<br> <input type="checkbox" name="pet">Pet owner<br> <input type="submit" value="submit form"><br> <input type="reset" value="reset"><br> <textarea cols=30 rows=10 id="textarea" name="textarea" >When you hit 'Submit' the user input will be written to htis textarea.</textarea> </form> </body> </html> Here is my code.I left out my sorry efforts of influencing the textarea. Any suggestions? I sell products on amazon. and ASINs are Amazon Identifiers for products. So If I want to check out my product pages I have to go to "www.amazon.co.uk/dp/ "I have to put an ASIN here" . If I can put everything together in the text box and hit go it should take me to the first page(first ASIN). Here is a sample ASIN B004Z2QORW I have the code below but I somehow cant get it to work. Please help. I haven't assigned anything to the go button. I will put a list of ASINs in the text area and the iframe should concatenate the value from a row to the hardcoded URL and when I click next it should concatenate the value from the next row; when I click previous the value from the previous row. Code: <HTML> <Head> <H1 align="center">Detail Page Lookup using ASINs</H1> </head> <body> <textarea rows="10" cols="20" value=""> ASINs here </textarea> <button id="go">Go</button> <button id="prev" align="right">Previous</button> <button id="next" align="right">Next</button> <br/> <iframe id="myframe" src="http://www.amazon.co.uk/dp/" height="100%" width="100%"> <p>Your browser does not support iframes.</p> </iframe> <script>var domain='http://www.amazon.co.uk/dp/'; $('#prev, #next').on('click', function(e) { var Myval = $('textarea').val().split('\n'), now = $('#myframe').attr('src').replace(domain, ''); if (Myval.indexOf(now)==-1) { var src=domain+Myval[0]; }else{ var p = Myval.indexOf(now)!==0 ? Myval.indexOf(now)-1 : Myval.length-1, n = Myval.indexOf(now)==(Myval.length-1) ? 0 : Myval.indexOf(now)+1, src = e.target.id=='next' ? domain+Myval[n] : domain+Myval[p]; } $("#myframe").attr('src', src); console.log(src); }); ? </script> </body> </HTML> hi i am new to javascript. i want to make a form where a textarea, some buttons like bold,italic,link etc will be availablw. when user selecet some text from textarea and click bold button then one openig and closing tag will be added like this [sb]abc[/sb] how can i do this using javascript. any idea? pls. help I'm having trouble with the way my textarea is displaying text when it's submitted. It always comes out as one line of text instead of the way a user has entered it. Here's my code. Code: <textarea name="info" value="" rows="7" cols="55"> Enter Your Personal Information Here </textarea><br /><br /> That is then called to a function which displays it in a new page. Code: <script> function buildResume() { resInfo = document.myResume.info.value flyWindow = window.open() flyWindow.document.write("Personal Information " + resInfo); } </script> If any knows how I could fix this it'd really help. I've tried using the pre element and wrap property with no luck. on html i named my textarea as features, is the code below correct cause is does not validate. if (document.forms.myform.features.value == "") I'm adding text into a text area using document.createTextNode Code: document.getElementById('controlQueueDump').appendChild(document.createTextNode(args+';')); But whenever the user edits the text box, it will never update anything again. I can add as much as I want, but when a user edits it (for example removes the contents), BAM, it is no longer updated. it's a textarea so it should be appending the child to the value attribute. Thanks a lot. Hi guys, My brain is not working. May be I need a coffee break. I need your expertise. Below is the code holding the textarea. Look for the element with the id : themessage Code: <table width="100%" border="0"> <tr><td rowspan="4"><input type="button" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" value="<?php echo $from_email;?>"/><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr> <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" /></td></tr> <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr> <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr> <tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td> </tr> <tr> <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td> <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr> <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td> <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr> <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr> <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3"> <textarea id="themessage" name="themessage" rows="15" cols="80" style="width: 100%"> </textarea> </td></tr> </table> Now on a button click, I'm trying to pass some values which one of them happens to be what ever that is entered in the textarea. For some reason, the stupid JS is not reading. But I think it is me that is stupid, not JS. Below is the code i'm running to get the value. Code: var message = document.getElementById('themessage').value; alert(message); The alert simply returns blank. There is an alert, but no value even where there is text in the text area. Can someone please shed some light on this. pretty please so I am creating a silly word ;irate word interpreter page, and I need some logic behind how to add text to a textarea each time I click on a button. Each time the user clicks on the button, the value is inserted into the text area. You should be able to click on multiple buttons to add to the last text that appears. Then I have a delete translation button when I want to clear the textarea field. A good example would be if the user clicks on the button with the value "sir", than "matey" will appear in the textarea. Now, if the user clicks on the button with the value "your", then "yer" will come up after matey. It's like creating a sentence on your own, and then deleting it when your done. Code: <body> <div id="page"> <div> <img style="float:left" src="slue.gif" width="205" height="190" alt=""> <div> <h1>Pirate Translator</h1> <p>Simply click on the buttons to translate words and/or phrases from English to pirate talk</p> </div> </div><br /> <hr /> <form name="pirate"> <div> <fieldset> <legend><b>Greetings:</b></legend> <input type="button" id="greeting" value="hello" /> <input type="button" id="greeting" value="pardon me" /> <input type="button" id="greeting" value="excuse me" /> <input type="button" id="greeting" value="" /> <input type="button" id="greeting" value="" /> <input type="button" id="greeting" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>People:</b></legend> <input type="button" id="people" value="sir" /> <input type="button" id="people" value="madam" /> <input type="button" id="people" value="miss" /> <input type="button" id="people" value="stranger" /> <input type="button" id="people" value="officer" /> <input type="button" id="people" value="" /> <input type="button" id="people" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Questions:</b></legend> <input type="button" id="question" value="where is" /> <input type="button" id="question" value="can you help me" /> <input type="button" id="question" value="is that" /> <input type="button" id="question" value="how far is it to" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Articles:</b></legend> <input type="button" id="article" value="the" /> <input type="button" id="article" value="my" /> <input type="button" id="article" value="your" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Adjectives:</b></legend> <input type="button" id="adject" value="old" /> <input type="button" id="adject" value="attractiv" /> <input type="button" id="adject" value="happy" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Places:</b></legend> <input type="button" id="places" value="restroom" /> <input type="button" id="places" value="restaurant" /> <input type="button" id="places" value="mall" /> <input type="button" id="places" value="hotel" /> <input type="button" id="places" value="pub" /> <input type="button" id="places" value="" /> <input type="button" id="places" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Desires:</b></legend> <input type="button" id="desire" value="I would like to" /> <input type="button" id="desire" value="I desire" /> <input type="button" id="desire" value="I wish I knew how to" /> <input type="button" id="desire" value="my mother told me to" /> <input type="button" id="desire" value="my campanion tells me to" /> <input type="button" id="desire" value="" /> <input type="button" id="desire" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Actions:</b></legend> <input type="button" id="action" value="find" /> <input type="button" id="action" value="take a nap" /> <input type="button" id="action" value="kill" /> <input type="button" id="action" value="hurt you" /> <input type="button" id="action" value="beat you up" /> <input type="button" id="action" value="go to the bathroom" /> <input type="button" id="action" value="" /> </fieldset> </div> <div> <p id="output"><textarea id="task_list" rows="5" cols="130"></textarea></p> <p id="output"><input type="button" id="" value="Delete Traslations" /></p> </div> </div> </form> <script src="js/translate.js"></script> </body> </html> |