I have a svelte component that display a list of items, the item list is exported and can be updated outside the component. Usually the list is long and there is a vertical scrollbar on the container <div>.
<script>
export let items = [];
export let function stickTo(item) {
// What to write here?
}
</script>
<div id="container">
{#each items as item}
<div id="{item.anchor}">...</div>
{/each}
</div>
I would like to scroll the container to a given item, and then stick to it even if the item list is updated. The idea is that all items can appear or disappear anywhere in the list, but the selected item should always stay at the same place on the screen.
You could use a svelte action to perform that.
You'd have to keep some kind of "temp array" that would store the old values of "items".
Everytime items would get updated, you would find the new value that's been added by comparing the two arrays.
Of course, if you do have some kind of communication between your components, using context or store, the temp array is not relevant.
Since all your div have ids, I guess you could retrieve the height of the element that has just been added by doing a getElementById(newElementId).getBoundingClientRect().height
Then you'd just have to apply a scrollTo to your node (that has been passed by the svelte action). The Y value would be equal to the current scrollTop + your new element's height, the X would be 0.
Still you'd need to be careful not to update the scroll if the element has been placed after your selected item element in the items array.
Maybe I did not understand what you want to do, but I'd go for something like this. Here is an REPL :
https://svelte.dev/repl/bb45f0487f7f4a43af58fb3b861c19ec?version=3.38.2
Related
What I wanna do: I have a basic line chart which is initialy load with an array of data (series: [...]) which creates me lets say x lines. I will also render x checkboxes above the chart. On click on one of the checkboxes the corresponding line should disappear or appear. Therefor I am listening to the click event and then I want to add or remove a line.
The problem: I can not figure out how to replace the whole series with a new one. What I have found is the setData() method, but that only works on an item of the data array. I also found the methods addSeries() which will add an item. And remove() which will remove a specific item. The problem is, I dont know which item is which. What I would like is to hide a line or show them, but have the full x lines in the data series all the time. I think.
I also found the method update() which will let me pass a new configuration object to the chart, but its not working if i pass the option 'series: newData (array)'.
I am either looking for an option to pass the full data array at the beginning and then hide or show a line, or, to overwrite the full series data at any given them with a new array.
Hopefully thats understandable and someone can point out what I am missing! Thanks!
I have found a solution. I would load the whole data array in the beginning and show or hide certain series for the initial display with the option visible:false.
On click of the checkboxes I need to find the right series and then there are the methods show() and hide() to manipulate that visible property on runtime.
chart.series[myIndex].show();
chart.series[myIndex].hide();
You can use setVisible method for series and bind checkboxes with the series:
var checkboxes = document.getElementById('checkboxes').children;
for (var i = 0; i < checkboxes.length; i++) {
(function(i) {
checkboxes[i].addEventListener('change', function() {
chart.series[i].setVisible(this.checked);
});
})(i);
}
Live demo: http://jsfiddle.net/BlackLabel/ur31g4j5/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
I need to parse a large document that has elements arranged as a series of headings followed by a div, something like this:
<h2> Section Title </h2>
<div> Section Content</div>
<h2> Section Title 2</h2>
<div> Section Content2</div>
<h4> Section Title 3</h4>
<div> Section Content 3</div>
So basically in the dom, I need to group together an <h> with the next following <div>. The dom doesn't seem to be an element for the child / sibling / parent functions, and I need to allow for inconsistencies in the input file as well so don't want to do something like find all the h elements, find all the divs, and walk through each list in a loop assuming the elements are the correct matches. Is there any way to get the dom set up so I can walk through it using the child functions, or some other clean means of walking through the dom to do this?
Easiest way I figured out is to access the element 'root'to get to the top of the dom as an element.
From there it is still tricky to figure out how to walk through the sequence of child elements but in this case, search on the divs and prev_sibling() appears to work, if the content is predictable, but my content might be
I want a behavior like if you click on the first listitem open do a thing, if I click on the second listitem do other thing. Same thing for the third and second.
Similar to switchboard but not in iconview (I have the animason and gtk.stack set up):
https://www.youtube.com/watch?v=Lj2wKNYVFR8
This is the code:
var listbox = new Gtk.ListBox();
listbox.set_activate_on_single_click(true);
var l = new Watcher.List.ListItem("title", "subtitle");
listbox.insert(l, 0);
var l2 = new Watcher.List.ListItem("title2", "subtitle2");
listbox.insert(l2, 1);
"l" and l2 is a Gtk.ListBoxRow object so basically I add 2 listboxrow item into a listbox.
When I click on an Item do stuff:
listbox.row_selected.connect( ()=>{
stack.set_visible_child_name("new");
back.set_child_visible(true);
});
It will always show the stack child named "new" whether I click the first or second item in the list. I can acces the ListBoxRow index but that is just only for a specific Row.
I need to add custom formated items into a list and I was told that ListBox can do it. (Others can't?)
My ListBoxRow is just a grid with two labels in it but I want to add buttons and some more later.
Look at the reference for Listbox.row_selected(): You'll see that it has a ListBoxRow argument. You should update your row_selected closure to have that argument as well -- then you can use the row inside the closure to figure out which child you want to set visible.
If you really need to know the index of the row inside the listbox, you call row.get_index().
I would like to make use the core jQuery libraries to do as per title. Is it possible to do this with the native jQuery UI library? I prefer not to use plugins as these are not hosted on any CDN (as far as I' am aware).
How can i filter the table by matching the typed input text against the 2nd table column?
<input type="text" id="filter" />
<table>
<tr><td>1</td><td>UK</td></tr>
<tr><td>2</td><td>USA</td></tr>
<tr><td>3</td><td>France</td></tr>
</table>
$('tr td:nth-child(2)') will give you all the 2nd TDs in that table. It is 1-based and will include in its count any non-TD children of the TR.
$('tr td:eq(1)') will also give you all the 2nd TDs in that table. It is 0-based and will only include in its count the TD children of the TR.
Once you wish to do something with the row containing a TD, you can use the TD's parent.
Briefly, you'll put an id on your table element. Then, when you leave the input element (or, in the onclick() handler of a button) you'll do the following:
Grab the table element.
Find each child in turn, which will be a row, preserving a reference to the element
Find the second child of the row and test it against the value of the input to see if it matches (exact match, contains, or whatever kind of test you want to apply).
If it matches, set a style indicating it matched onto the row. If not, set a style indicating "not matched" onto the row.
You'll also need a style sheet that makes matched items visible and not-matched items invisible (or uses dark and light text, or whatever visual indicator you want to use for matched & unmatched).
You can make this somewhat more robust if, instead of relying on the second cell on each row to hold the country name you use a class indicator on the cells that hold the country name. Then, instead of "Find the second child" you would "Find the child of class country. Doing this means that your application won't break when you add, remove, or rearrange columns.