For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});
Related
I am working on a weather visualization project using Mapbox (3 panes are locked together and one is for navigation, it's hard to explain until you see the link.)
Before I continue, I will post a link to the web app I am discussing here, so you can see it. My code is a MESS, and I am aware of that, but I believe this is a browser issue.
http://ability.a2hosted.com/main.html
In Edge and Firefox, the fullscreen and navigation buttons work fine. In Chrome, they do not work... the fullscreen button gets the browser stuck until you press escape (and doesn't render properly anyway!). And, in fact, chrome does not even display the navigation button at all.
Is there a way to get these buttons to show up and function as they do in firefox and edge? Or, maybe an alternate button? I am attaching a screenshot of how the page should look.
I should note, I can live without the fullscreen buttons, but I need the navigation button option to be working in chrome. This really is a must for my project, so even if there's another link or button I could place over it to activate it somehow, it's fine as long as it works. I am not good enough with JS to understand what may be causing this issue after 2 hours of research.
From https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol:
Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the GeolocateControl will not be visible.
My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.
As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.
I am developing a reasonably large application on PhoneGap version 2.8 for Android. The issue that I can't seem to fix or even understand why it is happening is described as follows. When I start the application, initially a white screen is shown, which is completely fine since I undestand that it takes a moment or two to launch cordova. I have added a plugin to the project that puts the application to the background when user clicks "back" button in the "home" view. I can see that my app is still running in the task manager which is all fine and dandy. If I click on the app to bring it to foreground, app returns to foreground but views blank white screen for ~3 seconds, after which my view is rendered. I am wondering if there is any way I could speed up whatever the process is going on. I have noticed that it doesn't happen if my app isn't installed with APK but is run by IDE in debug mode (in which case it runs instantly just like any other normal app), but it still persists, if I click on the app icon in the apps menu.
I know that onDeviceReady event is fired way before the blank screen is gone. I know that some html is added into DOM tree. By the time white screen disappears even my ajax request is back with more data to be displayed on the screen. I know that whatever is, that effect is not because of my scripts being loaded in.
I suspect that this is effect is due to Phonegap taking a moment to restore it's Activity, or WebView to restore (if that makes sense).
I have tested that on different physical devices (Galaxy S2 and S3, HTC One X).
There is alot of optimization still to be done (memory is leaking somewhere, and there seems to be alot of performance issues with older phones eg. HTC One V).
I have tried to show Splashscreen while the white screen is up, but it is hard to estimate, when i should hide it (javascript seems to be running asynchroniously in relation to white screen).
Perhaps anyone would be kind enough to explain what is causing the white screen to be present and what could be done to resolve that issue.
Much obliged,
Erich
I have been creating this app for mobiles using Phonegap and jquery mobile, all has been going well until I try and run it on my actual device (HTC Flyer Android 3.2.1). There appears to be some kind of rendering issue.
Just to note this only appears to happen on device, not when using an emulator, or in a browser on my computer. When I slide right to open the settings panel it does not fully render. Pictures will show this better:
This is what is supposed to happen when the panel opens:
But this is what actually happens:
When I touch the button or heading on the panel it seems to refresh itself and render's fine, which is odd, as both of the above are screen captures form device.
Upon discovering this I added this code:
$("#SettingsPanel").trigger("create");
To see if recreating it would help. I know this isn't a great thing to do preformance wise but I had no other idea's
I wanted to test on another more powerful device to see if it was a performance thing, but I don't have any other devices to test on.
So now I'm stuck and I'd like some help please.
I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).
Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.
What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?
Touch devices don't have a hover event and there is no way to emulate the user interaction that might initiate it. Make sure that there is no critical functionality assocaited with hover events (most just do highlighting) so there is no loss of functionality if the device doesn't have it. Browser sniffing by UA string is a flawed strategy - you must update it every time a new device comes along or the string changes for an existing device. Great if you're into high prices for maintenance, but not if you're the one paying for it.
You could identify the iPad (or mobile device) simply by checking the User-Agent parameter of the browser.
In PHP for example you could do something like:
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }
If you want to get it further you could use WURFL (http://wurfl.sourceforge.net/)