The Guf!

Free Code Samples

Center an item on a page
Sort an ordered list by any element
- - var viewportwidth;
  - var viewportheight;
  - // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  - if (typeof window.innerWidth != "undefined") {
  - viewportwidth = window.innerWidth,
  - viewportheight = window.innerHeight
  - }
  - // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  - else if (typeof document.documentElement != "undefined:
  - && typeof document.documentElement.clientWidth !=
  - "undefined" && document.documentElement.clientWidth != 0) {
  - viewportwidth = document.documentElement.clientWidth,
  - viewportheight = document.documentElement.clientHeight
  - }
  - // older versions of IE
  - else {
  - viewportwidth = document.getElementsByTagName("body")<0>.clientWidth,
  - viewportheight = document.getElementsByTagName("body")<0>.clientHeight
  - }
  - viewportheight = viewportheight - 330;
  - viewportwidth = viewportwidth - 330;
  - var _top = viewportheight / 2;
  - var _wid = viewportwidth / 2;
  Now let's use it in the code:
  $("#centeredDiv:).animate({top : _top + "px", left : _wid + "px", position : "absolute"}, 500);
- How many times have you created a table, and then seen it grow and needed to be able to sort through it? Rather than reload the page and do the work in the back end, I decided that I needed a fast way to do it with jQuery. While the building blocks were there, the examples all seemed to show how to sort one column. I've NEVER created a one column table, so I used an ordered list and came up with a table that I could sort by any column I wanted
  
  First, we need a list:
  //We'll make a header seperate from the actual list - I'm not going to show the whole HTML here, you'll get the idea
  1. < ul class="_header">
  2. < li class="firstName w150">
  3. First Name
  4. </li>
  5. < li class="lastName w150">
  6. Last Name
  7. </li>
  8. < li class="phone w150">
  9. Phone
  10. </li>
  11. < li class="state w50">
  12. State
  13. </li>
  14. </ul>
  15. < ol id="tblContacts">
  16. < li>
  17. < ul>
  18. < li class="w150">
  19. Steve
  20. </li>
  21. < li class="w150">
  22. Johnson
  23. </li>
  24. < li class="w150">
  25. (407)555-1212
  26. </li>
  27. < li>
  28. Florida
  29. </li>
  30. </ul>
  31. </li>
  32. </ul>
  //What we would like to do is click the header and sort on that column. Fortunately, jQuery has done most of the work for us, they just didn't do a real good job of documenting it:
  1. $(document).ready(function(){
    - $('.firstName').click(function(){
    - $('#tblContacts').html(
    - $('#tblContacts').children('li').sort(function(a,b) {
    - return a.children<0>.children<0>.innerHTML.trim().toUpperCase().localeCompare(
    - b.children<0>.children<0>.innerHTML.trim().toUpperCase()
    - );
    - })
    - );
    - });
  2. - $('.lastName').click(function () {
    - $('#tblContacts').html(
    - $('#tblContacts').children('li').sort(function (a, b) {
    - return a.children<0>.children<1>.innerHTML.trim().toUpperCase().localeCompare(
    - b.children<0>.children<1>.innerHTML.trim().toUpperCase()
    - );
    - })
    - );
    - });
  3. - $('.phone').click(function () {
    - $('#tblContacts').html(
    - $('#tblContacts').children('li').sort(function (a, b) {
    - return a.children<0>.children<2>.innerHTML.trim().toUpperCase().localeCompare(
    - b.children<0>.children<2>.innerHTML.trim().toUpperCase()
    - );
    - })
    - );
    - });
  4. - $('.state').click(function () {
    - $('#tblContacts').html(
    - $('#tblContacts').children('li').sort(function (a, b) {
    - return a.children<0>.children<3>.innerHTML.trim().toUpperCase().localeCompare(
    - b.children<0>.children<3>.innerHTML.trim().toUpperCase()
    - );
    - })
    - );
    - });
  5. });
  // And let's make it LOOK like a table, with a little CSS
  1. #tblContacts
  2. {
  3. width:750px;
  4. }
  5. #tblContacts li
  6. {
  7. list-style-type: none;
  8. padding:0;
  9. }
  10. #tblContacts li ul li
  11. {
  12. list-style:none;
  13. display:inline-block;
  14. padding:0;
  15. }
  16. ._header
  17. {
  18. width:750px;
  19. background-color:#e4dede;
  20. }
  21. ._header li
  22. {
  23. display:inline-block;
  24. }
  25. .w150
  26. {
  27. min-width:150px;
  28. }
  29. .w50
  30. {
  31. min-width:150px;
  32. }
  Obviously, there is a lot of room for compression here, but let's look at what we're doing:
  
  We've created a header, and we've sectioned out the list items by 150 pixels. Right under that list, we've created another one, sectioned out the same way
  
  We've named each header item using a class (named after the contents, for ease of use), and we've written a function for each item in jQuery.
  
  When you click the header item, it sorts each list item in the ordered list. Using the .sort(function(a, b) tells jQuery to do a comparator of the contents of each selected list item against the whole
  
  That works great with a list of one item, but who is ever going to have that? Instead, we'll tell jQuery to compare the first child of a (a.children<0>, or in this case, the < ul >), then grab the list item of THAT child that we want (0 for First Name, 1 for Last Name, etc), trim it, convert it to UpperCase, and then do the same for the rest of the matching list items in the whole list, using localeCompare.
  
  Doing the whole thing within the .html() element for the ordered list maintains the list when we sort the columns!
  
  For a finished product of: (click the headers to reorder the list)
  - First Name
  - Last Name
  - Phone
  - State
  1. - Steve
    - Johnson
    - (407)555-1212
    - Florida
  2. - Dave
    - Smith
    - (969)555-1212
    - California
  3. - Roscoe
    - Edderman
    - (865)555-1212
    - Tennessee
  4. - Chauncy
    - Ghellar
    - (203)555-1212
    - Connecticut