Treehouse: Grow your CSS skills. Land your dream job.

jQuery Events

  • # November 17, 2009 at 3:16 am

    Hi,

    How to deselect/toggle image selection color when clicked out of div area or region.
    All images contains in this div i.e, <div id = "sortable"> .

    Code :

    Code:
    #sortable {
    list-style: none;
    padding: 0px;
    height: 396px;
    display: block;
    position: relative;
    }

    #sortable .item {
    width: 81px;
    height: 84px;
    float: left;
    }

    jQuery demo.js

    jQuery(function($) {
    window.SelectionModel = function(selector) {
    this.mostRecentSelection = null;
    this.selector = selector;
    var that = this;
    that.clearSelection();

    $(selector).live(‘mousedown’, function(event) {
    alert($(‘#selector’));
    that.handleSelectionEvent($(this), event);
    return false;
    });
    }

    SelectionModel.prototype = {
    handleSelectionEvent: function(clicked, event) {
    var ctrl = event.ctrlKey || event.metaKey; // Detect metaKey for OSX users

    if(event.shiftKey) {
    var selectable = $(this.selector)
    var previousSelectionIndex = selectable.index(this.mostRecentSelection || clicked);
    var currentSelectionIndex = selectable.index(clicked);
    var rangeMax = Math.max(previousSelectionIndex, currentSelectionIndex);
    var rangeMin = Math.min(previousSelectionIndex, currentSelectionIndex);

    for (; rangeMin < = rangeMax; rangeMin++) { if($(this.currentSelection).index(selectable[rangeMin]) != -1) continue; $(selectable[rangeMin]).addClass('activated'); this.addToSelection(selectable[rangeMin]); } } else if(clicked.is('.activated')) { if(ctrl) { this.removeFromSelection(clicked[0]); clicked.toggleClass('activated'); } } else { if(ctrl) { this.addToSelection(clicked[0]); } else { this.clearSelection(); this.addToSelection(clicked[0]) } clicked.toggleClass('activated'); } this.mostRecentSelection = clicked; } ,addToSelection: function(element) { this.currentSelection.push(element); }, removeFromSelection: function(element) { var newSelection = []; $(this.currentSelection).each(function(which, item) { if(item != element) newSelection.push(item); }); this.currentSelection = $(newSelection); }, clearSelection: function() { $(this.selector).removeClass('activated'); this.currentSelection = []; } };

    I need to deselect image border color when clicked out of sortable region

    thanks,
    sri…

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.