SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: listeners

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    listeners

    I'm trying to find a way to add a listener to an object such as a <div>.

    I have a <div> whose content is populated via AJAX. In this particular scenario, the height of said <div> has to be hard-coded. In some instances, the amount of vertical space required to display the data returned by AJAX exceeds the height of this <div> and therefore gets cut off.

    I am looking for a way to have JavaScript detect that the data is being cut off and adjust the height of the containing <div> accordingly.

    Unfortunately the code that parses and populates the data returned by AJAX is part of the .NET AJAX framework so I have no control over what happens during that process.

    My only thought was to add a listener to some object that could then trigger a function to adjust the height of the <div>. Is there any event that I can listen for on that <div> that will fire when the content is populated?

    Or if I'm going about this bass-ackwards, any other suggestions (outside of not hard-coding the height of the <div>) are welcomed.

  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)
    In IE6 it doesn't matter what height it is, it will just expand the height until the content fits, so in this case IE6 is the easy browser to deal with.

    Unfortunately for better browsers than IE6 there is no "oncontentchanged" event. Some browsers, like Gecko-based ones and IE (with differing implementations, as usual), support creating custom events, but I don't think that would be a good approach.

    Ideally this is something you should add to the onreadystatechange event listener of your Ajax framework, but I doubt you can do anything like that, so I think the best idea is to use setInterval to check whether the content is overflowing the container. What is the container's overflow value in the CSS? It should be either "auto" or "scroll". Then you can measure the scrollHeight of the DIV and compare it to the clientHeight. Then just set the CSS height to the scrollHeight value (or plus a little bit more perhaps). Maybe set the interval to 1 second or more, so as not to make things too slow.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    In IE6 it doesn't matter what height it is, it will just expand the height until the content fits, so in this case IE6 is the easy browser to deal with.
    Yeah but for some reason the height is not expanding to fit the content. It's almost as if when the content is written to the <div>, the browser has no knowledge of it.


    Ideally this is something you should add to the onreadystatechange event listener of your Ajax framework, but I doubt you can do anything like that
    You are correct, I am unable to modify anything within that framework.

    I thought of taking the setInterval approach but this is a dynamic web application. Even 1 second is too long to wait for the page to display properly. And I'm afraid that setting an acceptable interval is going to bog down the user's CPU as the AJAX calls are already pretty taxing.

    The custom event idea sounds like a more viable route to me. But are you saying that IE does not support them at all?

  4. #4
    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)
    Quote Originally Posted by daveh0 View Post
    Yeah but for some reason the height is not expanding to fit the content. It's almost as if when the content is written to the <div>, the browser has no knowledge of it.
    Do you have a working example of this I can see? Also, you are sure this is IE6? Also, it depends on the CSS overflow value it has, which you have forgotten to say what it is.

    The custom event idea sounds like a more viable route to me. But are you saying that IE does not support them at all?
    No, it doesn't. Only Mozilla, I believe. IE has createEventObject and fireEvent, but it can only be used for "normal" events, such as onmouseup and onclick.

    YUI does custom events. Not sure how they actually make it work, but it looks interesting.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have a live example. The application runs on our intranet and is behind our firewall - I know, this makes it very difficult to troubleshoot...

    As for the overflow property - it is not specified. Not sure if the default is auto or visible. At any rate, changing to scroll or auto does not seem to have any effect.

  6. #6
    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)
    The default is auto.


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
  •