SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solved - DOM Updated Question

    I have a site with a 3 column layout. Because the size of the columns may be different onLoad, I am using Javascript to make each of the columns the same height. This works great when I load the page.

    However, my site updates these columns using AJAX. After the update, one column may have become longer than the others. I am trying to find a way to detect this change and then again make all 3 columns the same height.

    My first approach was with an event handler that detected "onsubtreemodified" for these DIVs. Unfortunately, this is a fairly new W3C DOM event that is not currently supported by most browsers.

    My next idea was to simply call the function that did the resize with the onClick event when the user did anything that would update the columns. This does not work because Javascript does not wait until the DOM is finished updating before executing the code that checks sizes. So, it still sees the columns as the same height and doesn't make adjustments.

    Does anyone know how to accomplish this?

    Thanks
    Last edited by justbn_me; Jan 22, 2007 at 16:39. Reason: Solved
    Justin Noel
    Better Than Broadway - The Best Local Theatre Calendar
    www.betterthanbroadway.com/

  2. #2
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I was wrong. "onsubtreemodified" is supported. However, I still seem to be running into the problem where the DOM is considered modified BEFORE I get my content back from the XMLHttpRequest.
    Justin Noel
    Better Than Broadway - The Best Local Theatre Calendar
    www.betterthanbroadway.com/

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more update. Both of my assumptions initially about why this was not working were mistaken. The actual problem is that when I read the "offsetHeight" after the change, it is simply looking at the offsetHeight of the original document. It is NOT taken into account the new data in the columns.

    So, each time I check offsetHeight, it returns what is was originally and doesn't increase the heights of the columns.

    Any ideas on how to make the check the offsetHeight of the modified columns?
    Justin Noel
    Better Than Broadway - The Best Local Theatre Calendar
    www.betterthanbroadway.com/

  4. #4
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I look a fool. The problem was none of the above. It was simply my not updating the height for the right elements....

    Sometimes when you stare at something so long; the answers just refuse to pop out at you.
    Justin Noel
    Better Than Broadway - The Best Local Theatre Calendar
    www.betterthanbroadway.com/

  5. #5
    SitePoint Member
    Join Date
    May 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Justin, were you able to use onsubtreemodified?

    it doesn't seem to work for me at all!

    Thanks!

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Third Stone From The Sun
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.quirksmode.org/js/events/...emodified.html

    Didn't work in FF or Opera, but it DID work in Webkit nightly.

    YUI has onContentReady handler. It is complicated and uses polling behind the scenes. onContentReady hides the ugliness from you. It is easy to use.
    My outdated site is down for a while now.


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
  •