Situation:
iOS 7.1
VoiceOver is Enabled
Hyperlink (<a href="#content">) points to:
target element on the page (<div id="content">page contents</div> or <a id="content"></a>)
URL I'm investigating: http://www.yooralla.com.au/whats-on/yooralla-media-awards/yooralla-media-awards-judges-pack
What happens:
Select and activate the link
A border appears on the target element (which is halfway down the screen)
The page scrolls so that the target element is at the top of the screen, but the border stays halfway down the screen.
The closest element to the border is then selected and bordered, so reading starts halfway down the page instead of at the target element.
Closest reference that I can find to this issue is item 1 here, so maybe it is fixed in iOS 8.
But I'm trying to work out why it's happening and how to avoid it on as many devices possible. I've tried linking both to the main content div (which fills most of the page), and inserting an empty a tag, both of which behave the same.
EDIT:
I've tried to force the reading position by setting focus or scrolling with JavaScript, but VoiceOver still ignores this and reads from the wrong place.
Related
I have a website that uses Jump Links to move between page elements (it's an interactive User Guide), and all works ok on Firefox, IE, and Edge, but Chrome and Opera ignore the 'padding'.
As the website has a fixed menu bar, this means the jump link location vanishes under the bar on Chrome and Opera.
The simple code I am using for the jump link offset is:
<a id="namexxx" style="padding-top: 100px;"></a>
What can I do to make this work with Chroma and Opera?
All the solutions I have been able to find via search do not answer the difference issue between the different browsers.
Cheers!
Padding isn't a suitable approach to repositioning an element in this way, because it would increase the size of the element itself. In the case of a link, you'd effectively be creating a larger link area, with the space above the link becoming clickable too.
You'd be better off using margin-top which would move the element down the page. Depending on the rest of your markup, you might need to set display: inline-block; on the link element too.
Site description
I have a page where a list of 10 div are showing at once while 100 are in the source document. On the bottom is a button that - if clicked - hides these 10 div and shows the next 10 div. The button itself is a styled link with href="#top" where the id belongs to my navbar on top.
Problem
If I use Chrome it doesn't jump to top every time I click on the button. Sometime it jumps and sometimes it just show the new divs without the jump to top.
What works
If I use Firefox there's no problem.
Question
How can I figure out where's the problem - I mean, could there be an error somewhere else in my code that leads to this behaviour (no jump to #top) - or is there an alternative way to tell the users browser to jump to top that I should or could use?
Instead of using anchors and links to them (because your anchors might change positions, or work different between browsers), you should use Javascript, using the window.scrollTo() function:
HTML
<button onclick="scrollToTop()">Go to Top</button>
Javascript
function scrollToTop(){
window.scrollTo(0, 0);
}
Note that scrollTo() takes two parameters; the top and left position to scroll to. Also scrollTo() is not animated, it will scroll instantly to the position that you set.
This wasn't happening previously for me, but I updated to iOS 9.3 two weeks ago and now hidden elements on my web page are hidden when the keyboard is displayed or another input is selected.
Annoyingly a top fixed element is only hidden if the page is scrolled, and the bottom is always hidden. This seems to be a way to 'solve' the issues encountered with fixed elements being left in random positions on the screen when the keyboard is displayed, but now I've got a situation where the elements don't reappear reliably, meaning I lose my main navigation bar for my app.
Is there any way to disable this auto-hiding behaviour? I've created a barebones page that shows the behaviour here: http://128.199.171.247/test.html
I'm having these troubles since almost 2 full days now and see this as my last chance to get a neat solution of my 2-page-editor before giving up.
Please use Firefox first and have a look at:
http://twopageeditor.bastianschulz.com/
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row on page 2
Short explaination about the implementation:
- The editor contains two separate contenteditable DIV elements.
- In case of leaving a page by moving with the cursor within an contenteditable DIV element, we just swap the places and positions of the DIV elements but the caret stays in the same DIV element. The page 2 which is on the left side, is still the same DIV element that was on the right side when we were still on page 1.
- When changes to the text are done, the unselected DIV element is blurred out because it might be out-of-date. When the selected DIV element is deselected again, its content is fully copied into the other DIV element so that all changes that have been done are kept and therefore synchronized with the other DIV element.
Now use Chrome or Safari (IE not at all, that will be my next issue...)
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row 1 on page 2
BUT: this row is not visible. Press down arrow key again and it appears in the second row of page 2. When you press the arrow up key now, the content moves again, the caret is in row 1 and page 2 is displayed as it should (and like Firefox does it correctly).
REASON: right after you pressed the down arrow key on the first page you will see for a part of a second that content in this DIV is automatically scrolled by the browser so that the position of the caret is still visible. This causes a displacement of the DIV element by 20px of its CSS top attribute. When setting thereafter the new absolute value of top:-520px e.g. (the height of the page / viewport is 520px) this weird shifting of 20px is still there.
I haven't figured out a way how to stop this automatic scrolling of the content when its not visible anymore. Or at least to be able to kind of reset the contenteditable DIV back to its normal state.
Anyone ideas?
Cheers!
I am building a custom rich text editor. And in its current use, it inserts itself- a div- before a text area that is nested in a div.
This container div is supposed to start out with a top margin that lowers it down on the page, and then the text editor div then sits inline with that.
The problem I am having is, in IE 9, when the editor div gains focus it immediately shifts itself so that its margin-top is 0px. This therefore occurs on the page loading, but also if the user clicks anywhere in the content editable div.
The caret remains at the correct location, but the editor div plus its container have scrolled upward so the editor div has no margin.
This works correctly in IE 8 for some reason.
Without seeing the code, I'm not sure, but have you tried it in quirks mode? There has probably been a fix to make the code work more along standards that doesn't work with IE9. You can either use the built in tools in IE9 to try to identify the problem, or change the DTD and see what happens.
W3 DTD List