General Query about Placement of JavaScript code - javascript

I am building a demo app with 3 screens. One screen captures barcode from the camera. The second screen displays information about the barcodes. The third screen is just the home screen used to redirect to the two screens.
After I scan the barcodes, I have to make an online query to find information about the barcodes, such as name of the item, manufacturer etc.
For which screen should I connect this functionality to. Should I put the code in the script for the scanning HTML page or the one which displays it?
Is there an option where it happens in the background when none of the two pages are open.
EDIT: I can't attach it to the the home screen page because the user can redirect from one to the other without the home screen as well :(

Related

In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?

I have a multi page website. I add it to home screen in iPhone using "add to home screen" button in Share menu.
When I open it using the icon in the home screen, the website shows full screen. But when I go to any sub-page with a different route, like example.com/page, I see gray bars at the top and bottom, showing the address, navigation back and forward, "Done" button, share button, open in safari button.
How can I make it display full screen all the time?
Changing routing to use # is not an option.
It worked at some point in the past, but I had to remove the app, and can't make it work again
I figured it out myself, it turns out that recently I removed manifest.json from the html file. Adding it back solved the problem!
Also, I found this page helpful in figuring out how manifest works https://web.dev/add-manifest/

Child views in ionic 3 tabs shows two headers when child component is viewed

i am building ionic 3 app, i have page that have three tabs, the tab contains orders, when an order is clicked, its details page is viewed but here two headers appear, one header of tab view and the other header of order's detail page. i am adding some screenshots to make the issue more clear.
First screen shows tab page with one order, Second screen appears when an order is clicked, third screen appears when back button of detail order page is clicked.
i found a solution, i was navigating to order detail page like
this.navCtrl.push(OrderDetailPage);
Now i am accessing detail page like below
this.navCtrl.parent.parent.push(OrderDetailPage);
the issue no longer happens.
Hope it helps some one who have the same issue.

Enter full screen whenever page is loaded

I'm working on asp.net quiz application. The mandatory requirement of this application is: when the application starts (page is requested), it automatically enters into full screen.
Now I tried dozen of solutions (JS & Jquery's plugins)
JS Solution
Mozila's
Jquery Plugins
a number of different jquery's plugins, but Chrome & Firefox are not allowing me to do so. Because it states that it needs user interaction for that.
Can somebody please help me out of this situation? Solution can be browser dependent.
Details about application:
Total 5 aspx pages.
One page is an iframe/frame in another page.
Quick and dirty solution. Let's create another page which will be our container page. Put an Iframe there, calculate Iframe height width attribute based on the screen size. make the first page as iframe source. on the iframe put frameborder=0, so from user perspective it will look like single page
For full screen check this link http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

How to show a page looks like on cellphone, tablets, and desktops without opening a new browser window

I am doing a web application which allows users to build pages. In addition to building pages, I will need to show how a page looks like on cellphone, tablet, and desktop without a user actually opening a browser of different viewport sizes to see how it looks.
Here is what I am planning to do a page as follows:
The page has two parts.
The top part contains three buttons labeled as cellphone, tablet, and desktop
The lower part show the actual user page.
Clicking on any of the buttons will show, in the lower part, how a user page looks like on the type of device corresponding to the type represented by a button.
I know that I have to use Javascript for this implementation, but I have no idea where to start.
Any thoughts/links/pointers are really appreciated.
Thanks and regards.
In Chrome you can emulate any size/screen size by opening developer tools and clicking the phone icon next to the magnifying glass in the top left corner. Here's some docs explaining it https://developer.chrome.com/devtools/docs/device-mode

How to poll for the back button in a Javascript Windows 8 App?

I'm trying to incorporate page navigation in my Windows 8 app. I have two pages right now and I am able to go from the home page to the beginning page. There is a different background for both pages. When I navigate from the home page to the beginning page, the background changes, but when I press the back button, the background is still the beginning page background and not the home page background. I need to be able to poll for the Windows 8 built in back button so I can reload the home.html file that I have. How would I go about doing this?
The WinJS.Navigation namespace has a canGoForward and canGoBack allow you to detect this state.
You could also update your implementation of the navigation implementation to change that background.

Categories