I need to get the .top() of an item inside ng-repeat.
How do I get access to the top value after it has been rendered?
Thanks
$index points to current item index in a ng-repeat. Now let say your ng-repeat is something like -
div(ng-if="feeds.length>0" ng-repeat="post in feeds")
then to add a div to the required element you can use -
div(ng-if="feeds.length>0" ng-repeat="post in feeds")
div.bottomEl(ng-if="(feeds.length - $index)==3")
So, now even if you dynamically change the feeds array the bottomEl automatically shifts to the calculated item index.
After which you can easily determine if window has been scrolled till bottomEl by using waypoints like this -
$('.bottomEl').waypoint(function() {
//trigger code here
});
Be sure to initialize waypoint library
<script src="/path/to/waypoints.min.js"></script>
Related
Cheers everyone,
For the past couple of days I have been trying to find a way, to identify elements within a ZStack.
File structure
ZStack {
foreach { element in
SubView(element)
}
}
I always have 3 elements stacked on top of each other & really want to get the top most element, to be able to edit some properties.
Any solution to this? Any help is appreciated.
Thanks!
Found the solution to this specific case
Background:
The View that is being loaded in the loop is in an array, that I previously created. The array also contain an ID.
What I did now was to find out the max ID, reverse loop through my array while passing the current ID and the current max ID to the new view, where I can handle the data accordingly.
So if the max ID == currentElement ID, I can apply my changes, thus also getting the topmost card.
Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}
i am trying to create a footer component in CQ5, where i have 4 columns & all are autherable.
But we have to make no of columns autherable too i.e based on a value selected form a dropdown we have to open those many tabs for authoring those many columns only.
i have created a dropdown and have a maximum range of 6 columns. i know that i have to configure a listener for this purpose but don't know how . Requirement is like if i select 3 from the drop down then 3 tabs should come to author 3 columns
pls help me , i am middle of something very important.i need the solution very early too as i have to finish the job as soon as possible
I might be late for this by now but in case you still need it:
You need to add a listener node before closing your drop-down element:
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(box){ //here you also need to handle the hide/unhide when the panel loads for the first time. Use this.getValue() to retrive the intial value }"
selectionchanged="function(box, value) {
for(var c=1;c<=value;c++){
this.findParentByType('tabpanel').unhideTabStripItem("tab"+c); // You need to handle the opposite with hideTabStripItem("tab"+c);
}
}"/>
Then on both "loadcontent" and "selectionchange" (these are events on your drop-down) grab the current selected value and use it to hide/unhide the tabs. In this case the tabs would be named "tab1", "tab2", etc, make sure you get the names right.
The ExtJS in the events is finding the "tabpanel" container for the whole dialog, and then hiding/unhiding based on name. You could also set to enable/disable using the methods ".enable()" and ".setDisabled(true)". Just make sure you get the reference to the tab first if you want to do this (something like ".getComponent(tabName).enable()").
I didn't test this specific code, I couldn't find my actual example from my code base but this should take you in the right direction.
I have a long form with comboboxes and buttons that add element to the form. Every time combobox's value gets upldated or elements get added, it scrolls up to the top of the form. I want the scrollbar to retain its position. I tried saving current scroll position by doing
this.myForm.getScrollPosition();
But I get getScrollPosition is not a function error.
Any help on this?
If you are using extjs there is a way to manipulate the scroll using the Ext.dom.Element class, each component in Extjs inherits from it, then if you add a new component that modifies the height or width of your form, you can first get the height and width of that component using:
var newcompwidth = comboboxexample.getWidth();
var newcompheight = comboboxeample.getHeight();
Later you can modify the scroll value using scrollTo method like this:
myformcontainer.getEl().scrollTo('Top',myformcontainer.getEl().getScroll().top - newcompheight);
myformcontainer.getEl().scrollTo('Top',myformcontainer.getEl().getScroll().left - newcompwidth);
there are other methods like scrollBy or scroll but I didn't test it yet, I guess this will help you.
the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.dom.Element
There is a method isActive() in Zend_Navigation. But it returns true for all the elements in the current path
(parent li is active and all the children too, even when the current is parent li).
Is there any method like isCurrent(), to determine whether the current menu item is the current page?
I just like to add custom class attribute to just one, current element in the whole nested tree of ul's and li's.
easier with:
$activeElement = $view->navigation()->findOneBy('active', 1);
if you're inside your view script you can use:
$activeElement = $this->navigation()->findOneBy('active', 1);
You will need to use your own navigation view script, but that's fairly simple. Then try:
$this->navigation()->findActive($this->yourNavContainer);
That will return an object, var dump it and you will see the data you need. I think the variable is simply called 'page'. Do this before you build your menu, pre/post dispatch, then in your viewscript, do an if statement to check this var against the current looped item (i guess your loop it in a foreach).