Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How many is too man DIVs

    <this is perhaps better suited for the DOM board, but is not a specifically api usage question>

    Basic Question : How many Absolutely positioned DIVs is considered reasonable to manage? Is there an point of sanity that should not be crossed?


    Long Desciption :

    I am attempting to write a boardgame map editor in Javascript. On each tile there are about 7 layers of things including backgrounds, walls, viewable items, game pieces, suprise rewards (treasure), etc that may be displayed. At the moment I'm generatine one container DIV per tile, and 7 layers within each the tile. Each thing I might draw would use the style.backgroundImage= of the appropriate layer. You get the picture. There is also one form, which reflects the state of whatever tile I click on. Pseudocode:

    Code:
    <form>
      I am the only form, As Tiles are clicked I am updated via JS
    
      Layer 1 Options:  <select>
        <option>foo</option>
        ...
      <select>
      ...
      Layer 7 Options:  <select>
        <option>bar</option>
        ...
      <select>
    </form>
    
    board[y][x]
    
    for( var y=0; y<board.length; y++ ) {
      for( var x=0; x<board.length; x++ ) {
        pos = calculateAbsolutePosition()
        id = 'tile_'+ y +'_'+ x
        doc.write('<div id="'+ id +'" style="position: absolute;'+ pos +'">')
        writeSevenInnerDIVS()
        doc.write('</div>')
      }
    }
    This works fine in general but ... with a gameboard size approaching 10X10 (~800 layers) the form selects react slowly to my clicks, each tile reacts fine and highlights itself quickly... with a gameboard size of 20x25 (~4000 layers) it is eating up 80% of my 1.4GHz processor for several seconds before displaying the select options, tile response time is fine. Only the form seems slow to respond.

    This unwanted behavior happens both on Ie6 and on Firefox.

    Is there any method of getting around this that isn't specific to my design, any principles or easier ways of handling this concept that I am not seeing?

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    if you use a table for the board, you'll find it much easier. note this wouldn't be breaking accessibility rules since a table can be considered a grid which is also what a board (as in chess-type boards) is.
    *keep it simple (TM)


  •  

    Posting Permissions

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