SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question working with DOM changing

    hi, all.

    I'm stuck with this:

    basically I'm building an array of offsetTop, offsetLeft and offsetHeight for a bunch of elements. these are used to work with the element that is closest to where the user clicked.

    one part of the script, though, changes the DOM, so that node[0] becomes for instance node[1].

    I've temporarely solved the issue by saving the container's innerHTML and replacing it at the end of every loop.

    this is obviously really slow.

    how can one work with the DOM changing on the fly?

    thanks in advance!

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you make changes that require the page to redraw,
    either because of adding or removing elements or changing the style of an element,
    you'd be better to read the offsets when you handle the event.

    Even changing a single word's font weight can change the position of another element,
    far from that one, by as much as the line-height.

    A tiny change can be just enough to cause a line of text to wrap over another line, or remove a line.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi and thanks for replying.

    thats' the problem.

    the tricky part is that in order to read the offset stuff I have to change the DOM.

    basically I need to get the coordinates of single characters on the screen. the only way that I found to do this is adding a random tag (<span>) next to the character and get its offset properties instead. the when I'm done I remove the tag, and go on to the next character.

    tricky, uh?

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you do something like:
    1. get the closest parent's offsets
    2. create a hidden, position absolute container- a div, probably
    3. append a clone of the parent
    4.do your span trick offstage, as it were, so the page won't be frantically redrawing.

    Return an array of character[x,y] items, with the parent's offsets added.

    But you have to really want to know the positions-
    and in that case, why not just put every position-significant character in a permanent span?

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi.

    sorry, I did'nt see you replied.

    I like your idea of putting stuff offstage, that might be the trick.


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
  •