I'm starting to build a new portfolio with this Gumby framework. I've chosen Gumby because I like SASS more than LESS, so I would like to try a framework based on this language.
The problem is that the mobile navigation doesn't work for me.
If I use the ui.html inside the downloaded package and I resize the browser window, the "three lines icon" appears, but if I click nothing happend!
If I use the Gumby's UI demo on the website it works...either for some website I saw here on stackoverflow that use gumby!
I've checked all the paths, the developer told me that I have to use gumby.min.js and it's uncomment by default, so i don't know why this mobile menu doesn't work for me.
Maybe I have to work online with the website hosted on a server? But I'ts strange...
I don't know what code to post, because it's simply the ui.html who all of you can find inside the downloaded gumby package.
I don't know javascript well so I cannot explain how/why this works but there is an issue with toggleswitch.js. Add e.stopImmediatePropagation(); to line 45. That's what worked for me.
If someone knows how or why this works I would love to learn.
Related
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
I'm make a graphical website, so I use three.js for implement it.
For a reference, I searched a lots of site and found some interest site.
https://www.magicleap.com/ is made with React.js.
Connect the site and scroll up/down, it's effect like move forward and backward.
So I wonder that, which library used in this site to implement animation with scroll?
Anyone who know about that, please comment it.
Thanks.
It seems they are using next.js.
Sources:
https://react-etc.net/entry/who-is-using-next-js
https://builtwith.com/?https%3a%2f%2fwww.magicleap.com%2f
I am attempting to create a react based web app. I got it working the way I wanted, and it behaved as a web app the way I expected -- for now, that means to me that on my phone, from chrome, if from the chrome menu I choose 'Add to Home screen' it shows up as if it were an app (showing up with its own icon & launching in a new window outside of chrome).
After getting that working, I decided to reorganize so that the path would be the way I wanted it - from mydomain.com -> apps.mydomain.com/appName. I moved the code to the proper directory, and when I browse there I see my "app".
I noticed an issue right away where the static assets were not loading, I fixed that by adding a symlink in www/mydomain.com pointing to www/mydomain.com/appName/static. At this point, I thought my app was properly reorganized.
Unfortunately, when I tried "add to Home screen" from chrome, it now makes a regular shortcut, which to me seems to indicate the manifest.json isn't being applied. This all adds up to me to be a fundamental issue I don't understand with code organization for sub-paths which gave me pause.
So my question is: What do I need to do to properly host my web app in a sub-path?
Notes:
I am using nginx - I am suspicious that my issue lies in configuration there, and if more info on my configuration there is needed, I can provide it.
Regarding the change to apps. - sorry if it obfuscates the problem somewhat, to note I just added an alias - thus apps.mydomain.com appears to be equivalent to mydomain.com - I only noted it in case that assumption was wrong and part of the problem.
Pardon my question language if it's wrong, I am new-ish to web, and may not be using the lingo properly - that also is why I am probably having difficulty just googling this.
Thanks!
I think I figured it out. My app was made with create-react-app, and in the package.json I edited the homepage to be my path.
Found this out from here:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths
I have created one ionic app it runs perfectly fine in browser but when I convert it into app it gives white screen.
I have already install white list plugin and allowed all url in config and also have kept meta tag. Am not able to find any other solution.
When kept simple html file am able to view it.
Any help will be grateful.May be good way to debug will be also good.
Connect your phone to PC with USB cable and remember to keep USB Debugging On. Now, navigate to chrome://inspect. You'll find the device name and click on "inspect". On Console tab, the error list will give you a hint about what is wrong there.
In my case, a custom service was Injected in controller which had been removed at some time as It was not used anywhere.
Ok just answering this question so it will be helpful to all.
Below blog was helpful for me that how I can debug
http://gonehybrid.com/how-to-debug-the-white-screen-of-death-in-your-ionic-app/
And guess what was issue, folder name in app is case sensitive. I was just need to change a folder name as per exact case sensitive path I provide in index file.
Mostly such thing occures because of a javascript error. You say it runs in your browser. Are there some exception in the console?
Not everythings is equal between browser and device, for example plugins. You have to be sure, that all used plugins are installed properly.
If you deploy on android, you can use android monitor to get console output. On ios xcode has already an integrated debugger.
I had this horrible issue because I compiled my Android application with Cordova 6.x and the project worked with CrossWalk plugin. In my case, the solution was uninstalling Crosswalk. If your project has installed that plugin, try to uninstall it and compile your project again.
I have been trying to figure how to set this up properly, but no luck. Screen looks blank and no errors on browser console.
Sample Github demo:
https://github.com/oocoder/onsenui-wp-demo
Has anybody tried to set this up?
Thanks. I was able to resolve the issue by assigning ons to the global window object and waiting for Angular on ready event to run the onsenui bindings.
Use: onsenui#2.0.0-beta.7
Sample: https://github.com/oocoder/onsenui-wp-demo
I am unfamiliar with webpack, but adding Onsen to a project is really nothing more than adding some additional files to a standard html project. Some installer options are listed here: https://onsen.io/guide/getting_started.html
Also, to get started with browserify, see the docs here: https://onsen.io/2/
var onsen = require('onsenui/js/onsenui');
onsen.ready(function() {
onsen.notification.alert({message: 'Onsen UI works with browserify!'});
});
So, if that is not working, I often recommend for people to get started by going here: https://monaca.io/cloud.html
Sign up for their free account which is to access their awesome cloud IDE. From there, just create a project and select the Onsen 2.0 Quickstart. After that you can export the project and import it into your favorite IDE. You are now setup to develop Onsen apps.
On a side note, I really recommend their cloud IDE. It has so many amazing features and it makes development a breeze.