I am using ngx-toastr to display notification messages. but I want to display the message only in one child component (and the width should be adjusted according to the width of the child component). when the user navigates to another route, it should not be visible.
i tried https://github.com/scttcper/ngx-toastr#put-toasts-in-your-own-container ,but not working.
Please help.
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()"/>
In my app I have a deeply nested components structure. I have a component with a very long form which is scrolling vertically. Inside that scrolling block I have components with a 'cog' icon. When you click that icon, a popover should appear next to it (inside the scrolling block).
However, the popover should consider the height of that scrolling block. And depending on the position of the 'cog' icon should appear either to the bottom or to the top of it in order to fit within the scrolling block.
So, to summarise, I somehow need to know the innerHeight of the scrolling block contents and its absolute position (getBoundingClientRect) in order to position my popover properly.
Right now I've done it using the html element id. And then simply find element by id in the popover component constructor:
constructor(#Inject(DOCUMENT) private doc: Document) {
this.scrollingBlock = doc.getElementById('scrollingBlock');
}
And then simply get the properties I need from it. Like the following:
this.scrollingBlockHeight = (this.scrollingBlock.firstChild as HTMLElement).scrollHeight;
this.scrollingBlockRect = this.scrollingBlock.getBoundingClientRect();
Although, everything works now, I believe it's not very elegant/Angular-way solution. I'm using Angular 6 for my app. Is there any better way to achieve the same result?
I need to get information about the size of an element when this element is resized in a Angular 2/Ionic 2 application.
I Already know how to get initial size with ElementRef, but cannot find a way to get information about resizing.
Note that I don't need the size of the window. I need the size of a element.
I have 2 ideas.
First: listen to any event that can trigger a change in the element size. Window size, orientation, hover, etc... then flag it as changed, then check the values of the element.
Second: put whatever element you're looking at in its own component (the child). Use a change detector in that component, and every time it triggers, output an event where you can check the size (or whatever value you want) of that "component" using a viewchild that's looking at the child component element.
http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
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 am building a Flex 4 application which uses a <s:Scroller> component to vertically scroll overflown content. Let me explain what happens before I ask my question:
The body of the page is loaded from a database
Once the information has loaded, the "body" of the application (in this case the list of items you see below) is constructed
Once the list is constructed, the entire encapsulating component is transitioned into view using TweenMax, like so:
myComponent.visible = true;
TweenMax.to(myComponent, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
Below is the result. Notice how the scrollbar is scrolled the whole way down, but you can see the tips of a few white letters that were cut off at the very bottom.
Using my custom menu, I can navigate away from the page, and come back to it, and Flex will correctly recalculate the range of the scroller so I can scroll down and see all of the desired content. This issue only happens if the initial URL that the user enters is a longer page like this one.
Any ideas on how I can force Flex to recalculate the range of the scroller?
Thank you for your time.
Ok, after many hours of researching, piecing together, and trial and error here is what I came up with.
What I was doing wrong:
When I first posted this question, the "component" that I had mentioned was already added as a child element of the <s:Scroller>, but collapsed and hidden away, like this:
<comp:MyComp alpha="0" height="0" visible="false"/>
When the data would be loaded and the component's visual appearance would be restored and transitioned into place, like this:
myComp.visible = true;
myComp.height = NaN;
myComp.invalidateSize();
myComp.height = myComp.measuredHeight;
TweenMax.to(myComp, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
This method of approach didn't force the <s:Scroller> to recalculate its proper size until later, sometimes not until myComp was transitioned away and another component was transitioned into place using the same method. Even then, the size of the scroller would fit the size of the previous component, not the one that is currently displaying.
Now, what I am doing correctly:
My research showed me that anytime the addElement() method is called, either directly within the <s:Scroller> itself or by any of its children, the scroller's measure() method is called, and properly re-sizes the scroller.
Instead of placing the components inside of the scroller and simply hiding them until I need them, I dynamically created them in ActionScript, set their properties, and added and removed them as needed using the addElement() and removeElement() methods respectively. Now, as old elements are transitioned away and new ones take their place, the scroller re-sizes itself correctly.
There was one final problem that I was faced with. If the very first page the user was viewing (i.e. there was no previous component that was transitioned away and destroyed) required a scroller, it wouldn't show up.
I corrected this final issue by adding an event listener that listened for when the new component had finished transitioning into place. Inside of the event handler, I explicitly set the height of the component using this code:
newComp.height = NaN;
newComp.invalidateSize();
newComp.height = newComp.measuredHeight;
Now that the component has an explicit height, the scroller now appears, even if it is the first page.
The scroller now works as expected in all cases, and does not cut off any content or disappear when it shouldn't.
I hope that it is helpful to someone.