Nivo Slider - Previous slide doesn't disappear until next slide is fully loaded creating image overlap - nivo-slider

Everything working fine with my slider except the previous slide stays on the screen with full opacity until the new one completely loads. Then the last one finally disappears from behind the new one.
Weird glitch. I've used Nivo several times and not sure why I'm seeing this on my site. I reloaded the default package files and still nothing.

Related

Tabbing breaks slider if slides have links using glide.js

I have a slider built with Glide.js that has 6 slides, all with links. It needs to be tabbable for our keyboard users, but so far it's not working.
If the user tabs through the page, it stops on every photo and then jumps to the first bullet below.
Then if the user clicks the first bullet it does nothing. as the user progresses through the bullets, the images slide and eventually go right off the screen into empty space. The best the user can then do is tab back to the first bullet which only brings them as far back as image 3. Is this a bug or is there something that can be done? I feel like I've tried everything.
Here's my code on code pen:
https://codepen.io/cristenrh/full/ExpwRNz
or an example on my website:
https://hewettcentral.com/cristen/carousel.html
I've tried using different variables for bullet one, like "<<". I've tried using glide.update() once the user gets to the first bullet and I've even tried glide.mount(). Neither work. The closest I've come is to start using negative numbers in the bullets, but that really breaks it further.

Section at bottom of screen that doesn't respond to onpress event, what's causing this?

I'm working on an existing React-Native app, and in the iOS version, there's a problem where a portion of the bottom of the screen does not respond. At first it was thought to be on a specific screen, but upon further investigation, it was found to be affecting other screens as well. The control used on the first screen where the problem was noticed is TouchableOpacity, but a rectangular section in the middle at the bottom of the screen does not respond, but in either corner at the bottom of the screen it does respond. Another screen has a ListView, and if you attempt to scroll from that same bottom middle area, it won't, but everywhere else, it will. This is evident in both the simulator and on the physical device. It acts like there's something in the road floating over the top of everything.
I've tried using the Accessibility Inspector to identify the cause, but this hasn't revealed anything.
The highlighted area in the screenshot above is where I'm referring to.
To complicate things further, this problem doesn't exist in the Android version.
Has anyone experienced this before, and if so, what was the cause and how do I fix it?
Edit: I've now determined the cause is an Animated View that's hanging about, it seems not all the child elements within it are having their opacity set to 0. I've attempted to address this using pointerEvents, but this just moves the problem to a different child element.
Anyone have any suggestions?
The issue turned out to be that the parent was having it's height changed during the show and hide events to avoid this same issue in Android, so we need to only change it if the platform is Android.
this.setState({height: (Platform.OS === 'ios') ? 50: 0});

Is this a z-index issue?

I have a menu (this is the menu I'm using with a few modifications: http://multi-level-push-menu.make.rs/) that floats over an image that is linked. Whenever a link is click that is in front of the image, both links are activated.
I've tried added a higher z-index to the menu wrapper, but still not working. Thoughts?
Here is a screen cap of the problem:
http://tinypic.com/r/znoeh2/8
I know the obviously answer is to make the image not clickable, which I will change but I'm concerned this could cause problems somewhere else on the site.

Silverlight 3 - Elements inside an element dont arrange sometimes

I have a grid/canvas that has an element (say an icon with an image and text overlayed) added to it dynamically via code.
Most of the time it renders correctly when added (content is aligned properly inside it),
but sometimes all the content sits in one corner.
I can remove/add/remove/add/remove/add and it will eventually do it
After a movement of the parent canvas, the element corrects itself as if the layout has been updated.
I have tried the following on Loaded and OnApplyTemplate for both the element and the element parent but it still seems to happen occasionally
InvalidateMeasure()
InvalidateArrange()
UpdateLayout()
Any ideas on why the content wouldn't arrange would be appreciated cause its driving me nuts
I'm not sure why it works for you sometimes but not others. But a grid has the inherent ability to dynamically resize itself and its contents. A canvas doesn't (you'd have to handle that manually in code).
If you change your canvas to a grid does it work? A grid has slightly more overhead than a canvas but it sounds to me like you need its functionality anyway.

Components in module disappear when browser is resized (Flex 3)

We have this Flex app built on Builder 3 and we're using SuperTabNavigator from FlexLib to have some modules displayed. The thing is, whenever the user resizes the browser window all the contents on any tabs open simply disappear and there's no way to get them back. This only happens the first time, so if you close these 'broken' tabs and reopen them, you can resize all you want, but you still lost all you were doing in them and this is unacceptable. I've done some testing and found the module in that tab doesn't dispatch the resize events when this happens. It's dispatched when it opens (everything is set to 100% to fit the browser window, so it resizes on startup) and every other time you resize it without 'breaking' it. It gets weirder. I've also found that resizing works perfectly as long as you resize it to a size larger than the original (i.e. you open it in a browser window that is restored and then maximized), but even after doing that, if you change its size back to something even a pixel smaller than the original, the module just disappears. Everything else remains in perfect working conditions: any components outside tabs and the tabs itself work, but (summing up) anything within any tab open at the moment you first resize the browser window to a size smaller than the original just disappears.
I understand that this is a weird problem and hope some of you might be able to help me. Feel free to ask any questions if anything wasn't clear.
Thanks in advance.
I had this exact same problem with my application. The issue stemmed from the fact that the RemovedFromStage event was being fired when the window was sized smaller than its original size. I was catching the RemovedFromStage event and hiding my component, which resulted in this behavior. A more detailed explanation can be found here.

Resources