Some web developers like to squeeze small html forms into their websites which are uncomfortable to use for the visitors of the website. Imagine a comment form that displays three lines that each can take only a few words. It’s problematic to write a comment of a hundred words or so in that box and nearly impossible to proofread it once you are done.
Text Area Resizer And Mover comes to the rescue; At least for Firefox users. The Firefox extension makes it possible to resize virtually any html form on the Internet. This is done in an uncomplicated manner.
Once a html form has been located that the user wants to resize he simply presses the right-mouse button after moving the mouse into the form. The mouse pointer changes to a resize symbol and the html form can be resized by moving the mouse.
The default html form at Ghacks for commenting on an article:
The altered html form at Ghacks:
It is possible to make it smaller or bigger although most users will probably stick with the latter. Text Area html forms are those that usually span across multiple rows. The extension cannot be used to increase the size of the Google Search form but as you can see in the images above it is possible to change comment forms and the like easily.
The forms only expand to the right and bottom of the screen but never to the left or upwards.
Related posts:
Firefox: Edit Forms On Websites In External EditorsAutofill Forms for Firefox
Textarea++ Gives Firefox Users Control Over Textareas On Websites
Resize The Firefox Window With Geometry
Resize Popups in Firefox
It’s All Text! Firefox Extension
Use FireForm to fill out forms automatically
Better Mouse Scrolling In Firefox With SmoothWheel
8 Responses to “Resize HTML Forms In Firefox”
Trackbacks/Pingbacks
-
[...] Via | ghacks [...]
-
[...] Leave a comment Postato da Martin su ghacks [...]
Good post! Seems like you were so excited when writing this post that you forgot to include the link to the addon :D
link added, sorry for that.
For greasemonkey: textarea drag resize.
http://userscripts.org/scripts/show/10140
Whenever I encounter such websites where the webmaster only tested their form boxes in 640×480 format, I automatically assume that I’m not part the demographics that they want, and not bother with them. I’m assuming they don’t want anybody with money to spend on bigger monitors and larger text. So when the text box comes up and overshadows the words in the article and it’s impossible to read or fill out because the “submit” button is off the screen of the box, I just assume they want poor, penniless nobodies as their audience group.
While this add-on is nice. I don’t see the need to do business with people who obviously doesn’t have anything I want.
Not a big deal, but nice implementation :)
It does not resize the form, but rather the textarea elements. Here are some Javascript booklets that are similar:
javascript:for(var%20a=document.getElementsByTagName(”textarea”),i=0;i<a.length;i++){a[i].style.width=”100%”;a[i].style.height=”300px”;}void(0);
———————————————-
javascript:(function(){var%20i,x;%20for(i=0;x=document.getElementsByTagName(%22textarea%22)[i];++i)%20x.rows%20+=%205;%20})()
———————————————-
javascript:TxtRsz={formEl:null,adEv:function(t,ev,fn){if(typeof%20document.addEventListener!=’undefined’){t.addEventListener(ev,fn,false)}else{t.attachEvent(’on’+ev,fn)}},rmEv:function(t,ev,fn){if(typeof%20document.removeEventListener!=’undefined’){t.removeEventListener(ev,fn,false)}else{t.detachEvent(’on’+ev,fn)}},init:function(){var%20textareas=document.getElementsByTagName(’textarea’);for(var%20i=0;i<textareas.length;i++){textareas[i].style.cursor=’se-resize’}var%20inputs=document.getElementsByTagName(’input’);for(var%20i=0;i<inputs.length;i++){if(inputs[i].type==’text’){inputs[i].style.cursor=’e-resize’}}TxtRsz.adEv(document,’mousedown’,TxtRsz.initResize)},initResize:function(event){if(typeof%20event==’undefined’){event=window.event}var%20target=event.target||event.srcElement;if(target.nodeName.toLowerCase()==’textarea’||(target.nodeName.toLowerCase()==’input’&&target.type==’text’)){TxtRsz.formEl=target;TxtRsz.formEl.startWidth=TxtRsz.formEl.clientWidth;TxtRsz.formEl.startHeight=TxtRsz.formEl.clientHeight;TxtRsz.formEl.startX=event.clientX;TxtRsz.formEl.startY=event.clientY;TxtRsz.adEv(document,’mousemove’,TxtRsz.resize);TxtRsz.adEv(document,’mouseup’,TxtRsz.stopResize);try{event.preventDefault()}catch(e){}}},resize:function(event){if(typeof%20event==’undefined’){event=window.event}try{TxtRsz.formEl.style.width=event.clientX-TxtRsz.formEl.startX+TxtRsz.formEl.startWidth+’px’}catch(e){}if(TxtRsz.formEl.nodeName.toLowerCase()==’textarea’){TxtRsz.formEl.style.height=event.clientY-TxtRsz.formEl.startY+TxtRsz.formEl.startHeight+’px’}},stopResize:function(event){TxtRsz.rmEv(document,’mousedown’,TxtRsz.initResize);TxtRsz.rmEv(document,’mousemove’,TxtRsz.resize);var%20textareas=document.getElementsByTagName(’textarea’);for(var%20i=0;i<textareas.length;i++){textareas[i].style.cursor=’text’}var%20inputs=document.getElementsByTagName(’input’);for(var%20i=0;i<inputs.length;i++){if(inputs[i].type==’text’){inputs[i].style.cursor=’text’}}}};TxtRsz.init();