CodingForums.com - View Single Post

AndrewGSW · 09-20-2012, 10:24 PM

My last post here (I promise

) - I've combined the previous post's example with my Event Delegation method discussed in another thread, so that I can click on the amounts or dates within the gallery to perform the (ascending or descending) sort.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sort a Gallery</title>
<style type="text/css">
body {
    font-size: 0;
}
ul {
    list-style-type: none;
    margin: 0; padding: 0;
}
li {
    display: inline-block;
    margin: 0; padding: 0;
    font-size: 12px;
}
#gallery img, #gallery span {
    margin: 0; padding: 0;
}
span.amt, span.dte {
    color: blue;
}
span.amt:hover, span.dte:hover {
    background-color: lightgray;
    cursor: pointer;
}
</style>
<script type="text/javascript" src="sorttable.js"></script>
<script type="text/javascript">
var addEvent = function (elem, eventType, func) {
    if ( elem.addEventListener )
        addEvent = function (elem, eventType, func) {
            elem.addEventListener(eventType, func, false);
        };
    else if ( elem.attachEvent )
        addEvent = function (elem, eventType, func) {
            elem.attachEvent('on' + eventType, func);
        };
    addEvent(elem, eventType, func);
};

var delegateEvent = function (elem, childElems, eventType, func, args) {
    addEvent(elem, eventType, function (e) {
        var evt = e || window.event;
        var elem = evt.target || evt.srcElement;
        if ( elem.nodeName.toLowerCase() == childElems.toLowerCase() ) {
            func(elem, args);
        }
    });
};
function sortGallery(obj, args) {
    if (obj.className.indexOf('amt') + 1) {
        SortElements('gallery', 'li', 'span', 0);
    } else if (obj.className.indexOf('dte') + 1) {
        SortElements('gallery', 'li', 'span', 1);
    }
}

function init() {
    // AddSortByNumber/Date are for simple tables,
    // 2 is for other element hierarchies.
    AddSortByNumber2('gallery', 'li', 'span', 0);
    AddSortByDate2('gallery', 'li', 'span', 1, 'dxx mmm yy');
    // the xx's are placeholders for "any two characters".
    delegateEvent(document.getElementById('gallery'), 'span', 'click', sortGallery);
}
window.onload = init;
</script>
</head>

<body>
    <button onclick="SortElements('gallery','li','span',0);">Sort by cost</button>
    <button onclick="SortElements('gallery','li','span',1);">Sort by date</button>
<ul id="gallery" class="sortIt">
    <li><img src="http://lorempixel.com/150/150/sports/1" width="150" height="150">
        <br>Cost <span class="amt" title="sort">&pound;70.00</span><br>
        Available: <span class="dte" title="sort">1st Nov 12</span></li>
    <li><img src="http://lorempixel.com/150/150/sports/2" width="150" height="150">
        <br>Cost <span class="amt" title="sort">&pound;69.99</span><br>
        Available: <span class="dte" title="sort">22nd Nov 12</span></li>
    <li><img src="http://lorempixel.com/150/150/sports/3" width="150" height="150">
        <br>Cost <span class="amt" title="sort">&pound;7.00</span><br>
        Available: <span class="dte" title="sort">3rd Mar 13</span></li>
    <li><img src="http://lorempixel.com/150/150/sports/4" width="150" height="150">
        <br>Cost <span class="amt" title="sort">&pound;12.00</span><br>
        Available: <span class="dte" title="sort">1st Jan 13</span></li>
    <li><img src="http://lorempixel.com/150/150/sports/5" width="150" height="150">
        <br>Cost <span class="amt" title="sort">&pound;20</span><br>
        Available: <span class="dte" title="sort">10th Nov 12</span></li>
</ul>

</body>
</html>

Regards, Andy. Live demo.