UBBC Tags Adjustment

Not quite sure what you're asking but it sounds like you're saying you want the caret (the typing position indicator) to be within the UBBC tag once the tag is added.
In other words you want [b]|[/b] instead of [b][/b]|.

You are aware you can type what you want to go inside the tag first then highlight it and then click the UBBC button and the highlighted text will be INSIDE the UBBC tag.

For example: This sentence contains a bold new word. I would type out the entire sentence first then double-click on the word "new" to select it then click the UBBC button to make it bold

The code you speak of would need to replace the add() function provided by Proboards with its own and in addition calculate the offset where the caret should appear after the UBBC tag was added taking into account if the tag is unary ([hr], [br]) or whether the user wants to add an attribute or text ([url=URL]text[/url], [img width=100 height=100]URL[/img]). It also wouldn't be cross browser since the last time I checked Opera provided no way to set the caret position and Internet Explorer requires a convoluted process¹ to do it which can fail depending on browser setting.

• 1. see setCursorPositionIE function in Enhanced UBBC Tables code

Actually I ran across an article on Google that claimed Opera has had the ability to position caret ever since v9 so if true then the code might just be possible. I'll probably give it a shot when I get some time since there's also an annoying bug in the current add() func (or FF itself) that deselects text in Firefox when a UBBC is added which means you can't select something then wrap it in multiple tags like you can in IE

Just letting you know I haven't forgotten this thread, I've actually gotten the caret to center in all inserted empty ubbc tags on all 4 browser types (IE,FF,Safari,Opera) and even got the lack of a persistent selection problem in Firefox fixed.
There is a final obstacle with Opera which has its own deselect bug where if a control loses focus it also loses its selections. You'd think recording the endpoints in an onblur then writing them back in the button onclick would work but apparently not...
probably a timing conflict but I'll keep at it.

Anyway here's what I have so far:
<script type="text/javascript">
// nameless newAdd()
if(document.postForm.message && window.add){
function add(open, end) {
  var tArea = document.postForm.message;
  var sct = tArea.scrollTop;
  var open = open ? open : "";
  var end = end ? end : "";
  var ffselect= (tArea.selectionStart && !tArea.selectionFaux) //enhanced UBBC Tables code sucks
  var sl;
  if (isIE) {
    function setCursorPositionIE(element,start,end) {
      end=(end)?end:start;
      if(ffselect){element.selectionStart=start; element.selectionEnd=end; return true;} //opera
      if(document.selection){               
        var range = element.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
      }
    }

    function getCursorPositionIE(element){
      if(document.selection){   
        if(ffselect) return [element.selectionStart,element.selectionEnd]; //opera
        element.focus();
        var range = document.selection.createRange();
        var stored_range = range.duplicate();
        stored_range.moveToElementText( element );
        stored_range.setEndPoint( 'EndToEnd', range );
        var selectionStart = stored_range.text.length - range.text.length;
        var selectionEnd = selectionStart + range.text.length;
        return [selectionStart,selectionEnd]
      }
    }
    tArea.focus();   
    var curSelect = document.selection.createRange();
    var cl=curSelect.text.length
    if (arguments[2]) {
      curSelect.text = open + arguments[2] + "]" + curSelect.text + end;
    } else {
      curSelect.text = open + curSelect.text + end;
    }
   
    if(cl==0 && end.length){
      var ss= getCursorPositionIE(tArea)[0]-end.length,offset=tArea.value.substr(0,ss).split("\n").length-1;     
     
      setCursorPositionIE(tArea,(ffselect?ss:ss-offset)); //IE linebreak bug fix
    }   
  } else if (!isIE && typeof tArea.selectionStart != "undefined") {
    var ss=tArea.selectionStart,se=tArea.selectionEnd
    var selStart = tArea.value.substr(0, tArea.selectionStart);
    var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
    var curSelection = tArea.value.replace(selStart, "").replace(selEnd, "");
    if (arguments[2]) {
      sl = selStart + open + arguments[2] + "]" + curSelection + end;
      tArea.value = sl + selEnd;
    } else {
      sl = selStart + open + curSelection + end;
      tArea.value = sl + selEnd;
    }
   
    tArea.focus();
    tArea.scrollTop = sct;
    if(ss!=se)
    tArea.setSelectionRange(ss, sl.length);
    else
    tArea.setSelectionRange(ss+(open.length+(arguments[2]?arguments[2].length+1:0)), ss+(open.length+(arguments[2]?arguments[2].length+1:0)));
  } else {
    tArea.value += arguments[2] ? open + arguments[2] + "]" + end : open + end;
  }
}
}
</script>

I wouldn't use it as a production script just yet though since people with Opera might run into trouble posting.

If any coders want to try their hand at it you're welcome to it but note that since the isIE variable uses document.attachEvent as a test and IE supports both binding models it falls under the IE section of the conditional. Also opera supports IE's selection method but uses gecko's method to set selections (selectionStart/End)

Well I gave it another go and made a few changes (directed Opera to use gecko since it only has partial support for IE method). This version looks to be working in Internet Explorer, Firefox, Chrome, Opera and Safari.

<script type="text/javascript">
// nameless UBBC add w/ persistent select and centered caret
if(document.postForm && document.postForm.message && window.add){
  function add(open, end) {
    var tArea = document.postForm.message;
    var sct = tArea.scrollTop;
    var open = open ? open : "";
    var end = end ? end : "";
    var ffselect= (!isNaN(tArea.selectionStart) && !tArea.selectionFaux) //enhanced UBBC Tables code sucks
    var sl;
    if (tArea.setSelectionRange && ffselect) {
      var ss=tArea.selectionStart,se=tArea.selectionEnd
      var selStart = tArea.value.substr(0, tArea.selectionStart);
      var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
      var curSelection = tArea.value.substring(ss,se) //gecko bug fix (replace method could replace wrong match)
      if (arguments[2]) {
        sl = selStart + open + arguments[2] + "]" + curSelection + end;
        tArea.value = sl + selEnd;
      } else {
        sl = selStart + open + curSelection + end;
        tArea.value = sl + selEnd;
      }     
      tArea.focus();
      tArea.scrollTop = sct;
      if(ss!=se)
      tArea.setSelectionRange(ss, sl.length);
      else
      tArea.setSelectionRange(ss+(open.length+(arguments[2]?arguments[2].length+1:0)), ss+(open.length+(arguments[2]?arguments[2].length+1:0)));
    }else if (document.selection && document.selection.createRange){
      function setCursorPositionIE(element,start,end) {
        end=(end)?end:start;       
        if(document.selection){
          var range = element.createTextRange();
          range.collapse(true);
          range.moveEnd('character', end);
          range.moveStart('character', start);
          range.select();
        }
      }

      function getCursorPositionIE(element){
        if(document.selection){          
          element.focus();
          var range = document.selection.createRange();
          var stored_range = range.duplicate();
          stored_range.moveToElementText( element );
          stored_range.setEndPoint( 'EndToEnd', range );
          var selectionStart = stored_range.text.length - range.text.length;
          var selectionEnd = selectionStart + range.text.length;
          return [selectionStart,selectionEnd]
        }
      }
      tArea.focus();
      var curSelect = document.selection.createRange();
      var cl=curSelect.text.length
      if (arguments[2]) {
        curSelect.text = open + arguments[2] + "]" + curSelect.text + end;
      } else {
        curSelect.text = open + curSelect.text + end;
      }
     
      if(cl==0 && end.length){
        var ss= getCursorPositionIE(tArea)[0]-end.length,offset=tArea.value.substr(0,ss).split("\n").length-1;
       
        setCursorPositionIE(tArea,(ffselect?ss:ss-offset)); //IE linebreak bug fix
      }
    } else{
      tArea.value += arguments[2] ? open + arguments[2] + "]" + end : open + end;
    }
  }
}
</script>

I also discovered a tiny bug in the current implementation of the add function on the gecko side:

blah blah blah [[b]page1[/b]]
If the above line was the last line and the red was selected and a UBBC button clicked the opening [b] tag would lose its ending square braket resulting in [b]page1[/b] (red missing). This is due to using the replace method to obtain the current selection and selEnd="]".

I haven't done any rigorous tests with it but I did open a modify post with all the browsers mentioned and tested that the caret on empty ubbc insertions were centered inside the inserted ubbc tag with multiple ubbc insertions now nested ([b][i][u][s][/s][/u][/i][/b] instead of [b][/b][i][/i][u][/u][s][/s]).

Also selected text now remain selected after being wrapped in a ubbc tag to allow further nested wrapping (this was true in Internet Explorer but not in other browsers).

Only time will tell if there are any bugs but I haven't encountered any so far...

Hi

Sorry but ive a member whos as a problem that i think this script will resolve.Details
"site always pops to right on Opera browser"

If this the case were do i place the script- in global or main headers.

Many thanks for your hard work

Miller