famo.us hover not working

Question

I really tried to solve this one. But nothing seems to work.

I'm trying to create a menu on Top of the page which shall only be visible if hovered.

very Simple Element for now:

topViewSurf = new Surface({
    classes: ['topSplash'],
    properties: {
        backgroundColor: 'rgb(170,210,140)',
        boxShadow: '0px 0px 10px rgb(110,150, 90)'
    }
});
topViewMod = new Modifier({
    origin: [0.5, 0],
    size: [this.options.width, 40],
    transform: Transform.translate(0,-35,0)
});
this._add(topViewMod).add(topViewSurf);

then I wanted to call this function, should the Element 'topViewSurf' be hovered:

function dropTop(){
    topViewMod.setTransform(Transform.translate(0,0,1), 500);
}

For some reason though I can't get hover to work.

I can call the function by:

topViewSurf.on("click", function(){
    dropTop()
});

Works perfectly fine. But when I replace 'click' with 'hover' nothing happens when I click or hover the element.

I've tried different approaches for this including jQuery and pure js but nothing seems to work (it might be possible that I did mistakes there) but since I'm asking anyway I thought I would ask for a famo.us solution.

Hope you can help me. spitterfly

Answer 1

There is no 'hover' event.. You should use 'mouseover'.

topViewSurf.on("mouseover", function(){
    dropTop()
});

Hope this helps!

Answer 2

I'm pretty new to famo.us and I have just finished the slideshow tutorial. You can get the basic souce code (with-out hover) from here. I haven't checked this repo, but it seems complete.

After the tutorial I wanted to do a hover effect to show that the image is clickable. I'm not sure if I did it right but the following worked for me:

1. Added emitting of the hover events mouseover and mouseout at the background surface after click event in file SlideView.js:

   background.on('mouseover', function() {
       this._eventOutput.emit('mouseover');
   }.bind(this));
   background.on('mouseout',   function() {
       this._eventOutput.emit('mouseout');
   }.bind(this));
   

2. In SlideShowView.js in the method _createSlides I've added to every slide the following code:

   slide.on('mouseover', function(data) {
       this.hovered = true;
       this.showHoverEffect(); 
   }.bind(this));
   
   slide.on('mouseout', function(data) {
       this.hovered = false;
       this.showHoverEffect(); 
   }.bind(this));
   

3. Showing the hover effect inside SlideshowView.js like this:

   SlideshowView.prototype.showHoverEffect = function() {
       //console.log(this);
       var slide = this.slides[this.currentIndex];
       if ( this.hovered ) slide.hoverFadeIn();
       else slide.hoverFadeOut();
   };
   

4. Adding the hover methods to SlideView.js:

   SlideView.prototype.hoverFadeIn = function() {
       this.hoverModifier.setOpacity(1, { duration: 500, curve: 'easeIn' });
   };
   
   SlideView.prototype.hoverFadeOut = function() {
       this.hoverModifier.halt();
       this.hoverModifier.setOpacity(0.0, { duration: 500, curve: 'easeIn' });
   };
   

5. Adding the elemet to show to SlideView.js and _createHover() gets call in SlideView constructor:

   function _createHover(){
           var hover = new Surface({
                      // undefined size will inherit size from parent modifier
                   properties: {
                       //backgroundColor: '#FFFFF5',
                       zIndex: 3,
                       boxShadow: '20px 20px 20px -5px rgba(0, 0, 255, 0.5)',
                       cursor: 'none',
                       // makes the surface invisible to clicks
                       pointerEvents: 'none'
                   }
           });
   
           var modifierObj = {
               origin: [0.5, 0],
               align: [0.5, 0],
               //transform: Transform.translate(0, this.options.filmBorder + this.options.photoBorder, 2),
               opacity: 0.0
           };
   
           this.hoverModifier = new StateModifier(modifierObj);
   
           this.mainNode.add(this.hoverModifier).add(hover);
   }
   

I'll create a simple jsFiddle for this, but it's not ready yet. I hope I haven't missed a part, but I think it should be complete and maybe it helps someone to get a hover effect working.