I searched all around for it but couldn't find a solution which would turn off sliding (or any animation for that matter) animation on page transition. I have simple application with 4 views which just displays a bunch of data. I am testing performance of my application on various devices and thought turning off animations would be one of the test cases to follow.
I tried several ways, such as: (caution: these are all the solutions I found on the internet, some of them might not make sense. I am still learning the framework :)
Trial I: (in launch function)
Ext.override(Ext.Window, {
animShow: function(){
this.afterShow();
},
animHide: function(){
this.el.hide();
this.afterHide();
}
});
Trial II: (in launch function, replacing Trial I)
Ext.Anim.override({
disableAnimations:true
});
Trial III: (inside my view class)
config: {
showAnimation: false,
hideAnimation: false,
navigationBar: {
hidden : false,
animation: false
},
items: [
{
xtype: 'logincard',
flex : 1
}
]
}
However, I could turn off animation in navigation bar using: (in my view class as well)
navigationBar: {
hidden : false,
animation: false
}
So is there someway of totally disabling the page transition animation in Sencha Touch 2.2.1?
Any help would be highly appreciated!
Finally got it working. I guess I didn't have adequate information on my question. I was using Navigation View which would consequently push other views via controllers.
All I had to do was put the following layout configuration inside config of my Main view which extends Navigation View.
layout: {
type: 'card',
animation: false
}
This would disable the animation on screen transition. Additionally, you can override duration, type, etc of the animation using the following configuration:
layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-out',
type: 'slide',
direction: 'left'
}
}
This is the default configuration for animation for Navigation View. I found help from here.
I had the problem after disabling the animation I got errors like:
Uncaught TypeError: Cannot read property 'dom' of null
The solution is a super-fast animation:
animation: {
duration: 1,
//easing: 'ease-out',
type: 'fade'
//direction: 'left'
}
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I have initialized my player with this code. It works fine on everything except on smart tv and some phone browser. My suspected guess was that it is due to the touch events on those devices. But I have already used every turnaround but none of it worked.
videoplayer = videojs(mId+'-'+season+'-'+episode, {
height: '100%',
width: '100%',
poster: poster,
controls: true ,
autoplay:false,
preload: 'auto',
sources: nsrc,
techOrder: ['html5', 'flash'],
plugins: {
chromecast:{
appId:'F6399642',
metadata:{
title: mId,
subtitle:'Synopsis display on tech wrapper',
}
},
videoJsResolutionSwitcher: {
default: 480,
dynamicLabel: false
}
}
});
I have currently used this function but it also didn't worked. I am stuck on this error for so long
//Fixing Tv Player
videoplayer.on('click touchstart', function(){
videoplayer.controlBar.addClass('vjs-hidden');
});
videoplayer.on('click', function(){
videoplayer.controlBar.removeClass('vjs-hidden');
});
After lot of head banging I found the fix. The bug was inside chromecast plugin for videojs and I fixed it after disabling chromecast plugin for unknown browsers.
I'm using fullpage.js to build a site with VirtualBox to test on IE 10/11. I'm noticing that when I scroll the window advances two pages down, rather than just one. Has anyone else experience this, or is it maybe that I am using VB? I'm able to replicate the bug on the full page website.
Live example: http://realbadrabbits.com/projects/fullpage/index.html
Here's my initialization:
$(document).on('ready', function() {
// Fullpage settings
$('#fullpage').fullpage({
anchors: ['landing', 'navigation', 'page1', 'page2', 'page3'],
css3: true,
navigation: true,
navigationPosition: 'left',
navigationTooltips: ['Landing', 'Navigation', 'Page 1', 'Page 2', 'Page 3'],
scrollOverflow: true,
loopBottom: true
});
});
Thanks!
I'm noticing that when I scroll the window advances two pages down,
rather than just one.
It sounds like you are initializing fullPage.js multiple times!
Make sure you only initiate it once!
A link to your URL will help to find the issue. Or at least, a reproduction on jsfiddle or codepen.
Update:
The question has been answered in the github issues forum. Probably due to the use of Virtual Box.
I am trying to implement Sorgalla jCarousel to my website, but I can't seem to get it to work, even though to my knowledge, I have done everything as instructions say.
To help myself think and to simplify the situation, I even created a fiddle with just basic functions, and even that doesn't work!
http://jsfiddle.net/b2cwv/1/
Any suggestions what might be wrong with this? It's simplified from what I have in the website, but the code is basically the same.
$(document).ready(function() {
$(function() {
$('.jcarousel').jcarousel({
list: '.jcarousel-list',
items: '.jcarousel-item',
rtl: true,
center: true,
animation: 'slow'
scroll: '+=1'
wrap: 'both'
});
});
$('.jcarousel-prev').click(function() {
$('.jcarousel').jcarousel('scroll', '-=1');
});
$('.jcarousel-next').click(function() {
$('.jcarousel').jcarousel('scroll', '+=1');
});
});
It simply just doesn't fire.
Add the comma after all the configuration
animation: slow
Fix the css list width
width: 2em
check this fiddle
http://jsfiddle.net/raunakkathuria/b2cwv/2/
Its working now
For example - http://www.tumblr.com
Log out and try to click buttons "Log In", "Sign up", "30 reasons why you'll love Tumblr" (especially interesting).
How to create this slide effect?
P.S: i'm not asking for provide me working code, just guidelines and advices.
UP: seems like i found the possible solution. Code from tumblr js files.
return new Effect.Move(element, {
x: initialMoveX,
y: initialMoveY,
duration: 0.01,
beforeSetup: function(effect) {
effect.element.hide().makeClipping().makePositioned();
},
afterFinishInternal: function(effect) {
new Effect.Parallel(
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
new Effect.Scale(effect.element, 100, {
scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
], Object.extend({
beforeSetup: function(effect) {
effect.effects[0].element.setStyle({height: '0px'}).show();
},
afterFinishInternal: function(effect) {
effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
}
}, options)
);
}
You'll find a working demo of a full-page slide here: http://acarna.com/full-page-slide.php
View the source and the CSS as both are requird for this to work. The main keys to note are...
You need a container in which 2 (or more) screen-sized pages are held (#wrapper in my demo)
This container needs to have its overflow property set to hidden
You must detect the screen height each time you run the animation (in case the window size has changed)
Have you check out the scripts and css they have used in their pages?
just check it out you will get the clue how to do it.
I made this effect on my own site too. I don't know how tumblr did that, but I have figured out my own way to do this(for tumblr's effect as an example):
step 1. before redirect to a new url, slide the bottom section up of current page
step 2. slide down the top section when the new url document.ready
Update years later:
Since I just got a new vote-up, I discovered this old answer which is now a little bit outdated.
With modern javascript, you just need to use history.pushstate, all effects are performed in one page. After changing the page content with js, you can use pushstate to change the url, which makes it like navigating with effects.
To read more about pushstate, please refer https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history