I use ScrollMagic to trigger animations on each section of a web page. This works great for desktop and for some browsers on mobile.
However there are some mobile browsers (older versions of Safari and Chrome (on ipad)) that don't play these animations until the scrolling event is finished. I know there are ways around that. However instead, I would like to simply turn off these animations when not supported.
Is there a way to detect that with Modernizr? Or would I have to target specific browsers and its versions?
You wouldn't detect parallax animation. That isn't a browser feature, that is something that you can use browser features to accomplish.
In this case you would you be looking to detect if you are reflow the page during a scroll, or if it waits until after the scroll event fires. There is currently no detect for this, and creating one would get pretty greasy.
I believe what you are seeing is the result of the scroll event not firing as you scroll on certain browsers. I cannot think of a way to simulate this with javascript (triggering a scroll event will obviously only trigger one scroll event, so there isn't anything to gain there). As a result, I am not confident that you would ever be able to accurately detect this.
I completely agree with Patrick's answer, but would like to add that it is indeed possible to have immediate scroll events on the mobile versions of chrome and safari, you are talking about.
The issue you're describing is related to all iOS devices before version 8.
Before then the mobile browser engine did not trigger "true" scroll events while scrolling, but only once scrolling had come to a full halt (so after the inertia stopped). Even the execution of javascript was suspended, so you couldn't just run a loop to check the scroll position.
Long story short: There are ways around it using containers for scrolling and requestAnimationFrame.
The easiest way I found to get scroll events for pre iOS8 devices is iScroll.
I would recommend to check out this: http://janpaepke.github.io/ScrollMagic/examples/advanced/mobile_basic.html
and this:
http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html
So getting back to your original question: How to detect when you would even need those workarounds.
You'd need to check if the you're on iOS version 7 or lower, which, to my knowledge, can't be done with modernizr, as it is a feature detection library.
So check out this thread to learn more: Detect iOS version less than 5 with JavaScript
Related
I currently have a series of 8 separate html files, with the idea that each one is a separate page in an iPad app. I have used jQuery Mobile to implement the page swipe between pages by using the 'data-next' and 'data-prev' attribute. However, the results are not great as i sometimes get a page flicker when i swipe, and css animations are very choppy when I test it on an actual iPad. I am also getting a 1 second delay before the actual swipe happens. I know JQM has a default delay of 300ms, but this is waaay longer! I have tried using the css 'translate3d' technique on animated elements, but it doesn't seem to fix it. I'm putting it down to JQM just being buggy as hell.
So my question is this..Is it possible to bring these files into Xcode, as separate independent html files, and implement the page swipe within Xcode itself?
No Not possible.
XCode allows you to create/edit UI and Transitions of cocoa touch controls only. However you can just edit these html/javascript files in XCode.
I'm having a weird issue with fancybox in chrome where my scrollbar isn't appearing until I switch to another chrome tab and switch back. I'll figure it out myself -- I'd just like to get to a starting point by knowing, in as specific a sense as possible, what exactly happens when your browser switches tabs?
Things like:
What loses/gains focus?
Any other events fired off?
How is chrome different from other browsers in this sense?
Sorry if this question is a bit open ended -- I did my best to qualify it in a way that made it possible to be answered concretely.
I'm building a web app to design and animate simple 3d scenes using the Away3D library, but the design of the interface itself is built around a scrolling menu which takes up the whole height of the screen.
The problem is, on OSX browsers have a silly quirk where if the page is scrolled when it has already gone as far as it can, the page can be dragged slightly further, revealing a brushed metal background. This looks nice and whatnot, but it pretty much ruins scrolling in a swf object. I use flash builder and export to safari, which is just about useable, if pretty annoying (especially with a mac touchpad, which can give a much higher scroll delta than a mousewheel can), but when I open my app in firefox/chrome the same effect happens, and causes the app and browser to slow down drastically.
I've found code which uses ExternalInterface to stop the swf sending mouse events to the page, but they all seem to disable detection in the swf as well, and I can't find anything else which help. If anyone knows of a solution you'll be saving me from throwing a few months' work away for what seems like a suspiciously unnecessary drawback to Flash on OSX!
Thanks in advance if anyone can help
Figured it out, in case anyone else gets stuck with this:
The feature's called elastic scrolling, if you're running a flash/flex app which takes up all the browser space you can simply set body{overflow: hidden;} in page CSS and it'll work just fine. Obviously, this disables any kind of page-scrolling - I believe you can turn it back on inside nested elements though.
Hope this helps someone anyway!
I am developing a monitor gadget that monitors production exceptions (by making JSONP Ajax requests).
Most of the time the information is not of interest and I wish for it to be behind other windows.
However, when an exception occurs, I would like for the gadget bring itself to the top of other windows to let me know of the problem.
Is this possible, does anyone know? I have a feeling not... is there another way that people can suggest? Or is it that windows gadgets are not really suitable for this sort of thing.
Thanks.
The answer is no.
However, I have managed to achieve the effect I wanted. Namely I set the gadget to be "always on top" and then have a minimized state that shrinks the gadget down to the smallest it can be and sets the background to an icon (surrounded by transparency). This give me an unobtrusive icon that I can dock into the top right of the screen.
Then, when an event occurs that I want to display, I have a Maximize() method in JS that restores the width/height of the gadget and shows some content (I actually use jQuery's animate method to do this which gives a nice "expansion", similar to the dock/undock transition).
Not sure it this is available for gadgets but on Windows machines you can use the Notification area. http://msdn.microsoft.com/en-us/library/aa511448.aspx
i have developed my own map control (similar Bing Maps control), but when i move this map to right or left, Panorama changes view, but when i move the same bing map, view doesn't change. How i can do the behaviour of my control similarly as in Bing maps
The issue is that your control is trying to handle gestures and so is the Panorama. This was a big issue for a lot of people in the early version of the tools. The standard response was always to avoid this situation as it has implications for usability. Unfortunately there are some situations where you really need this.
The NoDo update (March 2011) included a "fix" to work around this issue for the built in controls. That doesn't help you though.
Fortunately there is a work around.
When contact is made with your control you disable the "IsHitTestVisible" property on the container so that it doesn't also receive the gestures you are capturing. Be sure to set it abck afterwards though.
See http://mine.tuxfamily.org/?p=111 for more details.