i'm trying to make a rollover of images on a link.
I'm trusting on prototype and scriptaculous.
Check this fiddle: Rollover test
All it's working well except for a strange behavious when you scroll the mouse over the link very very quick or many times.
In that case, the images and link disappears..
This is caused by the 'display:none' status brought by the scriptaculous effects, blocked I mean..
Thanks a lot
You could tyr the afterFinish function like this
Event.observe($('back1'), 'mouseover', function() {
new Effect.Fade('back1', { duration: 0.3,afterFinish:function () {
new Effect.Appear('back2', { duration: 0.3 });
}
});
});
Event.observe($('back2'), 'mouseout', function() {
new Effect.Fade('back2', { duration: 0.3 ,afterFinish:function () {
new Effect.Appear('back1', { duration: 0.3 });
}
});
});
Related
I have a SPA that I upgraded to 2 which I had some initial issues with but all working now. However I have noticed that the nice transition when switching views no longer works and would like to retain it.
Shell.html:
<div class="loader" data-bind="css: { active: router.isNavigating }">
<img src="/scale/images/379.gif" />
</div>
<div id="pageHost" class="page-host">
<!--ko compose: {
model: router.activeItem,
compositionComplete: router.compositionComplete,
attached: router.attached,
cacheViews:false,
transition: 'entrance'} -->
<!--/ko-->
</div>
As you can see the transition is defined as expected and all the views work and the animated gif displays when loading. Is there anything I've missed? Let me know if you need to see main.js or other code.
EDIT:
It also appears to be the case that views are still cached despite the setting above. It's almost like the above settings are ignored.
EDIT 2
Changed to below as per upgrade info in docs:
<div id="pageHost" class="page-host" data-bind="css: { active: router.isNavigating }">
<!--ko router: { transition:'entrance', cacheViews:false }--><!--/ko-->
</div>
Everything still seems to be working but still no transitions and I'm sure views are still cached.
You can try writing your own transition like this one (depends on animate.css, jquery and Q)
define(function(require) {
var
$ = require('jquery'),
Q = require('q');
$.fn.animationDuration = function (sec) {
$(this).css({
'-webkit-animation-duration': sec + 's',
'-moz-animation-duration': sec + 's',
'-ms-animation-duration': sec + 's',
'animation-duration': sec + 's'
});
return this;
};
return function (context) {
console.log('transitioning views', context);
var afterAnimateActiveView = function (view) {
view && $(view).hide();
},
duration = context.duration || {},
durationIn = duration.in || 0.5,
durationOut = duration.out || 0.5;
return animateView(context.activeView, durationOut, 'fadeOut', afterAnimateActiveView)
.then(function (activeView) {
//hide active view after animation to prevent flickering
activeView && $(activeView).hide();
return animateView(context.child, durationIn, 'fadeIn');
})
.then(function () {
console.log('transition complete');
});
};
function animateView(view, duration, animation, cb) {
var dfd = Q.defer();
if (view) {
console.log('transitioning view', view);
$(view)
.animationDuration(duration)
.addClass('animated')
.addClass(animation)
.show()
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(view)
.removeClass('animated')
.removeClass(animation);
//need to use callback here to do syncronous manipulations
cb && cb(view);
dfd.resolve();
});
} else {
dfd.resolve(true);
}
return dfd.promise;
}
});
It turns out that when used Nuget to update Durandal to 2 it didn't update the animate.css file with the classes the entrance transition was using. Adding these classes resolved it straight away.
I use this example under jsfiddle.net, to build a drag&drop system and if I create a click event on shirts images (draggables), this event doesn't work.
How to combine drag and click events to the draggables elements with Mootools?
window.addEvent('domready', function(){
$$('.item').addEvent('mousedown', function(event){
//event.stop();
// `this` refers to the element with the .item class
var shirt = this;
var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({
opacity: 0.7,
position: 'absolute'
}).inject(document.body);
var drag = new Drag.Move(clone, {
droppables: $('cart'),
onDrop: function(dragging, cart){
dragging.destroy();
if (cart != null){
shirt.clone().inject(cart);
cart.highlight('#7389AE', '#FFF');
}
},
onEnter: function(dragging, cart){
cart.tween('background-color', '#98B5C1');
},
onLeave: function(dragging, cart){
cart.tween('background-color', '#FFF');
},
onCancel: function(dragging){
dragging.destroy();
}
});
drag.start(event);
});
// This doesn't work
$$('.item').addEvent('click', function(event){
console.log('click');
});
});
the event.stop(); will preventDefault and stopPropagation so the mousedown won't bubble into click.
furthermore, it clones and applies stuff to a new element and somewheere along the lines, mootools-more will stop the event once again.
so replace the event.stop with this.fireEvent('click', event); to bubble it up manually - though strictly speaking, a click is on mouseup and you kind of need to wait for that instead.
http://jsfiddle.net/dimitar/qsjj1jpe/4/
I am using nvd3.js and trying to add a click event
d3.selectAll(".nv-bar").on('click', function () {console.log("test");});
JSFiddle
How can I do that ?
Just found out that this works as well (at least for multibar charts):
chart.multibar.dispatch.on("elementClick", function(e) {
console.log(e);
});
I had to look at the source in src/multibar.js to find out; since it's there, I guess this is the way it was intended to be done. However, I second what Alex said in his answer: the lack of documentation for NVD3 is a really big disadvantage. Which is sad because the general idea of the project is great: giving us the power of D3 without going into all the details...
I was running into the same issue and was about to dump NVD3 all together because of the lack of documentation... What you need to do is add a callback function to addGraph(). Also note the d3.selectAll() instead of d3.select().
Good Luck.
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 5, right: 5, bottom: 5, left: 5})
.showValues(false)
.tooltips(true)
.showControls(false);
chart.yAxis
.tickFormat(d3.format('d'));
d3.select('#social-graph svg')
.datum([data])
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
},function(){
d3.selectAll(".nv-bar").on('click',
function(){
console.log("test");
});
});
There are three key points here.
1) No documentation means you have to go through the source code.
2) All graphs have a tooltip, which means events are already firing in the source code.
3) Use the configuration object (in the Documentation) as a road map of the source code.
ie.
var config = {chart: {type: 'multiChart',xAxis:{},yAxis{}}
Open the nvd3/nv.d3.js file
CTRL+F+ the chart type. In this case it is 'multiChart'.
You will see nv.models.multiChart.
Scroll down to find the tooltip events and you will find the needed documentation.
lines1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
stack1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
bars1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
Therefore, to write your own event...
var config = {chart: {type: 'multiChart',
bars1: {
dispatch:{
elementClick:function(e){//do Stuff}
},
xAxis:{},yAxis{}
}
This worked for me: (e.target.data outputs the data attributes attached to that element, like x, y)
$(document).on("click", "#chart svg", function(e) {
console.log (e);
console.log (e.target.__data__);
});
If using AngularJS, use this code in your app.js.
$scope.$on('elementClick.directive', function(angularEvent, event){
console.log(event);
});
This worked for me.
https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/
Just use console.log(e) instead of console.log(e.data) to avoid undefined error.
This coderwall blog heads us the right direction.
chr.scatter.dispatch.on('elementClick', function(event) {
console.log(event);
});
jQuery makes this easy:
$( ".nv-bar" ).click(function() {
console.log("test");
});
Fiddle # http://jsfiddle.net/eTT5y/1/
$('.nv-pie .nv-pie .nv-slice').click(function(){
temp = $(this).text();
alert(temp);
})
This would work fine for the Pie Chart ,Similarly u can go ahead for other charts too....
For stacked area chart, you should disable interactiveGuideline and use elementClick.area:
chart.useInteractiveGuideline(false);
chart.stacked.scatter.dispatch.on("elementClick.area", function(e) {
console.log(e);
});
Just add callback to you options in controller
If using BarChart then replace multibar to discretebar
$scope.options = {
chart: {
type: 'multiBarHorizontalChart',
height: 450,
x: function(d){return d.label;},
y: function(d){return d.value;},
showControls: true,
showValues: true,
duration: 500,
xAxis: {
showMaxMin: false
},
yAxis: {
axisLabel: 'Values',
tickFormat: function(d) {
return d3.format(',.2f')(d);
}
},
callback: function(chart) {
chart.multibar.dispatch.on('elementClick', function(e){
console.log('elementClick in callback', e.data);
});
}
}
};
I have a piece of code for showing a picture that slides up from a div when the mouse enters the div, the code works exactly how i want except it bugs when the mouse hovers in and out too quickly and the animation doesn't have time to complete, I've already changed from mouseover and mouseout, to mouseenter and mouseleave and this hasn't seemed to help, any suggestions would be great
<script type="text/javascript">
document.observe("dom:loaded", function() {
var effectInExecution=null;
$('mid_about_us').observe('mouseenter', function() {
if(effectInExecution) effectInExecution.cancel();
effectInExecution=new Effect.SlideDown('about_us_mo',{style:'height:140px;', duration: 1.0 });
});
$('mid_about_us').observe('mouseleave', function() {
if(effectInExecution) effectInExecution.cancel();
effectInExecution=new Effect.SlideUp('about_us_mo',{style:'height:0px;', duration: 1.0 });
});
});
I wrote a Prototype class a while back to solve this problem, the issue can be fixed by supplying a scope parameter to the effect options. anyway here is the class i wrote:
var DivSlider = Class.create();
Object.extend(DivSlider, {
toggle: function(selector, element, options) {
element = $(element);
this.options = Object.extend({
duration: 0.5,
fps: 35,
scope: 'DivSlider',
forceOpen: false
}, options || {});
var toggle = element.visible();
if (toggle && this.options.forceOpen) {
//already open, leave.. still call callback
(this.options.after || Prototype.emptyFunction)
.bind(this, element)();
return;
}
var effects = new Array();
if (toggle) {
effects.push(new Effect.SlideUp(element, {
sync: true
}));
} else {
$$(selector).each(function(el) {
if ((element !== el) && el.visible()) {
effects.push(new Effect.SlideUp(el, {
sync: true
}));
}
});
effects.push(new Effect.SlideDown(element, {
sync: true
}));
}
new Effect.Parallel(effects, {
duration: this.options.duration,
fps: this.options.fps,
queue: {
position: 'end',
scope: this.options.scope
},
beforeStart: function() {
(this.options.before || Prototype.emptyFunction)
.bind(this, element)();
}.bind(this),
afterFinish: function() {
(this.options.after || Prototype.emptyFunction)
.bind(this, element)();
}.bind(this)
});
}
});
and to use it in your case you would simply use:
DivSlider.toggle('div.your_class', your_id);
in your enter/leave code, it can handle multiple div's of the same class also, allowing only one div per class to be open at any single time. If this does not fit your needs you can easily deconstruct the class to get the code you actually need.
http://jsfiddle.net/hL6rT/1/
I've created div with a absolute positioned image inside it the idea is to fade the image in and out like a pulse. All went well until IE8 showed up.
See the link for code. Works fine in FF, that is to say the div fades in and out in a continuous loop. But in IE8 it fades in and out once and then stops.
Works fine in FF & IE8 with mootools 1.2.5, but not 1.3 or 1.3 Compatibility Mode.
For some bizarre reason if the alert after 'fadeIn' is included in the onComplete the function will display the alert and the second alert in the 'fadeOut' onComplete, but still NOT fade the div.
Help?
it is probably easier to do just the tween on the element via the oncomplete to make a blink effect:
http://jsfiddle.net/hL6rT/2/
var fadeImg = document.id('lucy');
fadeImg.set("tween", {
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
this.element.fade(this.element.getStyle("opacity") == 0 ? 1 : 0);
}
}).fade(0);
// how you can cancel it
document.id("stop").addEvent("click", function(e) {
e.stop();
fadeImg.get("tween").cancel(); // this cancels it.
});
to fix your version:
http://jsfiddle.net/hL6rT/4/
works fine if you set the initial value of opacity to 0
var fadeImg = document.id('lucy').setStyle("opacity", 0);
var fadeIn = function() {
var inDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
fadeOut();
//alert('FadeIn Complete');
}
}).start({
'opacity': ['0', '1']
});
};
var fadeOut = function() {
var outDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeOut,
onComplete: function() {
fadeIn();
//alert(FadeOut Complete!');
}
}).start({
'opacity': ['1', '0']
});
};
fadeIn();
update IE does not seem to consistently like this particular transition being chained. you may need to remove it and use the default one.