JavaScript tying to scroll to a dinamically created tag in innerHtml
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 8 of 8

Thread: tying to scroll to a dinamically created tag in innerHtml

  1. #1
    Join Date
    May 2005
    Location
    San Antonio Tx
    Posts
    44

    tying to scroll to a dinamically created tag in innerHtml

    so basically I am scanning some text for a match and then when i find a match I'm putting some highlight tags around that word using innerHtml, but i also want to be able to scroll the browser to that word in case it is a large web page

    here's my code:

    Code:
    var highlightStartTag = "<font id=\"highlight\" style='color:blue; background-color:yellow;'>";
    var highlightEndTag = "</font>";
    
    
    for(var i = 1; i < text.length; i++){
    state = match(pattern, text.substring(i,i+(pattern.length)));
       if( state == 0){
          scndText += text.substring(lastIndx,i) + highlightStartTag + text.substring(i,i+(pattern.length)) +   highlightEndTag;
          newText = scndText + text.substring(i+(pattern.length), text.length);
          document.getElementById('scnTxt').innerHTML = newText;
       }
    }
    on the highlight tags i am including an id but when a do something like:
    Code:
    document.getElementById('highlight');
    I'm just not able to find anything, my guess is that getElementById It only looks at the hard coded html and not at the dynamically generated one

    so is it even possible to somehow get an element that was generated dynamically?, am i using the right approach here?

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: tying to scroll to a dinamically created tag in innerHtml

    Don't forget that the <font> tag is deprecated. If you want valid HTML, you need to be using <span> tags.

    Quote Originally Posted by mrjavoman View Post
    my guess is that getElementById It only looks at the hard coded html and not at the dynamically generated one
    No. The browser will also return IDs appended through text. In fact, you're making this much more difficult on yourself. See the code below.

    Code:
    <div id="searchIn">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ultrices, massa vel dapibus lobortis, mi odio consequat eros, at ultricies enim dui nec augue. Maecenas placerat, lectus dictum venenatis ultricies, odio orci consectetur sapien, ut lobortis elit justo sed orci. Pellentesque quis urna libero. Quisque odio metus, scelerisque sed pharetra commodo, congue quis erat. Maecenas egestas molestie justo ac sollicitudin. Vestibulum mattis massa ut libero vehicula eget bibendum orci auctor. Sed at pellentesque arcu. Praesent tempus erat eu lacus vulputate feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />
    </div>
    
    <script type="text/javascript">
    function highlightText(searchFor, searchIn) {
      var pattern = new RegExp('(' + searchFor + ')','gi');
      searchIn.innerHTML = searchIn.innerHTML.replace(pattern, '<span id="highlight" style="background: #ffff00;">$1</span>');
    }
    highlightText("massa", document.getElementById("searchIn"));
    alert(document.getElementById("highlight").innerHTML);
    </script>

    But, if you get more than 1 result, you need to set unique IDs. Having them all be highlight will be invalid HTML and never let you scroll to multiple ones.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    May 2005
    Location
    San Antonio Tx
    Posts
    44

    Re: tying to scroll to a dinamically created tag in innerHtml

    Quote Originally Posted by PeejAvery View Post

    No. The browser will also return IDs appended through text. In fact, you're making this much more difficult on yourself. See the code below.
    Thanks a lot, yes I do realize I am making things a lot more complicated using an algorithm for string matching when I could just use regular expressions, but its for a school project so it is for demonstrations purposes.

  4. #4
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: tying to scroll to a dinamically created tag in innerHtml

    Quote Originally Posted by mrjavoman View Post
    ...but its for a school project so it is for demonstrations purposes.
    Then I just unknowningly violated one of our site's rules. If it's schoolwork, we never provide full functioning code. Since I cannot change that now, I would highly like to encourage you to research it so that you could write it yourself. If not, you're just cheating your own studies.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    May 2005
    Location
    San Antonio Tx
    Posts
    44

    Re: tying to scroll to a dinamically created tag in innerHtml

    Quote Originally Posted by PeejAvery View Post
    Then I just unknowningly violated one of our site's rules. If it's schoolwork, we never provide full functioning code. Since I cannot change that now, I would highly like to encourage you to research it so that you could write it yourself. If not, you're just cheating your own studies.
    oh come on,
    the project in which I'm working on involves implementing the algorithm I was talking you about not how to scroll to a tag dynamically, It just so happened that I didn't know how to scroll to a dynamically created tag and that was because as you pointed, I was using a deprecated tag.

    The fact is that I need it that functionality in my implementation but I couldn't make it work so I asked here as as part of my research, I believe that is valid question.

    anyway Thank you again for the feedback.

  6. #6
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: tying to scroll to a dinamically created tag in innerHtml

    Good. Too many students come in and try to get their work done for them. I'm glad you're not one of them.

    Quote Originally Posted by mrjavoman View Post
    It just so happened that I didn't know how to scroll to a dynamically created tag and that was because as you pointed, I was using a deprecated tag.
    Unfortunately, this could not be the cause. Using deprecated tags will not affect actual page display nor functionality. Currently, there is no browser that has moved past deprecated tags. So...even though it appears your page is fixed, it was fixed due to something else...not just changing the tag.

    And, since your primary problem was scrolling, were you using the scrollTo() function for the scrolling?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  7. #7
    Join Date
    May 2005
    Location
    San Antonio Tx
    Posts
    44

    Re: tying to scroll to a dinamically created tag in innerHtml

    Quote Originally Posted by PeejAvery View Post
    And, since your primary problem was scrolling, were you using the scrollTo() function for the scrolling?
    Yes, I used the scrollTo() function and also another function for finding the position of a given tag
    here is the code I used for that:
    Code:
    function findPos(obj) {
       var curtop = 0;
       if (obj.offsetParent) {
          do {
               curtop += obj.offsetTop;
          } while (obj = obj.offsetParent);
       return [curtop];
       }
    }
    the source for this code is this website which explains in good detail how to find the position of a given tag
    http://www.quirksmode.org/js/findpos.html

    then I did:
    Code:
    var scrollToTag = document.getElementById('highlight');
    window.scrollTo(0,findPos(scrollToTag) - 100);
    this code didn't work with the font tag but when I change it to span everything worked, so that lead me to believe in what you said, that it is because the font tag is now deprecated.

    now looking back at my code I have just changed it back to the font tags and it is still works.....
    now I don't know what I was doing wrong xD.... maybe there was some syntax error in my code and I fixed without realizing it when I changed to span tags .... oh well xD

    Thanks again for the feedback

  8. #8
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: tying to scroll to a dinamically created tag in innerHtml

    Rather than longhand...I'd suggest the shorthand code.

    Code:
    while (obj = obj.offsetParent) {
      curtop += obj.offsetTop;
    }
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center