We Keep Coding

WinJS enterPage animation not working as expected

I wanted to add animations to my app on page enter, and hooked with the default WinJS.UI.Animation.enterPage(element), and that worked fine sliding in the element from right to left.
I need to slide it from bottom (100px) to top. Once I overrode the default values with WinJS.UI.Animation.enterPage(element, { top: "100px", left: "0px" }) I saw no animation at all on my screen which is weird.
However when coupled with WinJS.UI.Animation.exitPage(oldElement), the animation seemed to work but I wanted to further tweak the timing.
following as per https://msdn.microsoft.com/en-us/library/windows/apps/Dn127042(v=win.10).aspx#creating_custom_animations, didn't help. After using the example from "Combining custom animations and transitions" in the link, I could see only the opacity changing and the element fading in, however no translation at all. I tried the same pairing with WinJS.UI.Animation.exitPage(), and adding my own customExitPage - basically using from WinJS, and with just opacity... and nothing just works.
I was referring to some of the animation implementations from here as well -
https://github.com/winjs/winjs/blob/ad8691b3d5227ff1576a5d2a90a42f022498d2a9/src/js/WinJS/Animations.js, to get control over the timing.
Anyone else having this issue? or am I doing something wrong... or is it WinJS behaving bad?
EDIT:
weirdly enough the "to top" animation with enterPage(element, {top: "100px", left: "0px"}) started working. However the custom animation still remains elusive.

well, I was able to finally figure out the "weird behavior". The #keyframes should have been set in CSS, and I was trying a few other things and apparently that's the reason that it didn't work.
However, I would probably say the explanation could have been a little more clearer in the site as well.
when we are already providing the from - to values in the javascript, I would otherwise about providing the same again as part of CSS too which is still weird.
Like mentioned in the site,
add this to css: #keyframes custom-translate-in { from { transform: translateY(50px); } to { transform: none; } }
and have this in js:
function runCustomShowStoryboard() {
return WinJS.UI.executeAnimation(
target,
{
keyframe: "custom-translate-in",
property: "transform",
delay: 0,
duration: 367,
timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
from: "translate(50px)",
to: "none"
});
}
Never was able to figure out why and how the "bottom to top" animation started working (probably restarting visual studio helped)

Flexislider Thumbnails Click Issue - Intermediate Issue

DEMO
Steps : click 1-3 again and again and then click on active thumnail twice then next thumnail click wont work.
I have implemented Flexi Slider with Thumbnails, Its working fine, but sometimes The Thumbnails are not clickable. Not sure where Iam going Wrong.
/* New Slider */
$('.sliderNew #carousel').flexslider({
animation : "slide",
controlNav : true,
animationLoop : true,
slideshow : true,
itemWidth : 140,
itemMargin : 5,
minItems : 1,
asNavFor : '.sliderNew #slider',
reverse : false
});
$('.sliderNew #slider').flexslider({
animation : "slide",
controlNav : false,
animationLoop : true,
slideshow : true,
reverse : false,
sync : ".sliderNew #carousel",
start: function( slider ) {
$('.sliderNew #carousel .slides li').on('click',function(event){
//alert('asd')
$('.sliderNew #slider').flexslider("play");
});
}
});
/* New Slider */
Appreciate your help..
Thanks..

I've done some digging and found that this is probably due to a bug in the FlexSlider version you're using (version 2.1). In the Github updates (unfortunately they only go back to version 2.2) I did read something about "click handler updates", so I guess you've been so unfortunate to stumble upon an old bug. I've tracked it back to this update on GitHub, but that's more or less a guess.
On the bright side, they've fixed the bug. I've updated the JSFiddle to use the new version of FlexSlider:
http://jsfiddle.net/ennesht2/
You probably also want to check what you're doing with your CSS/positioning, because the demo looks like it's falling apart in Safari/Chrome (OSX). I've done one quick fix in your CSS to make the navigation element appear in this new version (uncommented the height:0), but you'll also want to update your CSS to use FlexSlider's version 2.3 one.
.sliderNew #carousel .flex-viewport {
border :none;
//height:0;
display:inline-block;
width:100%;
}

Firstly, since you are already using IDs to grab your DOM elements, you can simply use $('#slider') instead of $('.sliderNew #slider'). The same logic goes for the carousel element :)
I think you may wish to set the click handler on the img element, rather than its parent (the li element). So perhaps:
start: function( slider ) {
$('#carousel .slides li img').on('click',function(event){
$('#slider').flexslider("play");
});
}

I have a hunch on this one, I think that whenever your slide is running, it's coming over your thumbs, this happened once in a project I participated in.
The following is not a good practice of z-index but it should help you find out if this is the problem.
Add the following to your css to test the theory:
#carousel .slides li{
z-index:9999;
}

How to hide images until AFTER jquery flexslider finishes loading

I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});

You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});

Set the default style for "display" to "none". using show() will change this style value.

Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!

… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!

I experienced a similar issue when I forgot to include the flexslider.css

I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??

Adding animation to this testimonial slider

I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?
any ideas are greatly appreciated.
Thank you.
Here is a link to the slider code: jsfiddle.net/XJVYj/82

I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.
How much of the CSS can I change? Or should it also still work without js activated?
Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?
// EDIT
OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled.
The jQuery Code follows...
$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});
$("input#first").click(function(){
$("div.one").animate({left:0},600);
$("div.two").animate({left:300},600);
$("div.three").animate({left:600},600);
});
$("input#second").click(function(){
$("div.one").animate({left:-300},600);
$("div.two").animate({left:0},600);
$("div.three").animate({left:300},600);
});
$("input#third").click(function(){
$("div.one").animate({left:-600},600);
$("div.two").animate({left:-300},600);
$("div.three").animate({left:0},600);
});​
jsfiddle.net/mYhEV/2/
Hope it helps.
PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.

Try Using these:
Flex Slider
Timelinr
SmartGallery
Skitter

There is documentation literally right in the script file which has options you can use:
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
intervaltime: 3000, // interval time in milliseconds.
rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
Secifcally: animation: true, // false is instant, true is animate.
Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)
$('YOUR_SLIDERr').tinycarousel({ animation: true });​

jQuery animate problems

I use the following snippet to make an element's background lightblue, then slowly fade to whiite over 30 seconds:
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "white" }, 30000);
Two questions.
First, instead of fading to white, is there a way to fade opacity to 100%? That way I don't have to change "white" if I choose to change the page's background color?
Second, about once out of every 10 or 15 times, the background stays lightblue and fails to fade to white. I'm using the latest versions of jQuery and the UI core. What could be going wrong?
EDIT: Bounty is for a solution to problem regarding second question.
EDIT2:
Apparently I got downvoted into oblivion because I said I rolled my own solution but didn't show it. My bad. I didn't want to be self-promoting. My code works 100% of the time and doesn't require jQuery. A demonstration and the code can be found at:
http://prettycode.org/2009/07/30/fade-background-color-in-javascript/

For your second question: in my experience this is usually because a Javascript error has occurred somewhere else on the page. Once there is one Javascript exception, the rest of the page stops running Javascript. Try installing Firebug (if you haven't already), then open up the "Console" tab and enable it. Then any javascript errors or exceptions will be printed to the console.
Another thing to try (which kinda contradicts my last statement...) is to disable all your browser plug-ins to see if you can recreate. Sometimes they interfere with scripts on the page (particularly GreaseMonkey.)
If you could provide a sample HTML snippet which reproduces this animation problem it would be a lot easier for us to help you. In the script I have pasted below, I can click it all day, as fast or slow as I like, and it never fails to animate for me.
For the first question: I know you said you'd found a workaround, but the following works for me (even on IE6) so I thought I'd post it, since it may be different from what you were thinking. (Note that setting CSS "opacity" property through jQuery.css() works on IE, whereas IE does not support the "opacity" property directly in CSS.)
<html>
<head>
<style>
body { background-color: #08f; }
#test { background-color: white; width: 100px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var myOpacity = 0.125;
$(function(){
$('#test').css('opacity', myOpacity);
$('a').click(function(){
myOpacity = 1.0 - myOpacity;
$('#test').animate({ opacity: myOpacity });
return false;
});
});
</script>
</head>
<body>
<p>Click me</p>
<div id="test">Test</div>
</body></html>

Dont forget the color plugin.
See here
When the color fails to animate to blue you could try to use the callback function to log a message to the console. You can then check that the event actually fired and completed. If it does then you could potentially use two animates. The first one to animate to a halfway house color then the use the callback to animate to white (so you get two bites of the cherry, if the outer fails but completes the callback has a second go)
It would be good if you could try to recreate the issue or give a url of the issue itself.
e.g
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
$(this).animate({ backgroundColor: "#ffffff" }, 15000)
});

You could always use something like this, avoiding the JQuery animate method entirely.
setTimeout(function() { UpdateBackgroundColor(); }, 10);
UpdateBackgroundColor() {
// Get the element.
// Check it's current background color.
// Move it one step closer to desired goal.
if (!done) {
setTimeout(UpdateBackgroundColor, 10);
}
}
Also, you may be able to remove the "white" coding by reading the background color from the appropriate item (which may involve walking up the tree).

It is possible to have jQuery change the Opacity CSS property of an item (as mentioned in another answer), but there's two reasons why that wouldn't work for your scenario. Firstly, making something "100% opaque" is fully visible. If the item didn't have any other modifications to its opacity, the default opacity is 100%, and there would be no change, so I'm guessing you meant fading to 0% opacity, which would be disappearing. This would get rid of the light blue background, but also the text on top of it, which I don't think was your intent.
A potentially easy fix for your situation is to change the color word "white" to "transparent" in your original code listing. The color plugin may not recognize that color word (haven't checked documentation on that yet), but setting the background color to "transparent" will let whatever color behind it (page background, if nothing else) shine through, and will self-update if you change your page background.

I'll answer your first question.
You can animate opacity like this:
.animate({opacity: 1.0}, 3000)
I think you can try using fadeOut/fadeIn too..

What about:
$("#" + post.Id).fadeIn( "slow" );

You could possibly have two divs that occupy the same space (using position: absolute; and position: relative; setting the z-index on one higher to make sure one is above and the other is below. the top one would have a transparent background and the one below would have a background color. then just fadeout the one below.

As for the second question:
If you think the default animation classes from JQuery are not properly working you could try Bernie's Better Animation Class. I have some good experiences with that library.

Animate only works for numbers. See the jquery docs. You can do opacity but you can't do background color. You can use the color plug in. Background-color uses strings like 'red', 'blue', '#493054' etc... which are not numbers.