I have few element in my html page which has tabIndex attribute.
Now I have a div based modal popup window opening from this page. I have few elements in this popup window which has tabIndex.
Problem: When the user presses the tab, the focus is set to each elements in the popup window, after the last element in the popup got focus and still the user press tab the focus is going to the elements in the main page which I dont want.
Is there any way to rotate the focus on elements in the popup window itself?
If all you need is to refocus on the first element after the last element focus is out then use
Jquery's focustout() for last element and then use $('#FirstElement').focus()
I hope that helps
Related
Is it posible to set/change another popup without close the current popup.
Basically, I create field input and button.
when field input not empty then click a button, i change setPopup to another popup html.
but the current popup need to close then i need to click/open extension to see the second popup.
How i direct change popup after click a button?
Is it possible to see if an interactive element in an iframe (or iframe itself) receives focus or loses focus (blur)?
I have a modal window with a YouTube player embedded as well as a close button for the modal.
I want to remain the focus state inside the modal as long as the modal is open.
I want to put the focus on the close button when the last interactive element of the player has lost focus and when the close button has lost focus set the focus back on the first interactive element of the player.
I tried using contentWindow.document but I get no access.
https://codepen.io/ingvi/pen/4b91e4632043bead3dade1eb63423970?editors=1010
When you first load a web page, then press "Tab", document.activeElement will be the <body> tag and nothing on the page will have focus (i.e. $(':focus') will be empty).
Pressing "Tab" will add focus to the first focusable element on the page (which will become document.activeElement and also $(':focus').
If you click somewhere further down the page on a non-focusable element (e.g. text in a <p> tag), document.activeElement again becomes the <body> tag and nothing on the page will have :focus, but pressing "Tab" will add focus to the first focusable element after the content that was clicked.
My question is: is there any way to tell the difference, using JS, between:
the state on initial page load (where no element has :focus but pressing "Tab" adds focus to the first focusable element) and
the state after clicking some non-focusable element further down the page?
For context: I'm building a website where you can click hash links to navigate to different parts of the page and want to animate scrolling to the different parts instead of having them jump immediately. I have everything working, except for focus (right now pressing "Tab" after clicking one of the links just goes to the next link instead of the first focusable element in/after the element I scrolled to). I know I can use tabindex="-1" and element.focus() to force focus to the section of the page I scrolled to, but I'd rather replicate native browser behavior if possible.
I have a link on my parent page. When i click on it a popup opens. On the popup I have a button, when I click on it I need to change link's which is on the parent window(clicked to open popup), text and onClick event.
How can i do it?
Its better to reference a function on the parent window, rather than write code on the popup, so I'd use parent.some_function();
This way, if the original page changes, you can change the function there too, without searching through your popup windows.
You can not access tab/window elements from different tab/window.
My page structure is like
I have a html page which consist of a jQuery Dialog.
Within the jQuery Dialog a screen opens within iFrame.
Now the problem I am facing is - I want to close jQuery Dialog by clicking a button within iFrame. (For e.g. If my iFrame source is Google.com, then on click of search button my dialog box should close)
So, Can I write close call handling click event of search button in $(document).ready(function() of my html page?
Note :- iframe source is not accessible.
If no, then what are the other possible option to do it?
Thanks in Advance.
If the iFrame source is on a different domain than you cannot do this.
Options
Use the Dialog's built in close functionality
If the position of your item that you want to trigger the close is fixed, you can overlay a div covering. Fire the close event on the clicking of the div. http://jsfiddle.net/YvbPB/
See jQuery/JavaScript: accessing contents of an iframe my friend.