jQuery mobile panel not fully rendering on device - javascript

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.

Related

Error with my site when viewed on a mobile device, the html seems to keep getting a :before issue

For some reason when I use my website on a mobile device the stucture keeps on changing, although everything seems to be working fine, my menu button works, but if you try to scroll
I thought it might be a problem with the js but it doesnt seem to be
you can see it on https://diegoasgportfolio.com/lapizzeria/#

Elements dissappearing in safari on ipad

Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.

Fullscreen API without mouseclick or keydown event

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);
});

How to trigger a lightbox from inside a SWF?

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/

PhoneGap loading although script is running

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

Categories