Loading ...
Sorry, an error occurred while loading the content.
 

Sorting Divs

Expand Messages
  • apapf
    I have a list of divs that are displayed top to bottom on a page. I want to provide a way for the user to sort those divs based on metadata about them (e.g. a
    Message 1 of 4 , Jul 26, 2008
      I have a list of divs that are displayed top to bottom on a page. I
      want to provide a way for the user to sort those divs based on
      metadata about them (e.g. a date, or an amount). Which YUI tools
      should I be looking at to help me? I want to make sure I'm not
      reinventing the wheel.

      Thanks!
    • Peter Michaux
      ... How are you including the meta data in the HTML? Is it a page on the unrestricted web? Does this page need to work without JavaScript? Depending on the
      Message 2 of 4 , Jul 26, 2008
        On Sat, Jul 26, 2008 at 10:54 AM, apapf <apapf@...> wrote:
        > I have a list of divs that are displayed top to bottom on a page. I
        > want to provide a way for the user to sort those divs based on
        > metadata about them (e.g. a date, or an amount). Which YUI tools
        > should I be looking at to help me? I want to make sure I'm not
        > reinventing the wheel.

        How are you including the meta data in the HTML?

        Is it a page on the unrestricted web?

        Does this page need to work without JavaScript?

        Depending on the situation it may be best to build the page to work
        without JavaScript and then use progressive enhancements when feature
        tests show the browser supports the necessary features.

        Peter
      • apapf
        ... I was thinking of adding custom attributes to the div tag itself. The page will live on the unrestricted web and should at least display the original
        Message 3 of 4 , Jul 27, 2008
          > How are you including the meta data in the HTML?
          >
          > Is it a page on the unrestricted web?
          >
          > Does this page need to work without JavaScript?
          >
          > Depending on the situation it may be best to build the page to work
          > without JavaScript and then use progressive enhancements when feature
          > tests show the browser supports the necessary features.
          >
          > Peter
          >

          I was thinking of adding custom attributes to the div tag itself. The
          page will live on the unrestricted web and should at least display the
          original order of the list for non-JS browsers. My question is more
          around how to actually do the reordering of the divs. I'm open to any
          ideas on how to do this the 'right' way.
        • Peter Michaux
          ... That is probably not a good idea. The HTML will not validate which is just the start of the problems. Some JavaScript libraries have tried custom
          Message 4 of 4 , Jul 30, 2008
            On Sun, Jul 27, 2008 at 9:26 PM, apapf <apapf@...> wrote:
            >
            >> How are you including the meta data in the HTML?
            >>
            >> Is it a page on the unrestricted web?
            >>
            >> Does this page need to work without JavaScript?
            >>
            >> Depending on the situation it may be best to build the page to work
            >> without JavaScript and then use progressive enhancements when feature
            >> tests show the browser supports the necessary features.
            >>
            >> Peter
            >>
            >
            > I was thinking of adding custom attributes to the div tag itself.

            That is probably not a good idea. The HTML will not validate which is
            just the start of the problems. Some JavaScript libraries have tried
            custom attributes in the past but, as far as I know, have stopped that
            practice.

            > The
            > page will live on the unrestricted web and should at least display the
            > original order of the list for non-JS browsers. My question is more
            > around how to actually do the reordering of the divs. I'm open to any
            > ideas on how to do this the 'right' way.

            Create an array of objects

            var arr = [{date: 123, el: domNode},
            {date: 432, el: domNode},
            {date: 23, el: domNode}]

            where "domNode" is probably a different node in each line above.

            ----

            Now sort the array

            arr.sort(function(a, b) {return a.date - b.date;})

            or if the meta data is a string property "name" where subtraction wouldn't work

            arr.sort(function(a, b) {return a.name > b.name ? 1 : a.name < b.name
            ? -1 : 0;});

            You could work toLowerCase() into the above if case doesn't matter for
            alphabetization.

            ----

            After the array is sorted you can loop over the array and pluck out
            the ordered DOM nodes.

            Peter
          Your message has been successfully submitted and would be delivered to recipients shortly.