I'm developing vaadin application with a home page and a multi tab view.
On the home page there are two link buttons shown like this 'Login | Register', i.e. with some spacing and separated by a pipe character. When I click on 'Login' what happens whilst still on home page and just before the login screen is displayed is the spacing between the two links and the pipe char is lost like so 'Login|Register' and hence they appear to have lost position then the login page is displayed.
This kind behaviour is observed throughout the application and not just on the home page, i.e. the behaviour of items on screen changing position just before changing display.
My best guess why this is happening is that for some reason the CSS styling is lost a second before display change hence causing the slight position movement.
This is rather annoying as it seems the view flickers just before view change.
Any ideas why this is happening and how to stop this behaviour.
Related
On my website, and seeimingly on every page on the internet that I'm searching on this problem exists, and I am wondering if anyone has a solution to this.
If a website has a navbar at the top, then you click your cursor on a textbox, scroll down on the page so the textbox is out of view. Start typing and the page will scroll back to the tetbox that you are typing on, except the navbar will be blocking the actual text, there is no offset to account for that navbar height.
Here it is in action on w3schools.com for example:
https://www.w3schools.com/html/html_forms.asp
I have set my cursor to the "Last name:" field.
Now I scroll down so the field is out of view.
Now start typing again. You will see the website scroll back to the field so it can be in view at the top of the page. But note that the navbar at the top is blocking it.
This is prevalent all over the internet. w3schools for example and even facebook.
Has anyone every noticed and solved this issue? I don't even know where to start.
Im new with Angular and I am creating a chat application with the same facebook behavior. I need each chat box to appear at the bottom of the screen (right now they appear in the middle of the screen) and as a user is selected the box that comes out You should leave next to the one that is already there.
I also need that when those chat boxes occupy the entire space, something similar to the image attached is shown, a button where the first boxes that you select come out so that you can select and resume that conversation. In the following link I have my application working. Could someone help me? The application code and the demo can see it here.
The image of the behavior that I want is the following:
So the console preview panel at the bottom of the page remembers how big you had it last time you previewed. Usually this is great! But somehow mine is currently maximized, so the only thing that shows up is the Page dropdown at the top of the page (and anything in the console, if I switch between pages and the pages have things that log on load). The rest is just white console. Any idea how to get back the default view where the console is 20% of the bottom of the page? There is no visible dragging bar frame thing anywhere.
I can change my preview to console=0 to be able to use it, but I'd like a way to restore the default position of the panel.
Normally you should be able to hover on the top border of the console panel and resize it as you wish. An icon will appear, similar as in the image below:
Nonetheless, if you are doing your previews on a mobile device such as a tablet, then such thing is not possible to do. Therefore; a hacky way to do it would be to put the following code on the onAttach event handler of the page that is loading:
var splitPanel = widget.root.getElement().parentElement
.parentElement.parentElement.parentElement
.parentElement.parentElement.children[0].children[3];
splitPanel.style.height = "75px";
Nota bene: this is intended to ONLY work in preview
Background: for Windows users on Chrome and IE, dropdowns that reload or change the page are no good for accessibility. As soon as a user presses the down arrow button, the page reloads. This means that the user can only access the very first menu option. Here is an example: http://html.cita.illinois.edu/script/onchange/onchange-example.php
This is covered in the WCAG rule:
“Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. (Level A)”
EXCEPT the user can very easily open up the dropdown and explore all the options without triggering an onchange event. The user does this with a space bar press. This is a very commonly known keyboard trick that I've seen all tested users to already be aware of or be able to figure out quickly.
In my system, we are using a dropdown for pagination in long directories.
EG: "you are on page [1^] of 16" (with the [1^] being a browser default dropdown menu). The designers will not allow any kind of visual [go] button. This happens across thousands of pages, javascript fixes I've seen need to account for every dropdown, and this is impossible on our case.
Using space bar, the user can see all the options and make a selection from anywhere on the list using only the keyboard. So why are dropdown page menus that automatically reload onchange still considered inaccessible? And would they be considered accessible if we included screen-reader only text which said "press space bar to open this menu, making a selection will load your next page"
Well except that in Firefox, the keyboard command is actually F4, you are correct - this is not a WCAG 2 violation but rather a best practice
Here is a page where you can test this: http://dylanb.github.io/onchange_select.html
I am working on a magazine type application for galaxy tab 10.1. I have created each page using Fragment.User can swipe his finger horizontally to move to next page which is a different fragment. Most of the pages are "full page image".I am using this library for zooming/pinch zoom static pages/images.
Problem I am facing -
(1) If i zoom-in a page and than scroll to left or right end of page and than move to next fragment/page.After that when i go back to previous fragment/page,the page is still in zoomed state. What i am trying to do is reset the page in normal state when i move to next page/fragment.
Thanks