jqm collapsible set causing problems within popup in firefox - javascript

I have a jquery mobile popup, which has a collapsible set within it, and the popup has overflow-y = auto.
SCENARIO A
When I open the popup (which builds content in real-time (when the open-popup button is pressed)), then I open one of the collapsibles within, then click anywhere within the popup, the popup content automatically scrolls.
SCENARIO B
If I then close the popup (which includes an .empty() to clear out that dynamically built content), and then repeat scenario A, the problem does not occur.
SCENARIO C
If I open the popup, but do NOT open any of the collapsibles, I can click anywhere without the problem occurring.
I created a fiddle, but it Does Not replicate the problem.
Any ideas?
EDIT
SCENARIO D
If I do not declare the content divs to be data-role='collapsible-set/collapsible', but rather just drop the content into normal divs, then I do not have the strange scroll artifacts.

Related

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.

Screen reader is not interpreting tab navgation?

I have a pop-up window that I have enabled with tab stops via tabindex=0. When I interact with the page without a screen reader, I can use the tab key to move between the window and form elements that it contains.
When I use my screen reader client (Window Eyes 8.4) to view my website, I cannot consistently tab into the window.
Are there any special cases with code structure that I should be considering that would cause the window to either lose focus or prevent the screen reader from interpreting the markup of the pop-up?
For reference - I'm in a ASP .NET MVC4 web app (page is HTML/CSS/JS) that is generating the pop-up with a Kendo UI [Kendo] Window.
03/17 Update -
The pop-up is intermittently announced by the screen reader as a dialogue box but as soon as the pop-up loads, I can - occasionally - tab into the div and focus is not lost. I am not able to consistently reproduce this and only found this out after pressing the tab key rapidly after pressing the button to show the pop-up.
On the other hand (when not hitting the tab key rapidly), the focus consistently lands at the pop-up without focus outlines (screen reader announces "Foo dialogue box") but on first tab keypress, focus jumps back to the underlying page at the last actionable element before the footer. Pressing tab at this time will then move me into the footer UL element.
It is difficult to answer without a demo, but there are a couple of areas to investigate.
I did a page on the accessibility requirements for a content based pop-up, i.e. one that is not a form. That also includes code on how to manage the focus.
If the pop-up is essentially form based, you might want to try this one on dialogue boxes.
You'll see from those examples that adding tabindex to the container is only part of it, you should manage the focus as well, so that the focus is moved to the pop-up.
The sporadic nature of the issue might be because screen readers generally don't read things that are display:none, and tabbing to something that isn't there may not activate reliably.
If you can post an example I can update this answer.

Appending dom object with attached events to new popup window causes events not to trigger

In my web application I show the user an overview of information in a system in different containers. Some of these containers can be nice to "pop out" into a separate window to allow the user to drag the window to a separate screen to get a better overview of the information(maps, schduler etc).
My problem occurs when trying to use the newly appended container in the newly created window. The html is there but the events are not working.
I have simplified my problem here: http://frankyboy.se/test/slider/test.html
What the page does is it imports jquery and jquery ui.
It initializes the jquery ui slider widget.
It then creates a new window when pressing a button, waits a second, then appends the slider to the new window.
The slider works in the original window but stops working in the new window.
Can anyone explain why and maybe how to fix this ?
UPDATE:
Ok it seems like at least the slider widget has problems running in a separate window. Maybe it is up to the plugin to support being able to be moved or initialized in a child window. My latest example shows two buttons, one opening up a new window and creating a slider and the other opening up a new window and creating a button. You can clearly see that the slider is dependent on the parent window since the slider will only move when you move the mouse in the parent window. http://frankyboy.se/test/slider/parent.html
To test the slider, click the first button, the slider appears in the child window. Click the slider, nothing will happen, move the mouse to the same position in the parent window and pretend there is an invisible slider there in the same position.
In your new window opened, you only append the container to the new document, but you have to call $("#test").slider(); again to let the slider to work.
updated working example

How to figure out browser scrolling issue

I am developing a web part within Sharepoint that makes heavy use of 3rd party web services.
In my page, I have a view element (div#act1_show) that is collapsed. When I click on the expand button, the data is shown. No problem there.
The data of that element can be edited when that element is collapsed when I click the edit button. This actually hides the view element (div#act1_show) and shows a different edit element (div#act1_edit). No problem there.
However, when I first expand the view element (div#act1_show) and then click the edit button to open the edit element (div#act1_edit), the edit element is opened but now I can now longer scroll the page. That is, I can no longer use the scroll bar on the right of the browser window.
I've looked for any css position fixed but found none.
So, can anybody suggest how I go about figuring out how to find the cause of no longer being able to scroll with the browser's scroll bar?
Thanks

pop-up div over parent window

How can i populate a div over parent window and parent window must be disable unless until pop-up Div/ html page closes.
Parent Window disable means not able to work on. Once the child div populated over parent div then you are only allowed to continue on this populated div/ html page.
1) Have a div that takes over all your monitor. Display by default to none, and z-index 1 (it also needs position absolute)
2) Have the popup div again position absolute, and display to none. z-index 2
3) Onclick change the display for those two. As long as div 1 is visible and it takes over all the monitor, you won't be able to do anything. Only div 2 will be accessible as it is over div 1 in z direction.
Like the jQuery UI modal dialog? If you use the jQuery UI library, all it takes is a simple function:
$('#foo').dialog()
Impossible to do reliably, users can circumvent it. You can simulate a modal dialog, but on the client anything goes. Whatever this dialog is supposed to prevent, your server and in-page logic must expect that it may not have done the job.

Categories