Reordering DIV sections

Discussion in 'Javascript' started by evanburen@gmail.com, Jan 31, 2006.

  1. Guest

    I have 12 div sections on a page and I want the user to be able to
    specify the order in which they appear on the page. I'm thinking of
    something like this but want to ask what people think of this approach
    and maybe suggest another way or an article on how to do this. Thanks.

    // grab the innerhtml by:
    var theSpan1 = getElementById("span1")
    var theSpan1HTML = theSpan1.innerHTML

    // then grab the innerHTML of the span you want to "swap" it to:
    var theSpan2 = getElementById("span2")
    var theSpan2HTML = theSpan2.innerHTML

    // and switch the innerHTML's of the span by:
    theSpan1.innerHTML = theSpan2HTML
    theSpan2.innerHTML = theSpan1HTML


    <form>
    <span id="span1">
    <div id="div1">
    <select size="1" name="ddlOrder1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    Span1/Div1
    </div>
    </span>

    <br />

    <span id="span2">
    <div id="div2">
    <select size="1" name="ddlOrder2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    Span2/Div2</div>
    </span>

    <br />

    <span id="span3">
    <div id="div3">
    <select size="1" name="ddlOrder3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    Span3/Div3</div>
    </span>

    <input type="submit" value="Save Profile" class="smalltext"
    name="btnSaveProfile" onclick="changeOrder()">


    </form>
     
    , Jan 31, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > I have 12 div sections on a page and I want the user to be able to
    > specify the order in which they appear on the page. I'm thinking of
    > something like this but want to ask what people think of this approach
    > and maybe suggest another way or an article on how to do this. Thanks.
    >
    > // grab the innerhtml by:
    > var theSpan1 = getElementById("span1")


    getElementById is a method of the document object:

    var theSpan1 = document.getElementById("span1");


    It is not strictly necessary to end all statements JavaScript with a
    semi-colon, but it is recommended as good coding practice.


    > var theSpan1HTML = theSpan1.innerHTML


    Your HTML shows a div nested inside a span which is invalid HTML. What
    various browsers might do with that is not necessarily consistent.
    There seems little point is simply wrapping a div in a span anyway -
    just remove the span elements (or the divs).

    You have form controls inside the span. Their innerHTML may also differ
    between browsers since innerHTML does not have a public standard for
    implementation. When you 'move' the elements using innerHTML, you will
    get different results on different browsers.

    It would be far better to use DOM methods to move elements around, e.g.

    <div id="div01">div 01</div>
    <div id="div02">div 02</div>
    <input type="button" value="Swap divs"
    onclick="swapEm('div01','div02');">

    <script type="text/javascript">
    function swapEm(idA, idB)
    {
    var a = document.getElementById(idA);
    var b = document.getElementById(idB);
    a.parentNode.insertBefore(b, a)
    }
    </script>


    Feature testing is required before using getElementById and
    insertBefore, both are widely (though not universally) supported.


    >
    > // then grab the innerHTML of the span you want to "swap" it to:
    > var theSpan2 = getElementById("span2")
    > var theSpan2HTML = theSpan2.innerHTML
    >
    > // and switch the innerHTML's of the span by:
    > theSpan1.innerHTML = theSpan2HTML
    > theSpan2.innerHTML = theSpan1HTML
    >
    >
    > <form>


    Forms must have a action attribute, even if it's empty.


    > <span id="span1">
    > <div id="div1">


    A block element (a div here) can't appear inside an inline element (a span).


    > <select size="1" name="ddlOrder1">
    > <option value="1">1</option>
    > <option value="2">2</option>
    > <option value="3">3</option>
    > </select>
    > Span1/Div1
    > </div>
    > </span>
    >
    > <br />


    Is this really XHTML? If not, use normal HTML tags.


    [...]



    --
    Rob
     
    RobG, Jan 31, 2006
    #2
    1. Advertising

  3. Randy Webb Guest

    RobG said the following on 1/30/2006 10:04 PM:
    > wrote:
    >> I have 12 div sections on a page and I want the user to be able to
    >> specify the order in which they appear on the page. I'm thinking of
    >> something like this but want to ask what people think of this approach
    >> and maybe suggest another way or an article on how to do this. Thanks.
    >>
    >> // grab the innerhtml by:
    >> var theSpan1 = getElementById("span1")

    >
    > getElementById is a method of the document object:
    >
    > var theSpan1 = document.getElementById("span1");
    >
    >
    > It is not strictly necessary to end all statements JavaScript with a
    > semi-colon, but it is recommended as good coding practice.


    Depending on the statement, of course :)
    In this case it doesn't hurt to add it though.
    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jan 31, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Raman
    Replies:
    6
    Views:
    4,725
    santosh
    Aug 3, 2007
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    750
  3. Paul Thompson

    overlayed div sections problem in IE

    Paul Thompson, Jun 29, 2004, in forum: Javascript
    Replies:
    0
    Views:
    75
    Paul Thompson
    Jun 29, 2004
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    191
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    315
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page