Is there a way to slide and fade at the same time in Scriptaculous. In Jquery you can use animate but not sure how with Scriptaculous to animate multiple properties on one element.
Do you mean slideUP()?
You can use Effect.Parallel():
new Effect.Parallel([
new Effect.SlideUp(element, { sync: true, x: 20, y: -30, mode: 'relative' }),
new Effect.Fade(element, { sync: true, from: 1, to: 0 })
], {
duration: 0.8,
delay: 0.5
});
Related
So, I've been working with vue-konva and I have something like this:
<v-container>
<v-stage ref="stage">
<v-layer ref="baseImage">
<v-image>
</v-layer>
<v-layer ref="annotationLayer">
<v-rect ref="eventBox">
<v-rect ref="rubberBox">
<v-rect ref="annotationRect">
</v-layer>
</v-stage>
<v-container>
Currently there are some issues if I want to draw new boxes, when there are other annotationRects already on the image. Because they are technically above the eventBox and rubberbox, they are "blocking" these two layers when the cursor is above an existing annotationRect.
But, I don't want to just constantly have eventBox and rubberBox be on top of annotationRect because I need to be able to interact with annotationRect to move them, resize them ,etc.
Is there a way for me to reorder eventBox, rubberBox, and annotationRect, i.e. changing the order to (bottom to top) annotationRect-eventBox-rubberBox from the original eventBox-rubberBox-annotationRect and back, on the fly, for example when the vue component receives an event from another component?
You need to define your eventBox, rubberBox, and annotationRect inside order array in the state of your app. Then you can use v-for directive to render items from the array:
<template>
<div>
<v-stage ref="stage" :config="stageSize" #click="changeOrder">
<v-layer>
<v-text :config="{text: 'Click me to change order', fontSize: 15}"/>
<v-rect v-for="item in items" v-bind:key="item.id" :config="item"/>
</v-layer>
<v-layer ref="dragLayer"></v-layer>
</v-stage>
</div>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
stageSize: {
width: width,
height: height
},
items: [
{ id: 1, x: 10, y: 50, width: 100, height: 100, fill: "red" },
{ id: 2, x: 50, y: 70, width: 100, height: 100, fill: "blue" }
]
};
},
methods: {
changeOrder() {
const first = this.items[0];
// remove first item:
this.items.splice(0, 1);
// add it to the top:
this.items.push(first);
}
}
};
</script>
DEmo: https://codesandbox.io/s/vue-konva-list-render-l70vs?file=/src/App.vue
I want to crop label inside the box of data in x-range chart when it overflows. How can I do it?
Code of the point:
{
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2,
dataLabels:[{
format: '54687687',
crop: true
}]
}
Example in jsfiddle: https://jsfiddle.net/levra/kmefL0tr/1/
This behavior is not supported by default in Highcharts, but in the afterDrawDataLabels event, by using css method, you can set textOverflow: 'ellipsis' and the right width styles:
var H = Highcharts;
H.addEvent(H.Series, 'afterDrawDataLabels', function() {
var movement;
this.points.forEach(function(p) {
if (p.shapeArgs.width < p.dataLabels[0].width) {
movement = (p.dataLabels[0].width - p.shapeArgs.width) / 2;
p.dataLabels[0].css({
width: p.shapeArgs.width,
textOverflow: 'ellipsis'
});
p.dataLabels[0].text.attr({
x: movement
});
}
});
});
Live demo: https://jsfiddle.net/BlackLabel/h3fwxjb7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
I am trying to repurpose code to create a custom progress bar - but I am unable to understand how to make the final change.
The current implementation does the progress bar. What I would like is for the progress bar to update the text and then disappear on its own.
var win = Ti.UI.createWindow({
backgroundColor: 'white',
});
var label1 = Ti.UI.createLabel({
text: 'Working on it...',
textAlign:'center',
});
var track = Ti.UI.createView({
width: "60%", height: "20%",
borderRadius:40,
backgroundColor: 'red'
});
var progress = Ti.UI.createView({
borderRadius:40,
left: 0,
width: 5, height: "100%",
backgroundColor : "green"
});
track.add(progress);
track.add(label1);
win.add(track);
win.addEventListener('open', function () {
progress.animate({
width: "100%",
duration: 1000
});
});
win.open();
So when the final green progress is complete - I would like to
a. replace the "working on it" with "complete"
b. after 1000 ms - make the entire progress bar disappear.
No need to add Listener for complete event, you can add anonymous function in animate method itself
e.g
progress.animate({
width: "100%",
duration: 1000
},function(e){
label1.text = "complete";
win.remove(track);
});
You can use complete event listener of Animation object
// create the animation
var animation = Ti.UI.createAnimation({
width: "100%",
duration: 1000
});
animation.addEventListener("complete", function onAnimationComplete(e){
// YOUR CODE HERE
animation.removeEventListener("complete", onAnimationComplete);
});
progress.animate(animation);
More details Titanium.UI.Animation
We have an application which is implemented with slide up animation already. But, now we want to change that to slide right animation. We want to display a slideshow like display for the content. What all i need to change in the existing code, to do so?
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption')) ?
$('#gallery a:first') : current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({
opacity: 0.0
})
.addClass('show')
.animate({
opacity: 1.0
}, 1000);
//Hide the current image
current.animate({
opacity: 0.0
}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({
opacity: 0.0
}, {
queue: false,
duration: 0
}).animate({
height: '1px'
}, {
queue: true,
duration: 300
});
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({
opacity: 0.7
}, 100).animate({
==> height: '20px'
}, 500);
//Display the content
$('#gallery .content').html(caption);
}
This code, slides up the content. I tried placing,
right: '700px', in the line marked with ==>
In that case, it appeared like, the second content alone came from right to left.
Any help is greatly meant.
Thanks
In line 42 try replacing the line height: '1px' with width: '1px'. Just a thought, cant guarantee it will work.
can you call Effect.Move and Effect.Appear on the same selector using scriptaculous or will one cancel out the other. If so whats a way around this as one runs slightly before the uder finishes.
use Effect.Parallel
For example:
new Effect.Parallel([
new Effect.Move('element', { sync: true, x: 100, y:300, mode: 'relative' }),
new Effect.Appear('element',{ from: 1.0, to: 0.3 })
], {
duration: 1.0,
delay: 0.5
});
Effect.Parallel