[solved] Duplicate text area

[wongadob]

I have a piece of markup that is driving me mad as it is duplicating itself. God knows how? the actual HTML only defines one text area, but when I look at it in Web Inspector, it has created 2 almost identical text area objects. Here is the HTML

	 <div class = "StatusUpdate" >		  <textarea id = 'Conv_updatetext' rows='2' cols='40' onmouseover="this.style.backgroundColor='#ffffff';" onmouseout="this.style.backgroundColor='#eeeeee';" x-blackberry-focusable="true" x-blackberry-onUp="conUpFromTextArea()"	   style="height:25px;" class="updatetextbox" ontouchstart="touchStart()" ontouchend="touchEnd(event,this)" onclick = 'directReply()' placeholder="Write a reply..."></textarea></div>

This is the contents of WebInspector. Has to be a screen shot as I cant copy and paste from WI The CSS defined at the side shows that this EXTRA textarea has been poistioned at a left position of -9999 so it is never visible on screen. I have no idea why this is happening. I do use jQuery and I do hide and show this textarea. But I do not have any code that adds elements or removes elements so I just dont know where this is coming from. I have also searched the rest of the markup in the HTML file in case it was added elsewhere, but there is no equivalent (or simialr) markup on that page. Any ideas. Doing my head in just now!! Been trying to solve it for 2 days! Thanks

Edited September 5, 2012 by wongadob

[wongadob]

should have added the css I guess

#Conv_updatetext{margin: 0px;vertical-align: middle;padding-bottom: 0px;}.updatetextbox{    border:2px solid #b4b5b5;    border-radius:5px;    width:98%;    font-size:16pt;    font-family: "Helvetica";padding-left:1%;    padding-right:1%;    padding-top: 6px;    padding-bottom: 4px;/*    height: 32px; */    margin: 0px;    margin-bottom:5px;    background-color: #eeeeee;    white-space: normal;}.StatusUpdate {background-image: linear-gradient(bottom, rgb(239,239,239) 31%, rgb(255,255,255) 66%);background-image: -o-linear-gradient(bottom, rgb(239,239,239) 31%, rgb(255,255,255) 66%);background-image: -moz-linear-gradient(bottom, rgb(239,239,239) 31%, rgb(255,255,255) 66%);background-image: -webkit-linear-gradient(bottom, rgb(239,239,239) 31%, rgb(255,255,255) 66%);background-image: -ms-linear-gradient(bottom, rgb(239,239,239) 31%, rgb(255,255,255) 66%);background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.31, rgb(239,239,239)),  color-stop(0.66, rgb(255,255,255)));width: 98%;padding: 2px 0px 2px 5px;margin-bottom: 1px;margin-top: 10px;  }

[thescientist]

You should probably post your JS too. Ideally it would be most helpful if you made this available through a live link.

[wongadob]

The Javascript is about 5000 or more lines, but the functions that are called are as follows.

function touchStart(){tapStart = new Date().getTime();}// Detect a tap and execute dependant on id typefunction touchEnd(event,el){var tapEnd = new Date().getTime();if (el.id!="undefined"){  if(tapEnd - tapStart<750)  {   if (el.id !="")   {    console.log("*************touch set focus to ",el.id);    blackberry.focus.setFocus(el.id);    if (document.getElementById(el.id).type =="textarea")    {	 $("#"+el.id).trigger('click');    }    }  }}}

Then

function conUpFromTextArea(){if ($('#Conv_updatetext').val()=="" || $('#Conv_updatetext').val()=="Write a reply..."){  var tf="co_rp"  if (appViewArray.item.length!=0)  {   tf=tf+(appViewArray.item.length-1);  }  else  {   tf="topconvreply";  }  blackberry.focus.setFocus(tf);  contractConvbox();}}

And

function directReply(){var msg;var usr;var x = $('#replyto_name').text()if (x == ""){  msg = getMessage(cache[cNet][messagesStore], convThreadID);  usr = getUserName(cache[cNet]['references'], msg['sender_id']);  replyID=msg['id'];   $('#replyto_name').text(usr)}expandConvbox();}

The expand and contract Convbox hide and show the send button when the text area is in use

function expandConvbox(){$('#Conv_textbox_info_container').show();editMode = true;$('#Conv_updatetext').css({  'background-color' : '#ffffff',  'color' : '#010101'});$("html, body").animate({  scrollTop : $(document).height() - $(window).height()},function(){  $('#Conv_updatetext').trigger('click');  blackberry.focus.setFocus("Conv_updatetext");});}function contractConvbox(){$('#Conv_textbox_info_container').hide();$('#Conv_updatetext').val("");editMode = false;}

[wongadob]

I found the reason for this. It was because I was including a JS extention called Autoresize. This was creating a second text area off screen. Anyway I no longer needed the extension so removed it and solved my problem. This is not a reflection on the extension. Probbaly my mis-use of it.