I want to open this window on top of an existing almost full screen modal. The issue is that the modal mask doesn't cover the parent modal and the modal behind the parent is twice as dark. Is there a solution to this?
isc.Window.create({
height: 100,
width: 250,
autoCenter: true,
isModal: true,
showModalMask: true,
modalMask: this
});
I don't think that setting modalMask is what you need. Try setting modalMaskOpacity instead (default is 50, and 100 means no Opacity).
Related
I have a question about Swiper and how to display a loading animation in a responsive environment.
It's Swiper Version: 3.4.2.
What I did
Hi, I have set the .swiper-container to
{ width: 100%; height: auto; }
because the site is responsive.
Otherwhise I use the standard swiper.min.css and swiper.min.js with these settings:
autoheight: true,
grabCursor: true,
slidesPerView: 1,
autoHeight: true,
keyboardControl: true,
paginationType: 'fraction',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
Expected Behavior
I would like to have the container set to the height of the first image and have a loading animation displayed in the middle of the container until the images are loaded.
Actual Behavior
The swiper-container is only the height of the arrows. Then next thing you see is the cropped first image (the size of the container which is the size of the arrows), and only after that, the container is set to the size of the first image.
I would really appreciate some help.
Thanks
Stefan
Have you tried Lazy Loading?
The slideshow(/browser) will be unable to determine your slides height until the images have loaded, so you may have to manually determine the height of the image on the first slide and initialize the container with that.
See the Images Lazy Loading demo.
I have added a TimeLineMax to a scene that I am working on. The functionality is working great but I am having trouble with a few details.
I would like my scene to pin like this site http://www.google.com/inbox/#bundles . By this I want multiple pins within one scene so that a user can't scroll through my animations without viewing them.
Here is a demo site of my work so far : https://so-staging.herokuapp.com/users/sign_in#publisher-demo-container
You can see my progress if you scroll down. Three steps will pop up and then animate away. I also have adjusted the background position of #publisher-demo-steps based on scroll.
However this isn't the desired goal. I would like this:
1. Pin #publisher-demo
2. Fire step 1 animated background-position on scroll.
3. Fire step 2
4. Fire step 3
I would like each step to be pinned so that a user can't go to the next step until the animation is complete.
I know this is confusing and I have been staring at it way too long. Thanks for the help. Here is my scrollmagic and GSAP code.
var controller = new ScrollMagic();
var tween = new TimelineMax()
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"}))
.add(TweenMax.to(".blue-circle", 1, {display: "block"}))
.add(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "22% 52%"}))
.add(TweenMax.to(".red-circle", 1, {display: "block"}))
.add(TweenMax.to(".red-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "76% 50%"}))
.add(TweenMax.to(".green-circle", 1, {display: "block"}))
.add(TweenMax.to(".green-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}));
var scene = new ScrollScene({triggerElement: "#publisher-demo", duration: 4000, triggerHook: -100})
.setPin("#publisher-demo")
.setTween(tween)
.addTo(controller);
If I understand you correctly you would like to trigger the animations to play unbound from scroll progress.
The way you do this is by not linking the scene that does the pin.
As soon as a scene has a duration it will link animation progress to scroll progress.
Then you just add a scene for each animation trigger point.
i.e. like this:
new ScrollScene({triggerElement: "#trigger-element", duration: 4000, triggerHook: 0})
.setPin("#publisher-demo")
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0})
.setTween(new TimelineMax()
.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"})
.to(".blue-circle", 1, {display: "block"})
)
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0, offset: 300)
.setTween(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.addTo(controller);
General notes:
As you see I used a trigger element that is different from the pinned element. It should be positioned absolute and located at the same position as the pinned element. the reason I do this is, because the pinned element moves and would supply a wrong start position for the other scenes.
A triggerHook of -100 doesn't make any sense. The value can by definition only be between 0 and 1.
instead of TimelineMax().add(TweenMax.to()) you can use the shorthand TimelineMax().to() (see http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/)
Note, that ScrollMagic 2 has been released for a while now. The syntax is very similar so you should consider upgrading.
I'm using Flexslider for a project of gallery and I want to modify the navigation system.
On keypress/swipe/click on arrows, four images displayed disappear and are replaced by four new.
Is it possible to modify the behavior of the navigation to move images one by one ?
Thank you very much for your help !
Z.
You may want to use property move, which is defined as
//{NEW} Integer: Number of carousel items that should move on
animation. If 0, slider will move all visible items.
So, your code will look like this
$(window).load(function() {
$('.slidewidget1').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 210,
controlNav: false,
itemMargin: 0,
slideshow: false,
move: 1,
minItems = 4,
maxItems = 4
});
});
plus, of course, your customization of width, etc.
Documentation
I have a Cross-Platform app.
I use percentages to keep the aspect of the app similar for every screen size.
So i put a view height to
var view = Titanium.UI.createView({
borderRadius:10,
backgroundColor:'red',
height:"100%",
});
window.add(view);
The problem come when i show the keyboard.
The view is auto resized.
So i need that the keyboard goes OVER the view without resize it.
Note: If i use "dp"/"dpi" the height of the view is not the same in different screen devices.
Any suggestion?
I did not have this problem before, but there are several options having the same effect as 100% height:
height: Ti.UI.FILL
height: Ti.Platform.displayCaps.platformHeight
or you could achieve the same by setting the values for
left: 0, right: 0, top: 0, bottom: 0,
All of them should make a view fill the screen.
Please note that it might be necessary to handle orientation changes.
first you need to set top property then if it does not work then also set height with platformHeight.
It's not clear what your complete view looks like. Your example doesn't have a text entry type control which is what would trigger the keyboard opening.
You can create a separate view that contains the textArea and set this 2nd view with fixed positions. Then the main view should stay put.
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.