Using arrows to navigate a page in Chrome - javascript

So the situation is that I have a media PC (Ubuntu, kodi, mythtv, chrome) and I have a chrome launcher for things like netflix to open up. However, this creates an issue when trying to browse with the remote (using an xbox 360 media remote).
I think the easiest way to get around this would be somehow be able to use the arrow and OK keys to navigate around different elements on the site (so in the main screen the different shows/movies, and in them the different episodes etc). There are 2 ways I see to approach this:
1) A generic solution. This means it would work for all websites, and may be a page with javascript that loads the required webpage into a frame or something similar, or it may be a chrome extension.
2) A site specific option. So code written just to be run on the netflix page and could be run from something like CJS (https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en).
I think one of the hardest things would be to work out where elements are on the page to be able to go left/right as well as up/down.
Any ideas?

Related

make webpage recognize my own device for debug purpose through javascript

I build my site with Joomla, by default the page is responsive. I want to turn off responsive design, but there is no turning off option on back-end, so I had to use:
$('meta[name=viewport]').attr('content','width=1200px');
to turn off responsive so that I didn't have to bother with mobile layout .... for a while. Now the site is live, and I am about to start to make the page responsive. I want to debug this on the live page but don't want other users to see some messed up page when I am still tweaking it. So I am thinking whether there is a way to make the page recognize my own devices only.
I understand that I can use login system, but that would be too complicated. The simplest way I can think of is to do this
if (location.search.indexOf('nores') < 0) {
j('meta[name=viewport]').attr('content','width=1200px');
}
and then open each page like this mystie.com?nores. But this is still a little troublesome, besides I can't freely navigate pages.
The other way I was able to find out is to add some custom string to userAgent, I think this can be done through chrome's developer tools, but what about mobile browser? Similar is using localStorage, on PC, I can just open the page, go to console and do localStorage.setItem('nores',true), but how can I do this for my phone?

How to ink to another .html page within Chrome extension/app?

I am building a chrome app for a client that will run in kiosk mode to display in their stores. Right now I have an index.html page that links to about 30 other pages. However, when I click on a link in the app I get an error...
Can't open same-window link to "chrome-extension://leghflngpfmomcflabikghiemaajadne/poweredge"; try target="_blank".
So I tried target="_blank" and that tries to open it in a new chrome window.. no good. I've been reading a little bit about using webview and sandboxing pages but they both open the pages in a new window and it just doesn't look good.
Is there a better way to do this? Right now my only idea is to place all of the content on the index.html page and turn on/off sections of the content with jQuery. I'd love to keep all of the pages separate though, just for my own sanity.
Thanks!
Navigation is disabled for the Chrome Apps platform. In theory you are supposed to make single-page apps - so your turn on/off approach is the "intended" one.
No-one stops you from having several windows though - suppose you have an options page, it wouldn't be strange to open it separately (via chrome.app.window.create)
As stdob mentions in comments, a workaround may be possible by using <webview> with a partition blessed to show local resources. It's not clear though if it will allow access to apps APIs.

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.

Replicating a website's mobile appearance in an iframe

(First time doing this, so I hope I'm doing it right)
As a part of a bigger project, I'm interested in being able to show an iframe with the contents of another site as it would look if viewed on a mobile device. I understand that I might run into some issues later on with mobile-specific looks and such but with my current tests I'm using a simple site with no special mobile design.
So I started out with visiting the site on my mobile phone (Galaxy S3). Here's a picture I took as reference of what it looks like on it: http://i.imgur.com/n9rRKIx.png
The important thing to notice is where the text wraps. The first row is "Turtles are reptiles of the order Chelonii[2]"
Now, if I were to visit it on my computer, the first row would be longer: "Turtles are reptiles of the order Chelonii[2] or Testudines characterised by a special bony or "
If I were to just resize the iframe, it wont automatically resize the paragraphs and such, making them wrap earlier.
I decided to google it and see if I could find a site doing the same thing. However, each one I tried displayed it wrong. All of them have the longer version as the first row. Here's some of the ones I tried:
iPhone tester
Mobile Phone Emulator
Responsivepx
Screenfly
Here's an album showing the results: http://imgur.com/a/cRaAs
As you can see, most of them look almost the same, but none of them looks or wraps like my mobile phone. This is despite me telling these sites to use a Galaxy S3 preset if available.
To clarify, I am not interested in finding another site that does this (except as a proof of concept). I want to know how to detect things like where the text wraps and the font size so that I can replicate it in an iframe.
If I've left out any vital information, tell me and I'll add it.

Is there a way to control browser size and position across multiple displays / monitors?

Preface
First of all, I am very well aware that webapps should not fiddle with window size or position. Been through a lot of similar SO questions and forum posts.
But this is a special case, where the browser is just a platform to run an app on several specific machines in a controlled environment.
Task
The app should manage windows across several displays. (up to 5)
What I've tried until now
Searched for methods for gaining information about the host system display information, but the window.screen object only reports properties of the display the window is currently on (or considered to be on, if it is halfway on one)
Tried window.moveTo and window.open with flags "left=123,top=123" but they are always limited to the current display
Tried window.resize and window.open with flags "height=123,width=123" but just as with the moveTo they are limited to the current display.
Question
What could I do to make my application use (without manual window positioning) all the available space in a multi display environment?
Scenario
Think of it like I have two projectors correctly aligned, and would like to make it possible for:
each project to project different things (each projector projecting its own browser window)
project an app seamlessly across both projectors (possibly fullscreen)
There could/should be a window running the master window layout logic
Note
I can use any flags, app or kiosk mode, as again: we deploy the app to the target environment.
The browser options are Chrome(preferred), Chromium, and Firefox on a Windows platform (because of the special video card we will be using for 5 displays).
Fallback solution
Manually stretch a window across available displays and run the apps in iframes within this master window.
Drawback: A single process is running everything, so should an app break within a frame it breaks everything.
Afterword
Also a solution to this question would be a great help as well: Windows / Chrome / ATI / Browser fullscreen across multiple monitors
Go with a chrome/firefox extension that has access to window/tabs specific APIs.
Either embed your whole application in the extension or communicate with the extension through messages (chrome, there's an equivalent on firefox).
Support in Chrome is experimental.
You can use window.moveTo(-1000,100) to move a pop up to a second monitor in IE if you check the permission "allow script-initiated windows without size or position constraints" under Internet Options/Security/custom level.
If you only have a single monitor connected, it will move the window to the edge of the primary display. I have not found a way to do it in Chrome though, it doesn't appear to have the same security option.
Try using the chrome.windows API to interact with browser windows. You can use this API to create, modify, and rearrange windows in the browser.
https://developer.chrome.com/extensions/windows
It even works with nightwatch.
Another possible solution is to use the win32 to size & position the window.
As seen in the solution of question: Chrome Packaged App and Dual Monitors (no code there, this is just for reference)
I don't think it's possible.
Browser really limit JavaScript in its permissions for security reasons.
Maybe you can manually(in JavaScript of course) set the x and y position far outside of the screen so it appears on another screen but that's not a neat way to do it.
As far as I can think of, you have two options:
Create different pages for every screen and open them separately every time.
Create all the windows with a button and make the user drag them to the corresponding screen. When the user clicks the button open the window in full screen/kiosk mode and load the content. However I don't know what will happen if you activate another screen while your in fullscreenmode somewhere. It might invalidate and close the fullscreenmode.
This is the only way you can have distinct windows in your browsers as far as I know.

Categories

Resources