I have a jQuery UI tab control. It contains blocks that can be sorted. They can also be dropped on other tabs. When a block is dropped on another tab, I want to use the slide effect to hide the block from the current tab before displaying it on the new tab.
Here is a demonstration of the problem on jsfiddle (Follow the directions on the jsFiddle link to duplicate the problem)
The jsFiddle demo initially shows a working state for the problem. It uses the standard .hide() method to hide a block. But when using the "slide" effect with hide(), unexpected results occur. The block is not animated. Instead, after the animation interval of 1000ms the block just disappears from the tab and then is placed in an unexpected position on the new tab.
The expected behavior is that the block will slide to the left and be moved from the "Full" tab to the "Empty" tab.
Related
I have an app that has two ag-grids in two tabs using Angular Material tabs. When the user switches between tabs the items in one of the columns get rendered outside of the grid (but inside the tab body). The difference in the column is that it uses a custom cell renderer. It only effects the grid in the first tab because that is the grid that uses the cell renderer. So you have to switch to the second tab then back to the first tab to see it.
Stackblitz example here
It's hard to see because the column elements get rendered at the bottom of the tab window, you can barely see them poking out at the bottom of the grid. Also, if you page to the next page of the grid they are rendered properly, even on the first page when you page back.
I've tried executing gridApi.refreshCells() after the tab has switched but it doesn't do anything.
The fix turned out to be simple and I hope this is the best method for doing so. I simply execute the grid API's redrawRows method.
I have an application which has a main section and a footer. the main section has a tabIndex="-1". The footer holds the copyright thing.The main section further holds some widgets which holds the buttons in a list.When the page loads, the screen reader announces the page load.The body is the default active element. On tab, the focus moves to the first button in the main section.This is the expected behavior. But i don't see this behavior in the virtual cursor mode. So the page loads, the live expression in chrome shows the body as the active element. when i press the down arrow, the screen reader starts reading the footer instead of traversing the dom from up.It entirely skips the main section.Not sure what the issue is. I can't share code as it is proprietary.
I have tried setting the tab index of the main section container to 0.
Expected: the screen reader(in virtual cursor mode/browse mode) NVDA + Chrome should read the dom structure from the top and not skip the main section.
Actual: It skips the main section and directly reads the footer.
You're using roles or semantic HTML elements, I suppose? These have a profound effect on screenreader behavior.
You mentioned that there are buttons in "main" - this might be throwing the screenreader into forms mode, so that the screenreader has nothing to 'read' except button labels, which you get with tabbing. In forms mode, any 'document-like' content will be ignored, unless it's mentioned in an aria-describedby attribute.
You should use tabindex="-1" sparingly - only in cases when you are going to call focus() on that element. It's not clear whether you're doing that. What happens when you remove the tabindex attribute entirely from main?
Also try separating the document part of "main" from the buttons part, with distinct roles for each (e.g. "document" and "application", but there are others you can try).
I'm using Jquery mobile and doing some custom stuff.
The default collapsible object just seems to 'show' the hidden content instantly, which I find a bit user unfriendly. A few problems occur with this in that if the button is at the bottom of the screen, and the hidden content is off screen, then the user might not know that anything has even happened.
In my mind two things should happen.
The content should slideDown().
I should have the option to have the page scroll down so that the button finds itself at the top of the screen, in doing so guaranteeing the the previously hidden content is visible.
Any pointers in how I might go about doing either of these?
If I understood you correctly you are talking about a collapsible content block and when a user taps on the header it should scroll down a bit so that the body part is shown to the user.
You can do it by attaching a click event to the header that triggers a scrolling. In the code below I have done it as an animation. I also have adjusted the scroll position with -40px so that the user still sees some part of the elements that are on top of the header.
$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {
$('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});
I have three tabs in a Jquery UI tabs widget. Inside of the tabs I am creating a Wijmo Grid. One on each tab. The Grid is based on Jquery UI as well. The grid on the first tab seems fine.
The grid on the second and third tabs (the hidden ones) have strange sizing issues. The Grid on one appears roughly 10 pixels wide and the full height. The one on the third tab appears about 50 by 50 pixels.
I know the code on those tabs is fine because if I make one of those the primary tab then it works fine and the other two are broken. So I think it is some sort of interaction between the Jquery UI Tabs widget and the contents of the tabs (a Wijmo Grid). Does anyone know what causes this strange interaction and what I can do to make it work predictably?
The Grid does size calculation when initializing. It needs to be displayed somehow when doing so.
You can add class="ui-helper-hidden-accessible" to make it off screen when rendering.
Make sure you initialize the grids then the widgets. Or you can call $("#grid").wijgrid("doRefresh"); when the tab is activated that it is contained in.
I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image.
The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background.
On the next opening, the dialog bounces in front of the background right away.
How can I make the dialog appear in front of the background right away?
Tom's answer pointed me in the right direction, and Firebug was very useful!
The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js
I added a parameter "z-index=1005" (just to be sure ;) there.
So in jquery-ui-1.7.2.custom.min.js it now looks like this
createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');
Not sure if it's the best way, but it works.
This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:
.ui-dialog {
z-index: 1002;
}
Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.