I want a flexslider to display the first image without fading. I found this code
$('.mySlider').flexslider({
slideshowSpeed: 1000,
animationSpeed: 0,
start: function (slider) {
slider.stop();
slider.vars.slideshowSpeed = 6000;
slider.vars.animationSpeed = 3500;
slider.play();
}
});
I have to set the slideshowSpeed to something large enough so that the full slideshow does not rattle through before the speed has been changed. I set the animationspeed to 0 first and then to some finite value. This works in all browsers, in principle, except that it does not work on mobile devices. Not Android, not iPad, not even the device simulator in Chrome. If I put a breakpoint in my callback function it gets hit and the slideshow speed is changed as expected, but the animation speed is not. It remains at 0, or whatever other value I set it initially.
So my question is two-fold: the primary goal is to prevent the first slide from fading. If this can be accomplished in another way, without the event callback, then I don't need to solve the mobile browser issue. If not, I would like to know how I can change the animation speed on a mobile browser.
This is the site. I turned off the start callback for now - it is the lesser evil to have the first slide fade in, but it is not ideal.
Just set {fadeFirstSlide: false}
Seems they forgot to document it
It turns out that this is the same issue that causes the Flexslider to not fade in IE on Windows 8 (see https://github.com/woothemes/FlexSlider/issues/1043).
As a workaround I set touch: false as suggested in the post on Github. This made the transition work on devices.
It works as intended now, with the first slide not fading.
Related
I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)
I have a project where I need to make flash movie as an interactive game. Because, flash is already (or soon will be) obsolete for most of browsers, I've decided this game must be based on HTML5/JS. Because most of the graphics and animations are already done in this Flash movie (and I have its source), I'm developing it using Adobe Flash and CreateJS technology (HTML5 + Canvas + JS). So far, I like this solution pretty much, though I have an issue which I could not solve yet.
The game is a simple drag&drop matching game. The problem I have is shortly described in the question title and I will try to explain it here more detailed:
label.on('mousedown', function() {
//this.image.bg.gotoAndStop(2);
});
label.on('pressmove', function(evt) {
this.x = getStageX(evt.stageX);
this.y = getStageY(evt.stageY);
currentStage.setChildIndex(this, currentStage.getNumChildren() - 1);
stage.update();
});
label.on('pressup', function(evt) {
console.log('Hi! I'm mouseup event!')
this.x = labelInitX;
this.y = labelInitY;
this.image.bg.gotoAndStop(0);
});
Above, you can see simplified 3 event handlers I use. Everything is working fine until I uncomment second line - //this.image.bg.gotoAndStop(2);. When I do this, the pressup event does not trigger mostly, which is rather strange, because some times it does trigger (2-3 times out of 10), so the label sticks with the pointer until I press the button again.
Is this some bug or I simply does not understand something about the CreateJS and its event handlers. I tried different combinations of this. Used click instead of pressup, placing this.image.bg.gotoAndStop(2); inside the pressmove handler. Replacing pressmove handler with the stage.on('stagepressmove', handler). None did not work. this.image.bg.gotoAndStop(2); - this thing simply updates the timeframe (change the background image of the label). I do can change this image programatically (without playing timeframes) and I'm almost sure that the issue will be fixes, though I'd like to understand for myself what is wrong here or what I'm doing wrong with the event handlers.
Another, less important thing, but would be useful to know is why when pressmove event is running, the CreateJS objects stop receiving event triggers about rollover or mouseover? In DOM, by default event bubbling is working until you stop it with stopPropagation. How does it work here with CreateJS? Seems that bubbling is simply turned off here by default. How can I turn it on?
I thought I might shed some light on what I think is going on.
The normal mouse events "click", "mouseup", "rollover", "rollout", etc all function by the stage determine what the "target" of the mouse event was by default the target is the lowest-level thing that is interacted with. If you contents change while the mouse is down, it will not count as the same target when the mouseup occurs. Since positions are not re-checked without moving the mouse, the mouseover, mouseout, rollover, and rollout events may function oddly as well.
Conversely, the "pressmove" and "pressup" events do not care what is under the mouse once something is pressed. The target will always be what was pressed, which allows you to move the mouse out of the object (or even remove it), and still receive events from it. This also ensures that you receive a pressup event even if you release outside the object.
As #RandyPrad mentioned, the hitArea may solve your issue. By specifying a hit area, you are overriding the contents of your clip, so your target should always be the container (MovieClip) instead of its contents. That way no matter what is pressed inside the movieclip, it is the same target when you release. You can also get the same effect using the mouseChildren property.
movieClip.mouseChildren = false;
Hope that helps!
Please check your hit area of the button.
i think that your are playing image inside the btn is animating
please use this link http://www.createjs.com/tutorials/Mouse%20Interaction/hitArea.html
I have a site where I use TimelineLite paused and manually progress the timeline with a scrollbar.
I also have 5 pauses littered throughout the timeline so that I can click a button and watch one 'scene' of the timeline.
Each animation scene basically tweens offscreen at the top while the next element tweens into the screen from the bottom.
Everything works fine.
However when I resize the browser, I notice that the tweens of the timeline are still animating from the old values.
My timeline consists of TweenLite.to(...) tweens. For example if my browser height is 700 pixels and I tween scene 1 out of view and scene 2 into view, when I resize and use timeline.reverse();, I see scene 2 tween back to 700 pixels. (Scene 2 is absolutely positioned with translateY set to 100%) However since my tween is using y: '100%' I would expect it to reverse to 100% not this old pre resize value of 700 pixels.
Oddly enough, scene 1, which was originally at 0,0 and tweened to 0,-100%, still tweens to a percent value so that one looks ok.
So I find it really odd that scene 2 is tweening in pixels when I set a percent value and scene 1 tweens in percent.
Whats going on and how do I prevent this pixel value from caching in my tween?
I've already tried invalidate(), kill(), clear() and then setting the timeline to null, followed by reinserting new tweens on a new timeline but somehow those tween values still exist.
I'm at a loss. Any help would be greatly appreciated.
I think what you should be using is yPercent for animating your tweens instead of absolute pixel values or instead of simply animating the y property.
What yPercent (and xPercent) do is that they will always align your element regardless on the screen size, hence responsive, based on the value that you provide.
Here is an example made by the GSAP guys themselves which, by the looks of it and by what I was able to understand from your question, is actually very close to your own situation as well.
There is also a video tutorial by Petr Tichy who explains the differences between using x and xPercent.
P.S. Can you share this website you are working on or, prepare a fiddle or a codepen isolating the problem? This would help us in proposing an accurate solution.
Answering my own question since no correct answer exists. GSAP saves any tween data on the actual DOM element. Despite me setting the timeline or tweens to null, it had no effect because as I was tweening the same element, it would check the DOM element if it had the variables GSAP had saved prior.
To fix this I had to manually reset the DOM element variable.
If this is a problem for you, check the ._gsTransform variable on the element. You will see some x, y values that you can manually set to 0 or whatever else you need to set it to.
experts!
Today started to build Apple Watch version for my CelebrateMore! app and can't solve one issue. I have 2 interface controllers - Page-based kind. As soon as I set segue to "next page" from first to second, my first interface controller starts to scroll much more than before.
Screenshot from Storyboard:
Screenshot from simulator during scrolling:
Screenshot from simulator if I remove next page segue and scroll:
Already from scrollbar it can be seen, that there is a lot of empty content if "next page" is used. Does anyone has some idea, how to solve this, how to avoid "the long after content scrolling" issue?
I've struggled with the same issue for several hours until I decided to give it up for a while and focus on filling the labels with actual data at runtime. After I added some code to the main initialisation methods of WKInterfaceController ((void)awakeWithContext:(id)context {} and/or (void)willActivate {} ), this scrolling issue magically disappeared. Try to set the text of one or all the labels in your interface in code in one of the 2 methods mentioned above and see if the scrolling problem gets fixed:
[self.label setText:#"Some text.."];
It worked in my case.
Due to low reputation I cannot upvote: The solution of setting the text of a label worked for me too. I set an empty text first, then load the data and update the label there again once the request is successful. It works and calculates the height of the scroll view correctly.
override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)
//enable correct scroll height
self.titleLabel.setText("")
self.loadData()
}
I used a different way to work around it.
First put a group in the InterfaceController, and assign fixed height to it, then put other components inside the group.
To make the group occupy full screen, its height for 38mm should be set to about 142 point and for 42mm should be set to about 165 point. You can use the plus sign next to the value to enter these values for the 2 models.
Although I've set hidesForSinglePage to true, the lonely indicator is still visible. But not where the indicators normally are, but in the upper left corner (?!) of the page control. It's like it trying to hide by stepping aside, but fails by taking a few steps too little. I've been playing with all kinds of attributes, but none has even tweaked this strange behavior.
Does anyone have any clever clues?
Thanks,
Johannes
I discovered when this bug came to life, and thus come up with a solution. I had set the number of pages of my page control to 1 in Interface Builder. When I changed this to a greater number, and then let my code set it back to 1 when the NIB had been loaded, the bug disappeared.
Very strange indeed...
I got the same problem with new XCode 5 and iOS7. I didn't set up the UIPageControl via IB or Storyboard but within code. The problem occured because I had set somePageControl.hidden = FALSE; after I set the pageCount = 1. When I set hidden = TRUE before setting pageCount the single indicator disappears.