I'm currently using https://github.com/react-native-webview/react-native-webview for a website to load within the app. The app is essentially a glorified website so everything in implemented on webapp.
Anyway, I've bunch of stylings changes based on window.onscroll function in webapp.
Obviously they work just fine when loaded from browser, whether it be mobile or desktop.
My problem is the react native web view doesn't respond to any of those functions from window.onscroll.
I tried to do something like injectJavaScript inside but there are many on scroll functions and that will basically mean i am replicating same thing from web to ReactNative just to inject JS. Even then, some variables are dynamic so injectJavaScript essentioally woudln't work unless that injected JS triggers on scroll function somehow.
How can I solve this issue?
TLDR; window.onscroll function on webview is not being triggered when loaded from webview.
It was a bug from google.
Android System WebView was having problem this few time but it was fixed on February 1. That's what I mean.
Kindly go on playstore and search for Android System WebView and update it and try again
Related
I've been using reanimated to implement some nice 60fps animations in our apps at work.
I'm on 0.60.3 with react Native, so I use the fast refresh functionality.
I have an issue where if I write anything that includes reanimated and therefore is executed on the UI thread and not the js, reloading doesn't work, whether it's fast-refresh or a full reload of the app. A full, stopping the app and building it again makes it work though.
Here's what happens:
Let's say I'm trying to animate the translateY of an Animated.View. I write the code and it works. If I make a change to anything in the code (even just saving the code again without changing anything) the animation completely stops working. If I swap my Animated.View to a normal View, save, reload, change it back to Animated.View, save reload again it works again until I make changes to reanimated code. Normal JS changes work though.
It's doing the same for both iOS and Android, whether I'm in the simulator or on device.
I'm trying to figure out what could be causing this. I'm assuming what's happening is metro updates the JS code but everything "over the bridge" doesn't get updated.
But who is it to blame for this? Is it metro, node, react Native or something else? Any response is appreciated, it's driving me crazy.
I have a webview in my android app. How can I find div position according to the screen (the webview may be outside the screen or only partially on the screen). I know I can ask the native code using "addJavascriptInterface", but i want to do it using only the javascript code. can it be done ?
No it cannot be done. A webview doesn't have any access to information about layout in your application. Best solution would be to expose required information via native interface as you mentioned.
I have an Android - Cordova Project.
When index.html (main page) page is loaded, on Android 5.1 (real phone) only shows a white screen.
When I minimize app by the phone's home button and go back again, using task manager, the page loads normally as expected.
I found a similar question, where someone argued about WitheList plugin which I added to my project.
Answers are likely about to make a delay using setTimeout, which I applied, with no success.
I have some local css and js files in index.html.
In onDeviceReady.js file, I call load method to set the html content for a div, add some click button functions and re-size some divs in setTimeout and an addEventListener.
What's the reason for this?
Waaaauuu!!!
I upgrade my jquery to v2.2 and my problem solved!. It is a new challenge and new experience.
I start debug with a real device with Android 5.1.1 (Samsung S6) and see that there is an error: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
But after search I don't find any useful answer (like this).
I guessed that one or more javascript file(s) make this bug (white screen problem), so I remove all js files tags from index.html and add one by one.
Yes, my jquery file version cause problem. I upgrade it from v1.11 to v2.2.
I am using the magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) but I don't need to use this one. I have just used it before and it worked well.
My questions is how to actually trigger different lightboxes from inside a SWF?
We have one SWF that has images and animation located at six different sections of the screen. It's sort of a launch page and each section has an image with some animation and when the users clicks on a section another web page will load.
This application will be hosted on a computer with a touch screen and we were using a kiosk app to run the app and it had a small navigation bar built in but now we are using a different operating system that works better with the touch screen hardware (OSX to Windows 8) but does not work with the same kiosk app. I also can't seem to find any kiosk apps that do the same thing for Windows 8.
Instead of using a Kiosk app I would like to just use Chrome in Kiosk/Fullscreen mode and have each section open in a new lightbox window instead of using a navigation bar. However, I can't seem to trigger the lightbox event from within the SWF itself.
Any help greatly appreciated.
In as2 something like this getURL("javascript: lightbox(maybe-attributes);"); or using flash.external.ExternalInterface class. I don't know in as3 if there's another class/method
Christian find perfect match with this jquery/flash.external.ExternalInterface
http://grasshopperpebbles.com/jquery/actionscript-using-lightbox-with-flash/
http://developer.android.com/design/building-blocks/tabs.html#scrollable
Has anyone achieved this effect in a web app using JavaScript (or even jQuery)?
Got the pages sliding nicely (obviously that's the easy part), but getting the page titles to animate correctly looks like it could be painful!
May just go with the fixed tab layout but if anyone has any tips or examples, I would be very grateful...
There's a CSS which makes your page look like Android:
https://github.com/proimage/Android-4-ICS-CSS
There's a more advanced project with some JS:
http://jaunesarmiento.me/fries/index.html
And this is the way to do page swiping:
http://stereobit.github.io/dragend/ (also works on the PC)
http://swipejs.com/ (only works on touch device)
http://eightmedia.github.io/hammer.js/ (only triggers the event, doen't swipe the page)
With these you can have multiple pages in one HTML file:
http://handlebarsjs.com/
https://github.com/janl/mustache.js
http://underscorejs.org/
http://embeddedjs.com/
http://jade-lang.com/
https://github.com/blueimp/JavaScript-Templates
I'm working myself to combine some of these libs into a usable application. Hope it helps. This is also a note to myself.