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.

*May or may not contain any actual "CSS" or "Tricks".