I have a row of slick items, and after loading them, I would like to go to a pre-selected section of items. There are 6 items per page and I would like to go to item 8, let's say.
I change the current-index attribute to 8.
This unfortunately works for a second...then it goes back to zero (I have it printed out). This also appears to break my next/prev arrow functionality, it always resets to zero.
I would have liked to use slickGoTo, but that method is not made available via angular-slick
Related
I'm pretty new here and also with coding, I need help figuring out how to group items on a slider I have working on my website, so the thing is I want to classify them and group them, I wanna show 3 together then 2 others and then 4 each group with a title on top different for each one.
I can't do it cause it shows 4 slides every time I click on the arrows for the transitions, I can't find how to customize the number of slides to show on each transition.
Does anyone have any idea how to solve it or at least what would you recommend in this situation?
I'm trying to modify this over "miSlider jQuery Plugin".
http://www.mislider.com/
In a plugin there is a option called slidesOnStage which handle how many slide you want show at one time. You can use slidesOnStage like this.
var slider = $('.YourDivClass').miSlider({
// Number of slides visible at one time.
// Options: false or positive integer.
// false = Fit as many as possible.
slidesOnStage: 1, // If you use only 1 option remove `,` from last
});
For more option read documentation.
I am trying to use the BootStrap Slider mentioned here :
http://seiyria.com/bootstrap-slider/
I seem to have run into a rather strange requirement. As users drag the slider, the change in the slider value can change and such change can be capture (as mentioned in the examples in the link above).
However, I want to capture only those values of the slider at which the user "rests" after a slider, (or drops after the drag). She slides, stops, slides back, stops, slides forth stops, and so on. I want to capture values only where she stops.
How can I do this ? Is there an event for a slider, that captures just the drop or the resting place ?
p.s. I have not included any detailed code because I use the code in those linked examples directly, Example 6 in particular, which mentions :
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
You can do it like this:
$("#ex6").on("slideStop", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
More info Here
(This question pertains to the react-virtualized library)
I have a component that uses <List> to display several categories of items. The resulting output looks something like:
Jump to: Planets, Nebulae
PLANETS
- Mercury
- Venus
- Jupiter
- ...
NEBULAE
- Horsehead
- Ant
- Boomerang
- ...
I'd like to use the "Jump to" links to scroll to the start of the corresponding section in the list. If I scroll around some I'd like subsequent clicks of the jump link to take me back to the section.
The first time I click the "Nebulae" link it works fine, but nothing happens on subsequent clicks. I assume this is because scrollToIndex is a prop and doesn't change after the first click. I've tried using forceUpdateGrid but it doesn't seem to reset the scroll position.
Is there a way to jump to the same index multiple times in a row?
Unfortunately, this is a limitation of the props approach. (react-virtualized only manually scrolls when it detects a new prop. Otherwise, users would be unable to scroll with their mouses once an initial prop was set.)
One way to work around this is to unset the scrollToIndex prop once you've set it (so that if you then reset it, it will still be a new value). Temporarily unsetting it (aka resetting it to undefined) will have no affect on the list either so you should be fine.
So I have this issue with accessibility where we need a table's data to be focusable by row. To accomplish this, our first instinct was to set a tabindex on the <tr>. At first, this seemed to work just fine. Unfortunately, the data is loaded into the table via ajax and this causes issues since the data has no awareness of tabindexes already set on the page. So for instance, let's say that the page index look like this:
1 2 3 [ ??? live data ??? ] 4 5 6
Once the data for the table is loaded, the indexes end up looking like this:
1 2 3 [ 1 2 3 4 ] 4 5 6
So now, when the user tries to tab around, the first index is at the top of the page, the second index is inside the live region, then the third is at the top of the page, and the fourth is inside of the live region and so on. Essentially, it indexes all the 1s in order, then the 2s, etc.
How do ensure that the table data is tabbable in the correct order once it's loaded?
So far, my first idea was to write a script that basically grabs everything with a tabindex and then resets the order to include the new indexed elements. This sort of works, but only if the tab indexes are in alignment with the DOM order (default/natural).
Any ideas/solutions for this?
UPDATE:
I just tried setting all of the row indexes to 0, hoping that it would just make it focusable and insert it into the "natural flow" of the tabindexes. This feels kind of weird though. Is the right approach?
As a best practice, rely on the natural tab order and don't use tabindex in this manner. It will be a nightmare to attempt to set and manage the tab order manually - definitely an anti-pattern.
Screen readers already supply table navigation tools that allow users to navigate by row and by cell, so there is no need to make TR's focusable in this way.
Table nav commands for:
NVDA: http://community.nvda-project.org/documentation/userGuide.html#SystemCaret
JAWS: http://www.freedomscientific.com/Training/Surfs-up/Table_Reading_Commands.htm
VoiceOver: https://www.apple.com/voiceover/info/guide/_1133.html#mchlp2723
Using rateit, a plugin for jQuery, to replace a select element with stars.
The problem is that the reset button takes the place of the first star and when the resetable variable is set to false, the first select option simply isn't available, but when it is true, the hover & selected effects don't work as a user will expect.
I have tried changing the image of the reset button but it behaves incorrectly.
Here is is with resetable set to false. The first star is gone, and my minimum selection value is 2
Here it is with resetable set to true, see how the first star hover/selected effect doesn't work as expected, but I can get my first value.
When you use the Rateit plugin to progressively enhance a select list you need to include a option for 0 i.e. no stars. Do this and everything starts to work nicely.
http://jsfiddle.net/ru2wh/7/