Horizontal scrolling does not work on mobile devices - javascript

I'm having a bit a of problem with a navigation not working as it should. If you view the following site on a non-mobile browser, you'll get an idea on how the navigation should function.
www.snottrocket.com
The problem is with mobile platforms. I've viewed this site on an android phone and iPad and it doesn't work as it does in a desktop browser. I do recall that it worked fine with the android before but it may be that the phone's browser has been updated or something.
I thought that maybe it had to do with URL masking but I'm not sure. Essentially, this site lives in a directory under another website and uses URL masking to display snottrocket.com in the url window. This is done with an iFrame but i'm not sure if it's the reason.
I'm assuming the other reason may be the JS code for the scrolling functionality.
Either way, i'm kind of stuck. Anyone want to take a crack at it and tell me what I'm missing or how to solve it?
Thanks in advance.

Related

Hide address bar in Android Chrome automatically

I am opening a simple web on Chrome for Android. I need to hide the address bar without user interaction. I tried the window.scrollTo(0, 1) method, which isn't working. I think the newer browsers don't support it, but I installed Chrome 36 and it still didn't work there. I know that is a hack. But the whole web page I am displaying is a hack and I can't do anything about that. I can't use other browsers. I can't use fullscreen, because that requires user interaction. I can't make it into progressive app.
As soon as I manually scroll, the address bar disappears. So I thought maybe I could somehow simulate that. But I am lost with ideas.
I doubt you would be able to hide it since that would be a risk to the security of the Android user.

Linking between pages and loading JavaScript using jQuery Mobile

I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.

Scroll function doesn´t work in mobile browser fullscreen mode?

I have requesting fullscreen mode through javascript fullscreen API with this library Screenfull.js. This is working pretty good in my webapp on mobile devices with mobile chrome. But why is not working scroll function at all?
Is this just truly bug of browser? If yes have you tried somebody figure it somehow ?
I have tried make function separately with iscroll but on mobile devices is really slow and not smooth at all.
Thanks for any advice
did you tried with chrome emulator or with a phone? sometimes chrome just go crazy!
close al task and restart!
and why do you need to use screenfull for your mobile app? :/
well i tried with emulator, and when the browser use the fullscreen the scroll doesnt work. I think that library is not good idea for mobile...

html site completely full screen similar to flash full screen

I made a html5 video gallery that is going to be used as a kiosk. I now need it to be viewed in complete full screen mode with no tool bars, similar to when a flash site is in full screen. Is there a way to do this with javascript or jQuery? I was also thinking of calling it from a iframe inside a full screen flash site but dont know if this is possible. Any suggestions will help.
Thanks in advance.
At this time no there is not without having the user press f11. But there is an API in the works that is supposed to make this happen. https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI
Edit (Other options):
If you are wanting to work in kiosk mode then possibly John Kurlak's comment will help if you want to work in IE. Also, you can use add-ons such as https://addons.mozilla.org/en-US/firefox/addon/r-kiosk/?src=search. This way you can turn the browser into a kiosk and not worry about users getting back out.
I do not believe a website can force a page to go fullscreen. You can however have the browser start fullscreened and as long as you do not open a separate window it will remain fullscreened.
Could you not create it in a new window using window.open(), passing in fullscreen=true?

My HTML5 web app crashes and I have no clue how to debug

I have written a word game using HTML5 canvas tag and a little bit of audio. I developed the application on the chrome web browser on a linux system. Recently during the testing phase it was tried on safari 5.0.3 on Mac and the webpage froze. Not just the canvas element, but interactive element on the page froze. I have at some times experienced this problem on google chrome when I was developing but since the console did not throw any error before this happened, I did not give it much credence. Now as per requirements I am supposed to support both chrome and safari but this dismal performance on safari has left me shocked and I cannot see what error can be thrown which might lead to such a situation. Worse yet the CPU usage on using this application peaks to 70-80percent on my 2yr old macbook running ubuntu... I can only but pity the person who uses mac to operate this app, which undoubtedly is a heavier OS. Could someone help me out with a place I can start with to find out what exactly is causing this issue.
I have run profiles on this webapp on google chromes console and noticed that in the heap spanshot value increases steadily with the playing of the game, specifically (root) value which jumps up by 900 counts. Any help would be very appreciated!
Thanks
EDIT: I don't know if this helps, but I have noticed that even on refreshing the page after the app becomes unresponsive the page reloads and I am still not able to interact with the page elements but the tab scroll bar continues to work and I can see my application window completely. So to summaries the tab stops accepting any sort of user interaction inside the page.
Edit2: Nop. It doesn't work still... The app crashes on double click on the canvas element. The console is not throwing any errors either! =/ I have noticed this problem is isolated only to safari!
Edit3: Okay, so I performed some other tests today. I isolated the HTML5 widget and its HTML data only and ran it on safari locally to reproduce the error. Alas it works well! So I tried playing the game from my server without Facebook integration, and it works fine again! So The issue crops up only on safari on MAC OSX, while the widget is on Facebook canvas as a Facebook application. I am very hard-pressed to come up with a reduced test case scenario for this app... =/ It gets weirder, the game works well on safari for windows. Also after the tab freezes the other tabs continue to be responsive and well working. This tab too closes on clicking the close button and stuff, but if I load another page on this same tab after its frozen the page loads in the tab canvas, but I cannot interact with it. Not even google.com! So I am sure there is no bug with my game but its a safari bug... Will soon file a bug report, thanks for all the help people... :)
What you should do, in one sentence: Reproduce the problem with as little code as possible.
Start removing parts of your app until you find nothing that can be removed while still preserving the error. Start by throwing out external resources (css, images, etc) and leave just the html and javascript. Try removing the audio. Try removing as much gaming logic as possible. Try removing all user input code.
If this truly is a bug in Safari itself and not in your code, it should be possible to create a very small code example. Until you have that, saying "my web app doesn't work in safari", without any details or examples, will get you nowhere.

Categories

Resources