Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Appending text to an element?

  1. #1
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Appending text to an element?

    Hello all,

    This sounds pretty easy but in fact it isn't. I am not simply talking about appending text to an element(using the appendChild). This is my situation:

    I have the following text(already on the document):

    Code:
    This is some text.
    Notice that the "t" is bold(and red), what I want now is to move the <b></b> tag to the left each time the user presses the left arrow key. So if the user
    presses the left arrow key once, it would look like this:

    Code:
    This is some text.
    So basically I want a "moving" tag.

    I hope I was able to clear my point.

    Thanks all!!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I would think this belongs in the javascript section. That said, you could approach this with the DOM or with innerHTML. You would need to capture the onkeydown event. Once you have the relevant event captured in a way appropriate to your layout and intentions, you test the key, if it is the left arrow run a function. I worked this out document wide, using innerHTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #mb b {
    color:red;
    }
    </style>
    <script type="text/javascript">
    function moveBold(el){
    var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
    if(c<0)
    c=t.length-1;
    t=t.replace(/<[bB]>|<\/[bB]>/g, '');
    while(/[ \.,]/.test(t.charAt(c)))
    c--;
    for (var i_tem = 0; i_tem < t.length; i_tem++)
    if([i_tem]==c)
    new_t+='<b>'+t.charAt(c)+'<\/b>';
    else
    new_t+=t.charAt(i_tem);
    el.innerHTML=new_t;
    if(!/<[bB]>/.test(new_t))
    moveBold(el);
    }
    document.onkeydown=function(e){
    var e=e? e : window.event;
    if(e.keyCode==37)
    moveBold(document.getElementById('mb'));
    }
    </script>
    </head>
    <body>
    <span id="mb">This is some tex<b>t</b>.</span>
    </body>
    </html>
    That's just a rough idea, the code could be better protected and the event assignment could use the 'play nice' techniques of addEventListerner and attachEvent.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Awesome, this is perfectly what I wanted, but can you please comment out the codes?(sorry but I suck at js)

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Ok:

    Code:
    function moveBold(el){
    //Declare variables, especially determine the postion of the 
    //bold tag while defining c as the previous char #
    var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
    if(c<0) //if no bold tag, start from the end of the text
    c=t.length-1;
    t=t.replace(/<[bB]>|<\/[bB]>/g, ''); //remove existing bold tag
    while(/[ \.,]/.test(t.charAt(c))) //skip spaces periods and commas by -
    c--; // decrementing the character number for the char next in line
    for (var i_tem = 0; i_tem < t.length; i_tem++) //loop the text one char at a time
    if([i_tem]==c) //if the char is next in line -
    new_t+='<b>'+t.charAt(c)+'<\/b>'; //enclose it in the new bold tag
    else
    new_t+=t.charAt(i_tem); //otherwise just use it 'as is'
    el.innerHTML=new_t; //set the tag's innerHTML to the new string
    if(!/<[bB]>/.test(new_t)) //if no bold tag -
    moveBold(el); //do it again
    }
    document.onkeydown=function(e){ //assign document-wide event for keydown
    var e=e? e : window.event; //determines the event object across browsers
    if(e.keyCode==37) //check its key code, if it is the left arrow -
    moveBold(document.getElementById('mb')); //run the function on the tag
    }
    Also, since you like it. Here is a version of it without any or (very little) global level exposure, one minor efficiency, and the 'play nice' feature I mentioned before:

    Code:
    <script type="text/javascript">
    (function(){
    function moveBold(el){
    var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
    t=t.replace(/<[bB]>|<\/[bB]>/g, '');
    if(c<0)
    c=t.length-1;
    while(/[ \.,]/.test(t.charAt(c))){
    c--;
    if(c<0)
    c=t.length-1;
    }
    for (var i_tem = 0; i_tem < t.length; i_tem++)
    if([i_tem]==c)
    new_t+='<b>'+t.charAt(c)+'<\/b>';
    else
    new_t+=t.charAt(i_tem);
    el.innerHTML=new_t;
    }
    function grabKey(e){
    var e=e? e : window.event;
    if(e.keyCode==37)
    moveBold(document.getElementById('mb'))
    }
    if ( typeof document.addEventListener != "undefined" )
        document.addEventListener( "keydown", grabKey, false );
    else if ( typeof document.attachEvent != "undefined" )
        document.attachEvent( "onkeydown", grabKey );
    else {
        if ( document.onkeydown != null ) {
            var oldOnkeydown = document.onkeydown;
            document.onkeydown = function ( e ) {
                oldOnkeydown( e );
                grabKey(e);
            };
        }
        else
            document.onkeydown = grabKey;
    }
    })();
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1: sorry if I am being too demanding but is there a way to move the tag, to the right too(I've been playing with this for ages and still can't figure it out)?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The two functions, moveBold and moveBold2, could be combined or worked out to use a third function that contains the routines common to both but, it works fine this way:

    Code:
    <script type="text/javascript">
    (function(){
    function moveBold(el){
    var t=el.innerHTML, c=t.indexOf('<')-1, new_t='';
    t=t.replace(/<[bB]>|<\/[bB]>/g, '');
    if(c<0)
    c=t.length-1;
    while(/[ \.,]/.test(t.charAt(c))){
    c--;
    if(c<0)
    c=t.length-1;
    }
    for (var i_tem = 0; i_tem < t.length; i_tem++)
    if([i_tem]==c)
    new_t+='<b>'+t.charAt(c)+'<\/b>';
    else
    new_t+=t.charAt(i_tem);
    el.innerHTML=new_t;
    }
    function moveBold2(el){
    var t=el.innerHTML, c=t.indexOf('<')+1, new_t='';
    t=t.replace(/<[bB]>|<\/[bB]>/g, '');
    if(c>t.length-1)
    c=0;
    while(/[ \.,]/.test(t.charAt(c))){
    c++;
    if(c>t.length-1)
    c=0;
    }
    for (var i_tem = 0; i_tem < t.length; i_tem++)
    if([i_tem]==c)
    new_t+='<b>'+t.charAt(c)+'<\/b>';
    else
    new_t+=t.charAt(i_tem);
    el.innerHTML=new_t;
    }
    function grabKey(e){
    var e=e? e : window.event;
    if(e.keyCode==37)
    moveBold(document.getElementById('mb'))
    else if(e.keyCode==39)
    moveBold2(document.getElementById('mb'))
    }
    if ( typeof document.addEventListener != "undefined" )
        document.addEventListener( "keydown", grabKey, false );
    else if ( typeof document.attachEvent != "undefined" )
        document.attachEvent( "onkeydown", grabKey );
    else {
        if ( document.onkeydown != null ) {
            var oldOnkeydown = document.onkeydown;
            document.onkeydown = function ( e ) {
                oldOnkeydown( e );
                grabKey(e);
            };
        }
        else
            document.onkeydown = grabKey;
    }
    })();
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yeah, here it is with the two functions combined:

    Code:
    <script type="text/javascript">
    (function(){
    function moveBold(el,d){
    var t=el.innerHTML, c=t.indexOf('<')+d, new_t='';
    t=t.replace(/<[bB]>|<\/[bB]>/g, '');
    c=c<0? t.length-1 : c>t.length-1? 0 : c;
    while(/[ \.,]/.test(t.charAt(c))){
    c+=d;
    c=c<0? t.length-1 : c>t.length-1? 0 : c;
    }
    for (var i_tem = 0; i_tem < t.length; i_tem++)
    if(i_tem==c)
    new_t+='<b>'+t.charAt(c)+'<\/b>';
    else
    new_t+=t.charAt(i_tem);
    el.innerHTML=new_t;
    }
    function grabKey(e){
    var e=e? e : window.event;
    if(e.keyCode==37||e.keyCode==39)
    moveBold(document.getElementById('mb'),e.keyCode-38)
    }
    if ( typeof document.addEventListener != "undefined" )
        document.addEventListener( "keydown", grabKey, false );
    else if ( typeof document.attachEvent != "undefined" )
        document.attachEvent( "onkeydown", grabKey );
    else {
        if ( document.onkeydown != null ) {
            var oldOnkeydown = document.onkeydown;
            document.onkeydown = function ( e ) {
                oldOnkeydown( e );
                grabKey(e);
            };
        }
        else
            document.onkeydown = grabKey;
    }
    })();
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, a billion!! I'll report you as soon as I get to test these. Thanks again.

  9. #9
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Is there a way to actually stop the bold moving after it get to the first character and the last character? And is it possible to put the <b></b> tag just one character after the last visible character? I mean it needs to be right after the last character typed.

    Code:
    test| |
    
    # | | is the bold tag.
    EDIT: The limiting bold tag is fixed. The other problem still persists.
    Last edited by shachi; 03-14-2007 at 07:49 PM.

  10. #10
    Join Date
    Feb 2006
    Posts
    236
    Thanks
    8
    Thanked 3 Times in 3 Posts

    Default

    I've learned quite a lot by reading this code although I have no use for it, myself. Very very good!

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
  •