Can I aggregate divs?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Nibbus
    New Member
    • Nov 2007
    • 18

    Can I aggregate divs?

    Hi there,

    I´m writting a program that simulates an ER model. I´ve managed to draw the entities and relations but I´m stuck now...
    I drew the relations using "wz_jsgraphics. js" lib from http://www.c-point.com/javascript_vect or_draw.htm .

    My problem now is that this lib draws lines by creating tons of divs and combining them together, fact that doesn´t meet my goals, because I wanted to turn the relation "draggable" (with dragdrop lib from YUI). Because I have tones not just one div per relation, I cannot turn them draggable. I tryed to insert them into a collection of draggable objects and go from there, but not only the divs are created with no id, but also I can´t determine how many are there in each relation...

    Any ideas to go around this would be greatly welcome.
    Thanks
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    I'm not familiar with the graphics library in question, but why can't you determine the number of divs in a relation?

    The id problem is not difficult. You could just set them.

    Comment

    • Nibbus
      New Member
      • Nov 2007
      • 18

      #3
      Hi acoder,

      As far as I can tell, this lib uses the same method of other various drawing libs to draw a line. Pixels are painted by creating small background-colored layers (DIV elements), and arranging these to the desired pattern.

      The reason I can´t count the divs created is because they´re created on the fly by the function drawLine(x1 , y1 , x2, y2), being in cache until paint( ) is called, function which actually draws them. I analised the code generated using IEDeveloper toolbar, in which I can see the elements created, dozens of them, all without id, just a tag and it´s height ,width and bg color.

      If there was a mean of putting them as just one div element would permit me identifying each relation arrow, letting me turn the element draggable.

      Here is some code to elucidate you:

      Code:
      function drawLinks()
             {    
                  var jg = new jsGraphics("dropZone");
                  for (var i = 0; i < oProcess.length ; i++)
                  {                
                      var el = oProcess[i].procCode;
                      var currentX = getProcessPositionX(el);
                      var currentY = getProcessPositionY(el);
                      
                      for (j = 0; j < oProcess[i].procFinish.length ; j++)
                      {
                          var nextEl = oProcess[i].procFinish[j];
                          var nextX = getProcessPositionX(nextEl);
                          var nextY = getProcessPositionY(nextEl);
                                      
                          jg.drawLine(currentX - 242, currentY - 188, nextX - 242, nextY - 188);     //those number are just because of the offset
                          jg.setStroke(2);  //pencil thickness
                          
                      }
                   }
                   jg.paint();
                   alert("I´m done!");
               }
      Thanks for your attention and time

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Can you determine where these DIV elements are created? Are there within a parent element or just appended to the body?

        You can use getElementsByTa gName("div") to get the divs. If you can then determine which ones are the divs, then you can make a collection out of them.

        Comment

        • Nibbus
          New Member
          • Nov 2007
          • 18

          #5
          Originally posted by acoder
          Can you determine where these DIV elements are created? Are there within a parent element or just appended to the body?
          Yes, they´re being created inside another div called "dropZone" .


          Originally posted by acoder
          You can use getElementsByTa gName("div") to get the divs. If you can then determine which ones are the divs, then you can make a collection out of them.
          I tried that option, but the divs created to the relations are not the only divs inside dropZone, the divs representing the entities are also inside. Even selecting them (entity divs) by class,I still can´t select the other ones which don´t have any id...

          I´m so stuck in this that I´m getting bored... maybe I´ll try another aproach, using an image to represent the relation or so... what do you say?

          Once again, thank you for your time and cooperation

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Originally posted by Nibbus
            I tried that option, but the divs created to the relations are not the only divs inside dropZone, the divs representing the entities are also inside. Even selecting them (entity divs) by class,I still can´t select the other ones which don´t have any id...
            You don't need to select by id. Try
            [CODE=javascript]var divs = document.getEle mentById("dropZ one").getElemen tsByTagName("di v");
            // check not entity divs by checking class...
            // if you need ids, just set them for the divs[/CODE]

            Comment

            Working...