element.focus() differs in Firefox&Edge vs Chrome - javascript

I have a long angular form on my page, and on form submit if something is invalid, I call .focus() on the invalid input element. I also have a top navigation on the same page, and my content is scrolled under the navigation during page scrolling.
The problem is, that Chrome's behavior is that it scrolls the input element into the (approximately) middle of the page, so it's visible, but Edge & Firefox only scrolls it until the element is present on the page, but the top navigation hides it. Is there a way to make this thing behave like it behaves in Chrome?

Related

How to prevent the keyboard on Android browsers from changing the height of the page?

When clicking on an an input type=text, a keyboard comes up. Unfortunately, that changes the height of the web page, so that all the thinks that were "stickied" to the bottom of the page want to come up above the keyboard.
And, in my case, the element that's anchored to the bottom of the page (e.g. the Apply button below) ends up covering the next input element (e.g. Max textbox), so that when the user presses Next on the virtual keyboard, you can't see it at all because the button is still covering it.
My question is whether there is any way to prevent the keyboard from changing the height of the page?
P.S. On iOS it works like you would expect. Bringing up the keyboard doesn't change the dimensions of the page.
It is default behavior on Android devices. As I know, you can not prevent this.

iOS keyboard forces page scroll, is it possible to prevent the scroll event of iOS in javascript/jQuery

I've got a navigation remaining fixed when the page is scrolled,, it includes a search field, but when I'm trying to focus on the field while the page is scrolled, the keyboard pops up and forces a page scroll to the top of the page, and I'm not able to write anything there... I'd like to prevent that iOS autoscroll event..
Thanks

TAB navigation to flow through stacked layers in a webpage (z-index)

On click of an input field, a projected popup window opens (have used z-index).
Now when i press TAB, i want the focus to automatically move from background screen to the popped up window.
Is it possible to achieve this flow of TAB navigation through built in properties or styling ?
NOTE 1: I tried setting focus to the outer div of the popup programatically.
So that the focus is moved from background to popup.
But it fails in IE11 and IE10 because, the cursor remains in one element and the focus remains in another element when navigation passes through an empty field. I DONOT WANT HELP FROM COMMUNITY MEMBERS TO DEBUG THIS CODE.
NOTE 2: I won't be able to set the tabindex for the popup window elements statically. Because in that case, the TAB moves to those elements even when the popup window is not visible.

Refreshing page after using history.replaceState() Not scrolling to the top of page

I've implemented history.replaceState() to my site when clicking to load more. Each time you click, the script adds extra elements to the container using an ajax call and then uses replaceState. Everything is working as expected on that front, but when you click to load more a few times, and then click to refresh the page, or cmd+r, the page is refreshed, but then jumps to the bottom of the browser. My thought is that it's because it's trying to keep the same scroll position (maybe because the browser thinks it's on the same page? I dunnno, but since the page was refreshed a lot of the inserted elements are removed, so it just goes to the bottom.
Adding an anchor tag seems to work for firefox on mac, but safari is still jumping to the bottom, as is mobile safari.

Dynamically generated onclick triggering the wrong event in IE

So I have a 4 window frameset that is setup so that when the main content page loads, it changes the menu options on the left frame menu. Everything works correctly in FF and Chrome, but IE is giving me a problem. I think the problem lies in the javascript.
In IE, the menu items correctly change text, but when clicked on seem to trigger the wrong link. I have an example setup here.
Click on Customer Login on the left, then Sign Up in the main content area. From here, if you click on New Order/Browse, you'll arrive at the Create Order screen when using FF or Chrome. In IE, you'll find yourself back at the login screen.
I need help in getting the menu links on the left working correctly in IE7.

Categories