I am working with accessible the website using keyboard and while tab press, Dynamic div(with ngIf)conditions is not working as expected.
I do have dynamic element with conditions to display one or other, when i focus on particular div element and click on button to go different element my focus is getting lost.
I have tried with providing the tab index with orders but not found any luck.
<!-- begin snippet: js hide: false console: true babel: false -->
The main issue the template which is being applied dynamically. You are trying to access the element which is not yet generated by angular.
In other words we cannot access the element which is not yet generated.
So I have removed the ng-template and applied the [hidden] attribute.
Working copy is available here - https://stackblitz.com/edit/angular-s8gvp9
Related
I must adapt to application to wcag focus requirements.
My application works on jsf/primefaces and I have problem with focus on many elements.
For example unexpanded filters contains ui-helper-hidden-accessible class (which is invisible until I click filter to expand) and I cant focus on unexpanded filter name to expand it by keyboard because (I think) ui-helper-hidden-accessible which size is 1x1px receive focus.
I want to span element inside filter div or div with ui-selectcheckboxmenu-trigger class will receive focus instead of unexpanded ui-helper-hidden-accessible.
Do You know how to do it?
Second example is primeface's menuItems - they also not receive focus. The only solution I know is to replace the elements to elements without ui-helper-hidden-accessible class, but unfortunately I can't use this soultion
<nf:author id="filter-selected-authors"
value="#{applicationsBean.dataModel.filter.selectedAuthors}"
converter="#{userConverter}"
completeMethod="#{applicationsBean.usersAutoComplete}"
componentsToUpdate=":datatableForm:applicationTable"
dataTableModel="#{applicationsBean.dataModel}"
oncompleteJs="dynamicScroll()"/>
I have a parent component that contains a table, and a child component that contains a bootstrap modal.
When a row in the table is clicked the modal should pop up with many functions and filtered select-drop-boxes that matches the clicked row.
From my understanding, these three are my options:
A. Opening the modal with a function inside the child component (the modal) via #Viewchild. When closed, another function in the child component should clear the properties and fields in the modal.
pros: The DOM will not have to recreate the child component each time a row is clicked.
cons: If the modal is not needed it will be created unnecessarily. + I have to reset the fields on close.
B. Use *ngIf on the child component (the modal). When a row is clicked, the if statement becomes true and in the ngOnInit the modal will call a method to pop up the modal.
pros: No need to reset the fields, everything will be set in the ngOnInit.
cons: will be created each time a row is clicked.
C. use a message service between the parent and the child that will trigger show/hide on the modal.
cons: a service needs to be built for this.
I would like to understand what is considered a good practice and what's a bad practice in these approaches. Or alternative ways to achieve this. I'm working on a big project and need to do this a lot.
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
I think I'll just start of
Explanation:
I'm currently building a Site written in jQuery and I'm using multiple techniques wich allows the site to construct itself like Ajax Object returning functions inside a normal class not singleton, but i also have singleton based classes in other areas of the page which are loaded asynchronously via Ajax and so on...
At the beginning i call a self made function that is a chain of functions which each are attached to other functions, classes and variables declared within and out of my singleton Page-Class Construct (But all still on the same Document|Window).
"Page is the actual name of the class".. So on
$(window).load();
i call
Page.SetupPage();
Loading some Cookies with md5 encrypted data (WORKS)
Loading The Site Menu Bar via Ajax which contains : "the Site Menu
which is getting its data from a DB", "the Search Panel(jQuery
autocomplete) drop down menu", "the user panel and the shopping cart HTML Drop Down Menus" <-- (THE
PROBLEM IS HERE), then turning it in to a smart menu Element with the
jQuery smart menus Plugin.
Loading The Pages Body in a Div Container which properties are set within
the first step (WORKS)
THE PROBLEM:
If I'm trying to access a existing Div inside the MegaMenu HtmlDropDown Div inside the Smartmenu formated element, i am not able to build further elements in to that dropdown menu because I'm calling the userPanel at the beginning of the page, wich also had the same problem with my auto user recognition unless i call the API with 'itemActivate' a#mydiv, the plugin sets any other open mega menus CSS display properties to none
SO:
I'm currently also including a second js script that has a singleton class named ShoppingCart which has a function named ShoppingCart()... If i call that on $(window).load() i get the json response object and can fill it into an array... but unless I'm not setting the css property of the shoppingCart DropDown UL Tag to "display" -> "block" i can't access the div inside that smartmenu html dropdown megamenu and append items to that div and further more: i cannot call the jScrollPane plugin at the end of the append inside the mega menu HTML drop down div wich i'm trying to access, because i use an other focus on a other menu button to make sure everything is loaded as it shoul!
THE FUNNY THING:
$('#main-menu').smartmenus('itemActivate', $('a#shoppingPanel'));
$('#ShoppingCartDiv').css({ 'min-width' : 300, 'height' : 200 }).attr({ 'class' : 'scroll-pane' });
$('#ShoppingCartDiv .jspContainer').css({ 'min-width' : 300, 'height' : 200 });
$('#ShoppingCartDiv .jspPane').css({ 'min-width' : 300, 'height' : cartItems.length*64 });
$('.scroll-pane').jScrollPane();
$('#main-menu').smartmenus('enable', $('a#shoppingPanel'));
if I'm adding these lines inside the each append function of my "setShopingCartItems" function and afterwards calling the jScrollPane function, it works... but when i'm changing to another area which contains a scroll pane element, it breaks the scroll pane in the cart area...
Do you have any suggestions how to append and style elements without the display of the parent is set to block? Or how do i achieve that goal best and in a more cleaner way?
All Answers are appreciated! Thanks in advance!
*EDIT*
Ok i've made it using the display and Opacity properties setting display to block and opacity to 0... after i made my changes i revert those to with display to none and opacity to 1...
Ok i've made it using the display and Opacity properties setting display to block and opacity to 0... after i made my changes i revert those to with display to none and opacity to 1... For whatever reason! CLOSED
I have an issue with one of my ExtJS items. I have a list of items most of which are buttons with icons, but one is an href with a bit of html. I want to hide these items whenever an external property is disabled.
To do that, inside of the items I have been using the following
hidden: !this.external.prop.enabled
For the buttons this works fine. They are visible when the prop is enabled and totally hidden when the prop is disabled. The item that uses html however, is hidden every time. Even when I set hidden to false like so
hidden:false
the Item looks like this
{
xtype: 'box',
margin:'5',
autoEl:{
tag: 'a',
hidden: !this.external.prop.enabled,
href: BaseURL + Glue.uiConfig.url.launchProp,
html: 'Launch Prop'
}
},
These items are all in the same array so I'm not sure why they are exhibiting different behavior. Has anyone ever experienced something like this? Do I need to provide more information?
thanks,
Put the hidden outside the autoEl config.