www.webdeveloper.com
Results 1 to 12 of 12

Thread: Move Elements, All At Once, Not Singular

  1. #1
    Join Date
    Mar 2011
    Posts
    81

    Move Elements, All At Once, Not Singular

    I have a set of anchors for a menu. When the menu changes (the addition of a new anchor), I have to reposition each anchor so they are aligned on the page nicely. I'm using the style variable to do this:

    Code:
    elementAnchor.style.top = newVertical + "px"
    The problem is that each time I call

    Code:
    elementAnchor.style.top
    there is a repaint. Is there a way to change all the positions of the anchors through a for loop, then cause one repaint after the loop is done?

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    I think with some CSS and markup changes, you won't need to explicitly reposition each menu item. Can you post the HTML, CSS and JavaScript? I've built menu systems before and have never needed to set the position on things. Usually a combination of a relatively positioned parent and absolutely positioned menus is all the positioning that needs to happen:

    Code:
    <ul class="nav">
        <il>
            <a href="#">Section</a>
            <ul>
                <li><a href="#">Sub Section</a></li>
            </ul>
        </li>
    </ul>
    Code:
    .nav,
    .nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .nav li {
        position: relative;
    }
    
    .nav ul {
        left: 0;
        position: absolute:
        top: 0;
    }

  3. #3
    Join Date
    Mar 2011
    Posts
    81
    It sounds like you mean that they inherit the relative position of a parent container. If I understand you, this won't help me in this case.

    I have an array of anchors for my menu. They are centered on the web page horizonatally like this:

    menuItem1 menuItem2 menuItem3

    They are not in a table so I must do the math on the coordinates. So, again, when I change the anchorElement.style.top or anchorElement.style.left it causes a repaint for each call. I'm trying to hold off on the paint until all coordinate changes have been made. Know how to do this?

    Then the new item would look like this with all new repositioned menu items:

    menuItem1 menuItem2 menuItem3 menuItem4

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  5. #5
    Join Date
    Mar 2011
    Posts
    81
    The code is not in working order at this point. It's a bit of a mess. But I could post the part where I adjust the values:

    Code:
    function placeExistingNavItems()
    {
            var coordinates = navCoordinates();
            length = getLength();
            for(i=0;i<length;i++)
                var element = document.getElmentById(getId(i));
                element.style.left = coordinates[i];
                element.style.top = globalY;
    }
    I know the obvious question might be: Why don't you just put the menu items in a table, center the table and tell the table to center it's items? Can't do it. I am preparing this for a JQuery implementation which will not work with tables. So, I can't use the table to solve the coordinate problem.
    Last edited by misfitplanet; 03-05-2011 at 01:55 PM. Reason: syntax error

  6. #6
    Join Date
    Mar 2009
    Posts
    523
    What you might want to do to is to use the DOM cloneNode function to create a duplicate working model for all your menu items, make the appropriate adjustments in that, and then use the DOM replaceChild function to stick the new menu in at one fell stroke.

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by misfitplanet View Post

    I know the obvious question might be: Why don't you just put the menu items in a table, center the table and tell the table to center it's items?
    I guess that the obvious question might be: Why don't you just put the menu items in a list, as toicontien suggested?

  8. #8
    Join Date
    Mar 2010
    Posts
    2,803
    If it's a single level menu this description of how to centre floated menus of known and unknown widths might help.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    If it's a single level menu this description of how to centre floated menus of known and unknown widths might help.
    Good link, tirna. Indeed, centering elements with unknown width is a tricky mission.

  10. #10
    Join Date
    Mar 2010
    Posts
    2,803
    It's one I have bookmarked from another forum. It was very helpful for me

  11. #11
    Join Date
    Mar 2011
    Posts
    81
    Quote Originally Posted by Tcobb View Post
    What you might want to do to is to use the DOM cloneNode function to create a duplicate working model for all your menu items, make the appropriate adjustments in that, and then use the DOM replaceChild function to stick the new menu in at one fell stroke.
    That's what I was looking for. Thanks.

    I did stumbled upon another way, but I don't know if the browser repaints once or many times. This is what I had found: Deleting the div node that contains my menu needs updating, recreating the div with the new set of items, then adding the div to the body.

    Would you happen to know if adding the div is a clone equivalent type method?

    Now that I have each item under control through absolute positioning, I am open for animation, a table wouldn't have fit my future criteria.

  12. #12
    Join Date
    Mar 2011
    Posts
    81
    Quote Originally Posted by tirna View Post
    If it's a single level menu this description of how to centre floated menus of known and unknown widths might help.
    This would work if I didn't need total control over each menu items coordinates for future animation purposes.

    I did find very interesting solution that helped me get the exact pixel length of text strings. This allowed me to center everything perfectly with math, instead of relying on built in centering that interferes with my future animation goals.

    Measuring the length of a string in pixels using JavaScript

    Consider this resolved. Thanks everyone. Hopefully it won't be long and I'll have my website up.
    Last edited by misfitplanet; 03-07-2011 at 12:47 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles