I have two circles, one is small (thumb) another one is big (info), and when the user hover over the small (thumb), then the small icon need to resize in to big one. I also need to show the new information in the big. I think I have to do this by width and height animation, because small is 100px X 100px, and big is 200 X 200 size.
Please advice on the best way to do this. I would like to avoid using plug-ins.
using jquery 1.4.2 or up, you can achieve this by using:
$(".smallCircle").hover(
function () {
$(this).animate({
width: '200px',
height: '200px'
}, 200, function() {
// Animation complete.
//do whatever
});
},
function () {
$(this).animate({
width: '100px',
height: '100px'
}, 200, function() {
// Animation complete.
//do whatever
});
});
put the class "smallCircle" in the small circle.
P.S. in each state of the hover, you can control what happens after the animation is done (the place where I put "//do whatever"), that's the place where you could insert the content of the big cicrle.
Related
I have a problem with Swiperjs, that I'm trying to make the crossfade, but it doesn't crossfade like it should, but between showing the two images it adds approximately 20% white overlay between the two images.
Hard to describe, but as if it would first fade the image to 20% white overlay, so the image brightens a bit and then it fades to the next image. So maybe it's not obvious, but still not the same as
JS:
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
loop: true,
speed: 2000,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
Just standard Swiper JS, nothing fancy here which would change how the animation behaves. HTML exactly the same as on their page, not changed.
I'm going through the same thing.I try to add "animation" function below the transition(duration) function.But error was throw said "animation was not a function".I don't know why I can't add my own function in the javascript source file swiper-bundle.js.And if modify the transition(duration) function directly it dosen't work either.Maybe I need read the source file deeply.
Is there any way to make an animation play continuously?
Here is a demo using ani.play() but it does it only once. Not continuously.
I want a 'flashing' node. It should grow and shrink in size constantly till the user says stop.
For now, I've done this
var jAni = cy.$('#rose').animation({
style: {
'background-color': 'red',
'width': 75
},
duration: 1000
});
jAni.play();
Exactly as mentioned in the documentation for ani.play()
You must chain your promises. Auto-rewind doesn't mean auto-replay, just like a tape.
let loopAnimation = ele => {
return (
ele.animation(opts).play()
.promise('complete').then(loopAnimation)
);
};
loopAnimation(someNode);
I'm using the Strobe media player (with OSMF). I need to re-size the player when someone clicks a re-size button (built into the player). How can i do this? I've searched high and low but found no results.
Set scaleMode to "letterbox", then the player automatically adjusts its size depending on its parent div. You can then change its size, for example using jquery:
function getHeight() { return $(window).height(); };
function getWidth() { return $(window).width(); };
$(window).resize(function () {
$("#strobemediaplayback").css({ height: getHeight(), width: getWidth() });
});
I have 2 facebook app one that is 872px height and another one that is 712px height. For the 827px app I have successfully re-sized the app from 800 to 872px using the facebook JS SDK. But for the 712px I haven't been able to get it down from 800px. Is there a minimum height for facebook canvas app or I'm doing something wrong?
Apparently Canvas APP can't go lower than 800 px.
have you tried to set the height dynamically? this worked for me as i am attempting to display multiple pages that are less than 800px in height. the usual height of my page tabs were ~700px.
window.fbAsyncInit = function() {
FB.init({
appId: window.FB_APP_ID
});
// set height dependent on page (min height is 800px)
// but we are attempting to get it shorter
var body_height = $('body').first().outerHeight();
FB.Canvas.setSize({
height: body_height
});
}
what also worked for me, if not grabbing the body height is to set the height to something shorter than any of your pages at load, then triggering the setAutoGrow() function to expand it to the proper height with some delay. though this will cause your canvas to be the initial set height (eg. 480px) then will expand to size whenever your timeout fires.
window.fbAsyncInit = function() {
FB.init({
appId: window.FB_APP_ID
});
FB.Canvas.setSize({
height: 480 // some height shorter than necessary
});
setTimeout(function(){
FB.Canvas.setAutoGrow();
}, 500);
}
To deal with it:
FB.Canvas.getPageInfo(
function(info) {
// console.log(info);
if (info.clientHeight< 800) FB.Canvas.setSize({ height: 800 });
}
);
In the Sencha Touch Charts 2 beta distribution, the Drawing guide example code has an example of a Sprite listening for touch start. The code given fails to draw any sprites, because it fails to insert a canvas onto the DOM. However this can be fixed by replacing this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
items: drawComponent
});
with this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
chart: drawComponent
});
Now, I'd really like to get the event handling to work. The example code continues with:
// Add a circle sprite
var myCircle = drawComponent.surface.add({
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
});
// Now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
fill: '#ccc'
}, true);
// Remember always to refresh the image
drawComponent.surface.renderFrame();
// or animate an attribute on the sprite
// no need to refresh the image when adding animations.
myCircle.fx.start({
fill: '#555'
});
// Add a touch listener to the sprite
myCircle.addListener('touchstart', function() {
alert('touchstarted!');
});
but that final alert never happens on touch. Any ideas?
drawComponent.addListener('touchstart'... works fine, but is of course not localised to the circle sprite.
--- after more investigation ---
I think the answer is simply that event handling on sprites his not implemented yet. e.g. in touch-charts/src/draw/engine/Canvas.js we have in the definition of Ext.draw.engine.Canvas,
getSpriteForEvent: function(e) {
return null; //TODO!!!
},
OK - time to change the question from 'how?' to 'when?':
'When will Sencha Touch support Sprite event handling?"