I am struggling with PWA I made. I have the html meta tag viewport-fit=cover, which make sure that on phones with a pinhole camera or cutout, the app will stretch around it. When the pwa is added to the phones home screen and opened it works, but when I open a link and return to the "app" the whole camera area is a black bar and the content doesn't stretch around it anymore. Does anyone have a clue if there is a way to fix this behaviour?
I have only written one PWA. The whole App was one javascript file with one html page. Stepping through the app, did not change pages as the url remains constant. Therefore the back arrow does nothing on it. You have to code that action yourself.
In this case, something is not getting initialised again.
Related
I have a published google web app that I am using as a splash screen. When I click a button on this screen it correctly takes me to the page (using either of the methods below). When I refresh that page, however, it returns me to the splash screen instead of keeping me on the newly opened screen, as I'd like it to do. I thought window.location.replace would correct this, but it is still doing it.
I have tried window.open(myurl,'_self') and window.location.replace(myurl) and it keeps happening. If I create a new tab with just window.open(myurl) and I refresh that, it keeps me on the correct page. I would prefer to not have the user open a bunch of tabs for this to work correctly. Is there something I am missing to make this refresh to the page that was opened with the window command?
Since your app is loaded in a sandboxed iframe, you should use
window.open(myurl,'_top')
to load in the top frame
For a project a site is needed where when first loaded an animation appears that fades away and reveals the content of the site. I am fine with creating the animation and all. What I am not sure about is where to place it.
From a site ia point of view I see it like this. Either have the animation on the index page and once done remove that element with js or $ and reveal the index page. This means a reload will always show the animation again. This also means a click on the main logo that leads to the index page will also play the animation again. Something not really wanted or needed.
The only other option I see is having the animation on the index page and once done redirect to the home page where the site content is located. Like this a click on the logo can be set to either the home page or the index page. The info on the home page is also visible without watching the animation again since the home page has a separate nav link in the menu. Only if desired can the animation be watched again by clicking on the main logo.
From my perspective it will be the later. Though I ask you is this good practise? Is it OK to just have an animation on the index page and everything else on the home page?
I was thinking to either post this in https://ux.stackexchange.com/ or https://graphicdesign.stackexchange.com/ but I think this more concerns code architecture rather than design or ux because as mentioned the animation could also be loaded dynamically on the index page and once gone the content is shown on the index page. So you see I am not asking for opinion but rather for the right logic to tackle this task.
What method is best applied for this scenario? Would you consider having the animation on the index page and then redirect to the home page?
Linked
https://stackoverflow.com/questions/22090313/show-an-animation-before-show-my-index-html
https://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery
http://www.submittoday.com/splash_pages_and_search_engine_optimization.html
http://stackoverflow.com/a/22090389/1010918
https://stackoverflow.com/questions/30573395/page-loading-animation-method
https://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.
im nearly ready to launch my website but i have a problem i cannot sort out.
ive built the whole website using wordpress and buddypress.
due to the picture in my header being very big and ending 450px down the page, you have to scroll down to access the buddypress menu in the relevant page (the one above the activity stream etc) which is exactly where i want it, removing my header is not an option, now the only problem i am having is that when i click the tabs in the buddypress menu say from activity stream to say my messages instead of the page laoding and taking me back to this section it takes me to the very top of my header so i have to re-scroll back down to the page i was after.
I need the page to stay at the same point after page reload so that the menus can be flicked through without having to scroll down to it again everytime a link is pressed. how do i achieve this? can you please help me sort this out….i have no problems adding or editing codes if i know what code needs changing and what to add to make it do this. thx
Im guessing that if you look in the url bar it is adding a # to the end of the url. You need to override the default click event on the a tag so that it doesnt jump you to the top. Im not sure how that will affect the stuff that is going on in the BuddyPress plugin.
I have a screen with 2 UIWebView. The user can drag the views left and right to make the right and left view bigger (respectively) and the other one smaller (like UISplitView but customized and self made). I'm loading .html pages from strings and local .css files. After resizing the UIWebView If I load a new page there will be a black or white stripe on the right side of the UIWebView. This stripe is part of the web view (not a space between the views), and if I scroll the webView up and then down, the stripe will vanish and the page will be presented correctly. This issue occurs only in iOS 6 and only on the device (on the simulator it doesn't occur).
Some notes:
- The .css file contains elements with fixed position. Changing to absolute position didn't solve the problem but changed it: the black stripre occured during the drag.
- As slower the drag is, the stripe will be bigger.
- After resize the page is presented correctly, only when I load a new page the stripe is shown.
- The time between resizing the web view and loading a page doesn't matter, it can be straight away or after couple of minutes.
Now, as a workaround I create a new UIWebView and copy the old properties to the new. But than I need to reload the presented page which make a white blink...
Any idea why does it happens, and how to fix it?
sorry by the late feedback, but recently I was experimenting what appears to be the same problem.
I was using an UIWebView to show some text into a grid view. The "layout" of the grid view was different from portrait to landscape, and I was working with percents of the cell to build both (landscape and portrait) grid frames, in my case it makes the web view not to have an integer size.
It makes me thought that it can be some half-pixel issue after the web view resizing.