SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member russmo's Avatar
    Join Date
    Dec 2003
    Location
    Honolulu, HI
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating Layers on the Fly

    I haven't stumbled across a clear solution to this yet, though I'm sure one exists.

    Here is what I want to create:
    I'm developing an interactive mapping/GIS interface. On the left hand side of the screen is a column where the various map-layers are listed. I want a user to be able to click a "create new layer" button, have a form pop up with options that the user selects, and when they're finished a new map-layer item is added to the left hand column. The user can select/deselect this layer, etc, or delete it from the list. There shouldn't be limits as to how many of these can be added by the user.

    This is what I have so far:
    A div (let's say its ID is 'bar') on the left side set to fill the window vertically. For several test map-layers, I have created nested divs within 'bar' (i.e., IDs 'layer1', 'layer2', 'layer3'). Inside each one is a checkbox, a data description, a date display, and icons for reconfiguring or deleting the layer. I can make these precreated divs dynamically disappear and reappear by setting display: to block or none. They're not absolutely positioned, so hiding a map-layer in the middle of the list causes ones below it to shift up.

    The quick and dirty way to accomplish what I want is to initially create a bunch of blank map-layer divs and leave them hidden until I need them. I don't really want to have 50 spare divs sitting around. Instead, if there's a way to create the nested divs on the fly when the user requests them would be ideal.

    How does one go about creating elements like this? Conversely, how can they be removed?

    I've decided to not care about old browsers like NN4 anymore, so hopefully this can be done in some way that works across most contemporary browsers.

    Aloha,
    Russ

  2. #2
    SitePoint Member russmo's Avatar
    Join Date
    Dec 2003
    Location
    Honolulu, HI
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I have a better handle on things now. Are there any problems with using the following methods to create and remove nested div elements? I'll go ahead and test it out, but let me know if there are any blatant issues with createElement and removeChild. Is setAttribute cool, or should I just access those attributes as newdiv.id,name,className, ...?

    To create:

    var newdiv = document.createElement('div');
    newdiv.setAttribute('id',"maplayer1");
    newdiv.setAttribute('name',"maplayer1");
    newdiv.setAttribute('class',"maplayer");
    ...
    document.getElementById('bar').appendChild(newdiv);

    ---

    To remove:

    var olddiv = document.getElementById('maplayer1')
    olddiv.parentNode.removeChild(olddiv);


    Mahalo to everyone from who's threads I learned about the above methods. This site is a great resource full of good information and helpful people. I should search it more thoroughly next time before I ask questions.

    Ahui hou,
    Russ

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Russ, Welcome to SitePoint Forums!

    Yes, you are headed in the right direction. Good work

    Using setAttribute()/getAttribute() is the more "standard" approach. Using the "element.property" syntaxt also works and might be a little more cross-browser.

    Feel free to ask any questions as you continue with your project.



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
  •