There is no 'hover' event.. You should use 'mouseover'.
topViewSurf.on("mouseover", function(){
dropTop()
});
Hope this helps!
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
Solution
There is no 'hover' event.. You should use 'mouseover'.
topViewSurf.on("mouseover", function(){
dropTop()
});
Hope this helps!
OTHER TIPS
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:
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));
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));
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();
};
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' });
};
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.