SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    combining size2 select and color2 select into a textArea

    Code:
    <script type="text/javascript">
    
    window.onload = function() {
      var sel = document.getElementsByName('sizeChanger')[0];
      sel.onchange = function() {
        var tArea = document.getElementById('t1');
        tArea.focus();
        var selection;
        if (tArea.selectionStart) {
          var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
          var selBeforeStart = tArea.value.substr(0, selStart),
              selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
          selection = tArea.value.substr(selStart, selEnd - selStart);
          tArea.value = selBeforeStart + '[size' + this.value + ']' + selection + '[/size]' + selAfterEnd;
        }
        else if (document.selection) {
          selection = document.selection.createRange();
          selection.text = '[size' + this.value + ']' + selection.text + '[/size]';
        }
      }
    }
    </script>
    
    <form name="myform">
    
    <select name="sizeChanger">
    <option value="noSize" style="color:gray">size</option>
    <option value="1">size1</option>
    <option value="2">size2</option>
    </select><br>
    
    <textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 
    
    </form>
    A user can generate [size] tag with the code above at http://dot.kr/test/16-1.htm


    Code:
    <script type="text/javascript">
    
    window.onload = function() {
      var sel = document.getElementsByName('colorChanger')[0];
      sel.onchange = function() {
        var tArea = document.getElementById('t1');
        tArea.focus();
        var selection;
        if (tArea.selectionStart) {
          var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
          var selBeforeStart = tArea.value.substr(0, selStart),
              selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
          selection = tArea.value.substr(selStart, selEnd - selStart);
          tArea.value = selBeforeStart + '[color' + this.value + ']' + selection + '[/font]' + selAfterEnd;
        }
        else if (document.selection) {
          selection = document.selection.createRange();
          selection.text = '[color' + this.value + ']' + selection.text + '[/font]';
        }
      }
    }
    </script>
    
    <form name="myform">
    
    <select name="colorChanger">
    <option value="noColor" style="color:gray">color</option>
    <option value="1">color1</option>
    <option value="2">color2</option>
    </select><br>
    
    <textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 
    
    </form>
    A user can generate [color] tag with the code above at http://dot.kr/test/16-2.htm


    I like to combine size select and color select into one textArea.
    The following code and its result at http://dot.kr/test/16-3.htm doesn't work correctly, but it will show what I want.
    Code:
    <script type="text/javascript">
    
    window.onload = function() {
      var sel = document.getElementsByName('sizeChanger')[0];
      sel.onchange = function() {
        var tArea = document.getElementById('t1');
        tArea.focus();
        var selection;
        if (tArea.selectionStart) {
          var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
          var selBeforeStart = tArea.value.substr(0, selStart),
              selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
          selection = tArea.value.substr(selStart, selEnd - selStart);
          tArea.value = selBeforeStart + '[size' + this.value + ']' + selection + '[/size]' + selAfterEnd;
        }
        else if (document.selection) {
          selection = document.selection.createRange();
          selection.text = '[size' + this.value + ']' + selection.text + '[/size]';
        }
      }
    }
    
    window.onload = function() {
      var sel = document.getElementsByName('colorChanger')[0];
      sel.onchange = function() {
        var tArea = document.getElementById('t1');
        tArea.focus();
        var selection;
        if (tArea.selectionStart) {
          var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
          var selBeforeStart = tArea.value.substr(0, selStart),
              selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
          selection = tArea.value.substr(selStart, selEnd - selStart);
          tArea.value = selBeforeStart + '[color' + this.value + ']' + selection + '[/font]' + selAfterEnd;
        }
        else if (document.selection) {
          selection = document.selection.createRange();
          selection.text = '[color' + this.value + ']' + selection.text + '[/font]';
        }
      }
    }
    
    </script>
    
    
    <form name="myform">
    
    <select name="sizeChanger">
    <option value="noSize" style="color:gray">size</option>
    <option value="1">size1</option>
    <option value="2">size2</option>
    </select>
    
    <select name="colorChanger">
    <option value="noColor" style="color:gray">color</option>
    <option value="1">color1</option>
    <option value="2">color2</option>
    </select><br>
    
    <textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 
    
    </form>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, you can't have two window.onload() = { } closures because the second one overwrites the first one. Just change the name of "sel" to something else and incorporate the code from the second one (starting with the onchange function) into the second one.

    One problem you might face is that in both IE and firefox after adding the tags, the selected text is no longer selected.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Well, you can't have two window.onload() = { } closures because the second one overwrites the first one. Just change the name of "sel" to something else and incorporate the code from the second one (starting with the onchange function) into the second one.
    GOT!


    Quote Originally Posted by Raffles View Post
    One problem you might face is that in both IE and firefox after adding the tags, the selected text is no longer selected.
    Hm~~, as I test it in detail I face the problem in IE7 at http://dot.kr/test/16-1.htm. (I don't mind whether it works or not in fireFox at the moment.)

    After I select size1, I can select size2, but I can't select size1 in serial.

    Is there any way to fix this problem?

    (I guess it needs some kinds of clearing.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •