SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    preventing delay from hiding long list of elements with javascript?

    I am building a sort of tree view in javascript with items that can be expanded and collapsed (with default being collapsed).

    The problem is the page can get very large, and the user sees the the browser render the list with all the items expanded, and then sees them all collapse after half a second.[/quote]

    You could use a setInterval in the head section that's on a tight loop, that waits and watches for the tree, then hides it and removes the setInterval process.
    Last edited by paul_wilkins; Jun 21, 2010 at 15:46.

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I use a scrollable area with the scrollbar hidden by its container. You can then use anchors and targets to bring the area into view, with javascript to enhance it. I use it in my menu and ads/media/calendar section of the link in my sig.

    For me that was the only way I could get the same result with or without javascript and to work the same in all browsers
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would recommend simply using CSS "display:none;" to hide all items that you want to be hidden initially. This does, however, make the assumption that your site requires javascript, as in the case that users don't have javascript enabled they won't have a way to expose these initially hidden elements.

    A less elegant, but non-javascript supporting method would be to put <script> tags through your menu directly after each hidden element in your list, with javascript that hides the element. i.e. $('#<id>').hide()


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
  •