Sort on Table Columns

Cannot remember if I found this or wrote it or a mix of the 2. I know it uses the JQuery UI Widget tempate so you will need to make sure to include that.

/*
* jQuery UI Progressbar @VERSION
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Progressbar
*
* Depends:
*   jquery.ui.core.js
*   jquery.ui.widget.js
*/
(function ($, undefined) {
 
    $.widget("ui.columnsort", {
        version: "@VERSION",
        options: {
 
        },
 
        _create: function () {
            var self = this.element;
            $(self).addClass("sortTable").find("tr:first").addClass("sortColumns").children().addClass("sortColumn")
            .disableSelection().css("cursor", "pointer").click(this._sortByColumn);
        },
        _sortByColumn: function () {
            var sortCell = $(this).closest(".sortColumn");
            var selectedIndex = sortCell.index();
            var hadclass = $(sortCell).hasClass("asc");
            $(sortCell).closest(".sortColumns").find(".sortColumn").removeClass("asc").removeClass("desc");
            hadclass ? $(sortCell).addClass("desc") : $(sortCell).addClass("asc");
            var table = $(this).closest("table");
            var rows = $(table).find("tr:not(.sortColumns)");
            rows.sort(function (a, b) {
                var keyA = $('td:eq(' + selectedIndex + ')', a).text();
                var keyB = $('td:eq(' + selectedIndex + ')', b).text();
                var checkkeyA = parseInt(keyA);
                var checkkeyB = parseInt(keyB);
                if (!parseInt(keyA)) {
                    checkkeyA = keyA;
                    checkkeyB = keyB;
                }
                if ($(sortCell).hasClass('asc')) {
                    return (checkkeyA > checkkeyB) ? 1 : -1;
                }
                else {
                    return (checkkeyA < checkkeyB) ? 1 : -1;
                }
            });
 
            rows.each(function (index, row) {
                if ($(row).hasClass("resultstableitema") || $(row).hasClass("resultstableitemb")) {
                    $(row).removeClass("resultstableitema").removeClass("resultstableitemb");
                    if (index % 2) {
                        $(row).addClass("resultstableitemb");
                    }
                    else {
                        $(row).addClass("resultstableitema");
                    }
                }
                table.append(row);
            });
        },
        _destroy: function () {
            this.element
   .removeCss("cursor");
        }
    });
})(jQuery);

OptGroup with asp:Dropdownlist

Most are aware that the out of the box DropdownList that comes with asp.NET doesnt allow for OptGroups. These are quite handy when it comes to structuring the layout.

One way around this is to use jQuery to insert the items required to make optgroup work.

Define your asp:DropdownList, remember to set the cssclass attribute as this makes it easier to find.

In this case I had a dropdown with the css class of eventDropDown attached.

In the data returned to the Dropdown I make sure 2 extra rows are added to separate the 2 sets of options, in this case one is PE and one is OE.

initially the data is bound with the separators (slightly edited)

<select>

<option>PE</option>

<option>ONE</option>

<option>OE</option>

<option>TWO</option>

</select>

using the :contains selector that comes with the standard jQuery libraray I was able to find the option of PE and OE to be replaced with my optgroup choices.

I have made the assumption that if PE exists, then so does OE. Makes life a bit easier.

<script type="text/ecmascript">

var item = $('.eventDropDown option:contains("PE")');

if (item != null) {

item.replaceWith("<optGroup label='Preferred Events' />");

item = $('.eventDropDown option:contains("OE")');

item.replaceWith("<optGroup label='Other Events' />");

}

</script>

I'm not sure on the accessibility level of what I am doing, but visually this will work for most cases where you want this to happen.

If you do want proper option groups do your site in MVC and make your own custom control, its fun. this is a way out for a control in ASP.NET.

JQuery Vertical Scroller

useful chunk of code for scrolling a list of something, vertically using JQuery

an example of the list html

<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

this is the jquery

<script type="text/ecmascript">
var list = $("#list");
list.addClass("scrolllist");
list.wrap("<div class=\"clipper_container vert\"></div>").wrap("<div class=\"clipper\"></div>");
var clip = list.parent();
var container = clip.parent();
var items = list.children();
var targetHeight = 0;
items.each(function () { targetHeight += $(this).height() });
var cumulativeHeight = 0;
items.each(function () { cumulativeHeight += $(this).height() });
while (cumulativeHeight < targetHeight * 3) {
items.clone().appendTo(list);
items = list.children();
cumulativeHeight = 0;
items.each(function () { cumulativeHeight += $(this).height() });
}
list.css({ "height": cumulativeHeight + "px" });
var interval = setInterval(function () {
if (clip[0].scrollTop == targetHeight) {
clip[0].scrollTop = 1;
}
else {
clip[0].scrollTop += 1;
}
}, 10);
</script>

and the css

/* css for Scrolling element */

.clipper_container
{
position: relative;
}
.clipper
{
position: relative;
overflow: hidden;
z-index: 2;
height: 493px;
width:144px;
}


.scrolllist
{
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
height: 493px;
width: 150px;
margin: 0px;
padding: 0px;
}


.scrolllist li
{
list-style-type: none;
padding: 0px;
margin: 0px;
text-align:center;
}

.vert
{
/* wider than clip to position buttons to side */
width: 150px;
height: 493px;
margin-bottom: 1.5em;
}

.clipmain, .scolllistmain, .vertmain
{
height:600px;
}

An additional Development I have made for the scroller is to have a stepped scroll using animate.

To do this simply replace the interval variable stated above with the following
var interval = setInterval(
function () {
var target = targetHeight + list.position().top;
if(target == -50)
{
list.css({top:-50});
}
list.animate({ top: '-=50' }, "fast");
}, 1000);