Is there a way to make the Nivo Slider go back to the first slide manually?
So that if I press a button it will restart the slider from the beginning.
-Thanks
Yes, if you're using the jQuery version refer to this http://nivo.dev7studios.com/support/jquery-plugin-usage/
You want to set controlNav: true then you will get the page selection like the demo on their page.
If you ONLY want to give them an option to return to slide 0 and not pick each one individually then you'll have to modify the slider since there is no default behavior that supports that.
You don't have to modify the slider...
var idx = 0; // '0' is the first slide
// set nivo's currentSlide var to one before the idx value
$('#slider').data('nivo:vars').currentSlide = idx - 1;
// trigger a nextNav click
$("#slider a.nivo-nextNav").trigger('click'); // trigger a click on the nextNav
Related
I have an app that uses ExtJS 3.3.0. It uses an EditorGridPanel in which after the store is reloaded - I would like it to preserve the scroll position of the grid rather than sending it back up to the top.
Because this is an earlier version of ExtJS - this DOES NOT work:
viewConfig: {
preserveScrollOnRefresh: true
}
So far the only thing I can come up with is to save the position of the scroll bar prior to loading - and then reset the position once the reload is complete.
I can get as far as saving the position:
var scrollPos;
bodyscroll: function(sl, st) {
scrollPos = st;
},
However I can't figure out how to set the position afterwards.
Any suggestions?
Thanks in advance.
There might be multiple ways to do this but one way is to use the scroller element, which is accessible through the grid's gridview. See fiddle here: Grid scoll save/restore.
To get scroll value (which you've already got figured out):
var top = grid.getView().scroller.getScroll().top;
To restore:
grid.getView().scroller.scrollTo('top',top);
I am using the ion-slides, and I get some events via:
(ionSlideDidChange)="onSlideChanged()"
I use this function to get the last slide:
onSlideChanged() {
this.lastSlide = this.slider.isEnd();
}
Than I use this.lastSlide in another directive [hidden] to show or hide some stuff in the next slide.
However there is a slight delay right after the next slide is shown, so after 1 second or less than one second the content is hidden as soon as slider reach to this last slide.
I have tried to use (ionSlideWillChange) instead (ionSlideDidChange) but I it has a delay still.
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);
}
First of all: Great Plugin. Thank you!
1) For any slider with thumbnails for example Image Gallery), when selecting a specific thumbnail, it appears to use PlayTo().
How would I use GoTo() - instead of PlayTo() - for all thumbnails, to display the full slide for that thumbnail?
2) What is $Align as it applies to ThumbnailNavigatorOptions or Slider Options?
3) What is $Steps as it applies to ArrowNavigatorOptions?
Thank you.
Re 1: Use GoTo() instead of PlayTo()
Please set $SlideDuration to 0
Re 2: What is $Align?
$Alignspecifies the position that the current slide aligns its left side to 'slides' container. It applies to both 'Slider Options' and '$ThumbnailNavigatorOptions'.
Re 3: $Steps for $ArrowNavigatorOptions
It means steps to go for each navigation request.
e.g. given the value of $Steps is 3, when you click the 'right' arrow, it will go through 3 slides.
is it possible to have a specific element on top of the list?
backgoround:
I have an event app, where new events are constantly added. The events are orderd by date. If an event passes, it is still on top of the page. Now that some time passed, the first elements are all over, so the first paged doesn't display any necassery data anymore. To get to events which will happen, the user has to click on the pager button.
I want this events to be displayed on top, and if the user want's to see previous events, he has to click the back button of the pager.
What have I tried:
cellTable.setVisibleRange(overElements, (overElements + totalEementCount));
this mixes up the whole pager logic, and the user can't switch from pager to page anymore.
SingleSelectionModel<JSEvents> selectionModel = new SingleSelectionModel<JSEvents>();
...
selectionModel.setSelected(nextEvent, true);
this selects the right element, and moves the pager to it, but the other elements are still visible, so if I have a few "over" events and in the worst case, only have a single "comming" event in the table. Also it is the usability is bad, since the user has to look which event is next and doesn't have it on top of the page...
If you're using a ListDataProvider, you can add the new event to the front of the list. Everything depending on that dataprovider will be notified and should redraw.
If you're using a different kind of data provider, you may have to call CellTable.redraw yourself, but I think AbstractDataProvider takes care of that for you.
As a first investigative step, you might just try calling cellTable.redraw() after your new event has been logged to see if that gets you anywhere.
found a solution:
the celltable has a method setVisibleRange. This method is used in the examples when a pager involved:
int start = display.getVisibleRange().getStart();
int end = start + display.getVisibleRange().getLength();
end = end >= data.size() ? data.size() : end;
List<JSEvents> sub = data.subList(start, end);
updateRowData(start, sub);
the updateRowData tells the celltable, which data is displayed and on which position this data starts.
Now if we want to have a speciffic element on top of the page we can use the same function. This is how I end up using it:
int end = start + PAGESIZE;
end = (end >= data.size()) ? data.size() : end;
List<JSEvents> sub = data.subList(start, end);
dataProvider.updateRowData(start, sub);
cellTable.setVisibleRange(start, sub.size());