Question

I have a website that I have added some basic Mootools animation to. Here is the page of the website i have a question on:

http://www.humsdrums.com/portfolio/webdesign.html

You will notice that when you mouse over the large images, they fade and a magnifying glass tweens down. Here is the Mootools class called “Magnify” I made for this:

var Magnify = new Class({

Implements : [Options, Events],


options : {

    },

initialize : function (item, image, options)
{
    this.setOptions(options);
    this.div = document.id(item);
    this.img = $$(image);

    this.tweenBackground = new Fx.Tween(this.div,{
        duration:'250',
        property:'background-position'

    });

    this.div.addEvent('mouseenter', this.reveal.bind(this));

    this.div.addEvent('mouseleave', this.hide.bind(this));

},

reveal : function()
{
    this.tweenBackground.cancel();
    this.tweenBackground.start('175px -78px', '175px 90px');
    this.img.tween('opacity', .15);
    console.log('mouse over');


},

hide :function ()
{
    this.tweenBackground.cancel();
    this.tweenBackground.start('175px 90px', '175px -78px');
    this.img.tween('opacity', 1);


}

});

I then need to initialize an instance of the class for each element i want to do this by grabbing the css id.

window.addEvent('domready', function()
{

var magnify1 = new Magnify('p1', '#p1 img');
var magnify2 = new Magnify('p2', '#p2 img');
var magnify3 = new Magnify('p3', '#p3 img');
var magnify4 = new Magnify('p4', '#p4 img');
});

What I want to be able to do is simple give each element I want to have this functionality a CSS class of “magnify so I don’t have to use individual ID’s and add another instance of the Mootools class every time.

If I the element a CSS class and put it into my Mootools class, it breaks. Even if it didn’t break, it seems like Mootools would simply make all elements with that CSS class animate at the same time when only one is moused over.

How would I detect which instance of the “magnify CSS class is being moused over? My only thoughts were to find a way to grab all the elements with the “magnify” CSS class, put them into an array and then check to see if the item being hovered over equals one of the items in the array. I don’t know how to do that or if that is the best way.

Any help or suggestions would be great! Let me know if you want to see more code or if I can explain something better.

Answer 1

you need to code to patterns more. first of all – you have a relationship of 2 elements – a containing div and an image.

your event is actually on the parent el but you also need to reference and animate the inner element (the image).

your selector is simply div.item-port > img if you want to grab all images. div.item-port > img ! div.item-port will grab the parent divs instead of those that have an image as direct child only. etc.

then you need to decide what element to attach the event to. you have many choices in your markup.

before you even get there, you have a a href which wraps BOTH your elements. that allows you to use a cross-browser :hover pseudo.

you can very easily do in pure css:

div.port-item {
    /* defaults you already have and then ... */
    background-position: 175px -78px;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.portfolio-item a:hover div.port-item {
    background-position: 175px 90px;
}

.portfolio-item a:hover img {
    opacity: .15; // etc for cross-browser
}

only if you want to recover when the browser does not support transitions, you should instantiate your js class. http://jsfiddle.net/wMnzb/4/

var Magnify = new Class({

  Implements: [Options],

  options: {
    parent: 'div'
  },

  initialize: function (images, options) {
    this.setOptions(options);
    this.elements = document.getElements(images);
    this.attachEvents();
  },
  attachEvents: function () {
    var selector = this.options.parent;
    this.elements.each(function (el) {
      var parent = el.getParent(selector);

      parent.set('tween', {
        duration: '250',
        link: 'cancel'
      });
      parent.addEvents({
        mouseenter: function () {
          this.tween('background-position', '175px 90px');
          el.fade(0.15);
        },
        mouseleave: function () {
          this.tween('background-position', '175px -78px');
          el.fade(1);
        }
      });
    });
  }   

});

new Magnify('div.port-item > img');

simplified as much as is feasible, but you get the idea – completely ambiguous from ids and any such repetitive specificity.