Get screen size of multiple displays - javascript

For a small web app I need to get the screen size of multiple displays. First I tried it with simple javascript via screen.height but that only works for the primary display, no matter where the window was.
I was going to do a fallback with inputs anyways but i wanted an automatic way, too. I was looking for a way via actionscript but couldn't find anything.
I don't want something where the user has to click accept or anything like that. Just something that works without asking the user or when it doesn't using the fallback method (in this case just do nothing and let the user fill in the size himself)
Do you know any method?
Greetings

Related

Images not showing up on first time

Hellow everyone,
I'm having a problem on the site where my images' widths are not being calculated properly (they're not showing either on first load as well) inside jCarouselLite plugin.
I wonder if this has something to do with the fact that they're loaded from the CDN and don't have a proper content-type set (or something similar). (Example apartment)
If you check the List of apartments, you can go inside each one by clicking on the name or on the picture. It's INSIDE that pictures do not show up for me in any browser I've tried. If, however, I refresh the page, they show up fine.
Can anyone suggest what may be happening here?

how to make screen readers read entire page when angular changes states?

Requirement: on each page change the screen reader must read the entire page content.
We use firefox+NVDA to do our testing, and since angular doesnt "change pages" we have tried the following to make it read the entire page when changing states:
aria-live="assertive"
This for the most part read the changes in text in our site,but it only reads what its being added, in our case we have a table being filled with ng-repeat and it reads the information being added but without any context (it doesnt say what row or column is being read)
Another issue was forms, when being filled by angular, the screen reader will read it before they were populated by angular, this was solved with a $timeout but still when aria-live reads the changes it would skip some parts, and if we added aria-atomic to force read, we had some selects with multiple options, and those were read (all of them, we have more than a hundred options). which is not how screen readers read, they only read the first ten options or the ones visible when you click on them.
Remember that without any aria-live or aria-atomic, when you change states in angular the user is not notified of any changes.
after almost giving up we decided that maybe our focus was wrong, we needed to make each state its own page so we used the following:
function ForceNVDARead() {
$(window).on('hashchange', function () {
location.reload();
});
}
This for every change in the URL will force a reload. This works GREAT, everything was being read correctly, we almost thought this solved everything. Except this causes double requests from the client to our server.
Is there any way to make NVDA read the contents of an angular state like a regular page load, without having to force the reload of the page?
Please dont say use aria-roles only or something like that that doesnt work for this and we already have them, we need the application to read everything when changing states.
ANY help is appreciated, we are about to give up, and restart the project without angular as we are not able to achieve our accessibility requirement.
Requirement: on each page change the screen reader must read the entire page content.
This is fundamentally not a requirement from an accessibility point of view, it is the equivalent of making someone looking at the screen to read everything one line at a time, or use readquick, it is not natural usage.
Screenreader accessibility is acheivable when using Angular, but we need to reset some assumptions:
When you have page updates, the key is to manage the focus, and move to the new content. That allows people to read in their own way, not the way you have been assuming they have to read.
ARIA live is intended for small updates elsewhere on the page (away from the keyboard focus), not the whole content, it is not the answer here, I would drop it completely.
If people are reading forms before they have loaded, that might be a side effect of trying to force the reading with ARIA-live. If not, then trying using focus-management to place focus at the top of the form when it has loaded.
It is probably worth reading a tutorial on NVDA usage, or talking to a 'native' user. I can say from experience you are not using it in the way end users do, so get to understand better what 'normal' interactions are like.
If you drop the use of ARIA-live and go with focus management you'll probably solve most of the issues, but there may well be more questions later from a different point of view.

Prevent line breaks in "alert" prompt in javascript

I know how to insert line breaks in a JavaScript alert (using '\n'), but how do I prevent them - that is, make the text remain on the same line within the alert.
I have a message I want to display that breaks on the last word of the sentence, leaving a very awkward looking message. So, for example, instead of this:
Please ensure proper text is entered into the form
The users sees this:
Please ensure proper text is entered into the
form
...quite unappealing.
I know I could alter the message to possibly make it shorter, but for future reference, I thought I would ask the question.
This isn't possible, because the styling of the alert dialog that appears depends completely on the browser's implementation. Different screen sizes and different browsers will enforce different maximum / minimum widths on these dialogs. Even shortening your text won't guarantee that it is restricted to one line on all browsers.
Your best solution would be to implement a JavaScript dialog of your own.
Javascript alerts are not customisable in this fashion because they are completely dependent on the browser itself. Consider using an in-DOM modal.
Unfortunately, there is no way to make the "alert" window wider, which means text that doesn't fit will wrap to the next line. I would suggest displaying the message in HTML instead.

Masking URL for window.print()

So I've scoured the internet for a way to hide the url at the bottom of a page printed using window.print, and it seems the only way to do it is for the user to disable the option in their page settings.
Not ideal, I'm trying to hide the address to our serviceNOW instance from being printed on a form that will be given to our clients customers.
So with hiding it out of the question is there a way I can mask it to say something other than the actual url?
I'm not sure but I think solution 3 here is doing something like this
http://www.codeproject.com/Questions/424312/Can-anyone-help-me-to-hide-Header-Footer-and-Page
But I don't understand that at all.
Is it possible to fool the print dialog into thinking we are on a different page without actually redirecting?
btw I don't see it being useful for this solution but I cannot use jQuery (so many things would have been easier if I could) for some reason it will not work in our ServiceNOW instance.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

Categories

Resources