Convert script for multiple jquery elements

Question

I've used this script before and as long as I need just one overlay it works fine… https://gist.github.com/jamesotron/8fa41dd9e9ab2c78e9f0

Now I need to call it on multiple clickable elements. Each one should open a different overlay. How can I refactor it in order to pass multiple #div-second, #div-third etc. when the user clicks on #second-overlay, #third-overlay etc.?

Thank you.

var Overlay, onEndTransition, supportsTransitions, transitionEndEventName;

transitionEndEventName = function() {
  var transEndEventNames;
  transEndEventNames = {
    WebkitTransition: "webkitTransitionEnd",
    MozTransition: "transitionend",
    OTransition: "oTransitionEnd",
    msTransition: "MSTransitionEnd",
    transition: "transitionend"
  };
  return transEndEventNames[Modernizr.prefixed("transition")];
};

supportsTransitions = function() {
  return Modernizr.csstransitions;
};

onEndTransition = function(ev) {
  if (supportsTransitions()) {
    if (ev.propertyName !== "visibility") {
      return;
    }
    this.overlay.off(transitionEndEventName(), onEndTransition);
  }
  return this.overlay.removeClass('close');
};

Overlay = (function() {
  function Overlay(overlay) {
    var closeButton;
    this.overlay = overlay;
    closeButton = this.overlay.find('button.overlay-close');
    if (closeButton.length > 0) {
      closeButton.click((function(_this) {
        return function(e) {
          return _this.toggle(e);
        };
      })(this));
    }
  }

  Overlay.prototype.isOpen = function() {
    return this.overlay.hasClass('open');
  };

  Overlay.prototype.close = function() {
    this.overlay.removeClass('open');
    this.overlay.addClass('close');
    if (supportsTransitions()) {
      return this.overlay.on(transitionEndEventName(), (function(_this) {
        return function() {
          return onEndTransition.call(_this);
        };
      })(this));
    } else {
      return onEndTransition.call(this);
    }
  };

  Overlay.prototype.open = function() {
    return this.overlay.addClass('open');
  };

  Overlay.prototype.toggle = function(e) {
    if (this.isOpen()) {
      return this.close();
    } else {
      return this.open();
    }
  };

  return Overlay;

})();

$(document).ready(function() {
  var overlay;
  overlay = new Overlay($('div.first'));
  return $('#first-overlay').click(function(e) {
    return overlay.toggle(e);
  });
});

you want to have different overlays for different elements but at a time there should be only overlay open rt ? — Arkantos
– Arkantos, Commented Jan 27, 2015 at 18:45
exactly. The overlays contain different second level menu items. I don' t need to open more than 1 overlay at once. — Milksamsa
– Milksamsa, Commented Jan 27, 2015 at 18:52

Arkantos · Accepted Answer · 2015-02-03 13:53:16Z

1

You can define multiple click handlers for multiple elements. You just need to refine your document.ready() a bit, you don't have to return anything.

var mappings = {
  '#first-overlay' : '#div-first',
  '#second-overlay' : '#div-second',
  '#third-overlay' : '#div-third'
};

$(document).ready(function() {

    $.each( mappings, function( key, val ) {
       /* create a new overlay object and use click handler just to toggle  */
       var Overlay = new Overlay($(value));
       $(key).on('click',function(e) {
        overlay.toggle(e);
      });

    });

});

edited Feb 3, 2015 at 13:53

answered Jan 27, 2015 at 19:08

Arkantos

6,6083 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arkantos Over a year ago

There's also another way of dealing with this. Having a common class say modal for all buttons and a separate div content-div. We can have a single overlay object wrapping content-divand replacing html with other second divs like first-div, second-div & third-div, but you should take care of changing the html cleverly just before opening the overlay. Well that takes some time and some proper testing :)

Milksamsa Over a year ago

thanks @arkantos but by applying the above code, the overlays work partially. They do open indeed and get closed with the close button, but when I try to open one of the overlays again they don't get closed.

Arkantos Over a year ago

i got the mistake. I'm creating a new overlay object on those divs on every click event. Updated my answer now. Hopefully this should solve the issue :)

Collectives™ on Stack Overflow

Convert script for multiple jquery elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related