When Array Element Update Use Socket.io then Page Scrolled Down in Angular 7. Please Tell How to stop page scroll down in like event.
this.socket.on(discussion.id, (reponse: any) =>
{
for (const [index, discussion] of this.discussionList.entries()) {
if (reponse.data.id == discussion.id)
{
reponse.data.displayComment = discussion.displayComment;
this.discussionList[index] = reponse.data;
console.log('Updated');
break; //Stop this loop, we found it!
}
console.log('finding....');
}
});
You basically updating some random item in array which is rendered as list. Of course your list will change content and new content can appear in current view. Its how html in browser works - nothing related to "Angular 7". Scroll not changed - changed what is visible in current scroll.
What you want to do is plain JS madness:
Before updating array 'remember' what was visible in current scrolled view. For example you read scrollTop and they loop over each item in list and check it's offset from top - closest to scrollTop is win.
After list updated find that element and scroll back to it.
It is messy, heavy for performance but thats a price of changing random piece of html on page.
Related
I'm looking to create a interactive nav bar for my own personal study purposes, so the idea behind it is if you click on down the number in the corner of the screen changes and a new image and text pops up every time this goes til number(page 5) all the other elements would be on display none except that one page that is active
I'd like to know if it would be possible to create a nav bar and lets say you have a set up nav with 2 buttons up and down how to make certain things not show up and others show up, i think my counter or var is not calculating properly, this is my javascript if statement( more in depth js fiddle https://jsfiddle.net/emilegmn/1L3h51zw/ )
if(numberCount < 1 ) {
add class to nav showing only one button ( down )
}
and this is my counter
numberCount = numberCount + 1
and then after that between 2-4 to show 2 buttons ( up and down )
and at 5 to only show up.
If someone has any things or knows something online that does this, please link me to it if you want!
I have tried finding how to do this but I am still trying to get it all figured out,
Thanks in advance and for your time!
If I understand correctly, is this what you want to achieve:
User clicks between two buttons to make new things appear (like a slider maybe?) but in a nav bar.
To do so you need JavaScript as well as an HTML structure that helps you out. In summary, you could do something along these lines. Granted this only takes into account a sort of "next button", if you want a previous one then you just need to add another function that instead of adding to the current_slide , subtracts from it.
Happy coding!
HTML
<nav id="slider-nav">
<div id="slide-1" class="active"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</nav>
CSS
With this you make sure that only the <div> with class .active is visible
#slider-nav div:not(.active) {
display:none;
}
JS
This would be your sweet JavaScript (jQuery)
//To be placed within your document ready function
const nav_slides =[]; //Holds the id of all your slides
var current_slide = 0;
$('#slider-nav div').each(function(){
nav_slides.push('#' + $(this).attr('id'));
});
/*This would be the part of when clicking happens on the 'next' button in your nav.
Keep in mind that the definition of the function must be within the same
scope as the defined variable, current_slide and nav_slides.
Hopefully, all encapsulated into one single scope that is your api.*/
function nextSlide(){
$(nav_slides[current_slide]).removeClass('active');
current_slide = (current_slide + 1) % nav_slides.length;
//Move on to next slide
//It's a circular counter, when it reaches max slide 4, it'll go back to 0
$(nav_slides[current_slide]).addClass('active');
}
ps: The initialization of current_slide is not dynamic. If in your HTML you happen to change who the first slide with active class is, then you need to update it in your JS. It would be very useful to initialize that current_slide dynamically, in other words, not hard coded out of laziness.
How can I scroll a grid so that I can fetch all element's text for post-processing? Rows under the grid gets created dynamically as I scroll up/down. I tried doing it through Javascript,but, being new to it, did not get success.
I am using protractor and VS Code.
HTML:
Tried:
var div = element(by.css('.ag-scrolls'));
var lastRow = element(by.css('CSS value of last visible row in the view e.g: 5th element ')); //I have 5 rows displayed at once in the view. Remaining elements are displayed when I scroll.
browser.executeScript("return arguments[0].offsetTop;",lastRow.getWebElement()).then(function (offset) {
browser.executeScript('arguments[0].scrollTop = arguments[1];',div.getWebElement(), offset).then(function() {
// assertion of last possible element/row after complete scroll.
});
});
I gave the locator values for first two lines.
Use browser.executeScript("arguments[0].scrollIntoView();", lastRow)
mouseMove has worked for me. It'll scroll the object you pass to it into view
browser.actions().mouseMove(<element>).perform();
I was watching Matthew Podwysocki event on https://www.youtube.com/watch?v=zlERo_JMGCw 29:38
Where he explains how they solved scroll on netflix. Where user scroll for more data as previous data gets cleaned up and more adds up (but scroll back shows previous data again).
I wanted to do similar, but I grabbed netflix demo code:
function getRowUpdates(row) {
var scrolls = Rx.Observable.fromEvent(document, 'scroll');
var rowVisibilities =
scrolls.throttle(50)
.map(function(scrollEvent) {
return row.isVisible(scrollEvent.offset);
})
.distinctUntilChanged();
var rowShows = rowrowVisibilities.filter(function(v) {
return v;
});
var rowHides = rowrowVisibilities.filter(function(v) {
return !v;
});
return rowShows
.flatMap(Rx.Observable.interval(10))
.flatMap(function() {
return row.getRowData().takeUntil(rowHides);
})
.toArray();
}
But I'm bit confused on how to pass new data or page data according to the scroll here.. Can someone give little explanation on how I can do the following:
fetch first list (I can do that)
fetch more list as user scroll down (using paging next page)
remove previous fetched data from memory, and refetch on request (scroll up).
Here is how I would do it in general lines. If this seems to give you satisfaction, I'll edit and add more details.
Version 2 : (For first one, see edit changes)
Premises :
The tag containing the dynamic list will be called "the zone".
Each row of the list will be contained in another DIV which can contains anything.
A page is enough rows to cover the zone.
Three javascript "constants" : numberOfLinesOnFirstLoad, numberOfLinesOnPageLoad, numberOfLinesToLoadAfter
JavaScript variables to hold required data : rows[page#], heights[page#], currentPageNumber = 1, maxPageNumber = 0
page# : # is the page number
rows[page#] shall contains a way to get them back from database, not real DOM objects.
Steps / Events :
Add the zone tag.
Load numberOfLinesOnFirstLoad rows.
If total rows height inferior zone height multiplied by three, then load numberOfLinesToLoadAfter rows. Repeat step 3 if rows added, otherwise continue to step 4.
maxPageNumber +=1. Find the next rows that full fills the zone. Add those rows to rows["page" + maxPageNumber] (as an array). Calculate the height of those and add it in heights["page" + maxPageNumber].
Repeat step 4 until no more rows and then continue to step 6.
When scrolling down and page1 (which means last element of rows["page1"]) is not visible, add another below : page4.
maxPageNumber += 1. Load numberOfLinesOnPageLoad rows.
If total new rows height inferior zone height, then numberOfLinesToLoadAfter rows. Repeat step 8 if rows added, otherwise put total new rows height in heights["page" + maxPageNumber] and the new rows as array in rows["page" + maxPageNumber] and continue to the step after entering this one (so either 9 or 11).
Still scrolling down, if page2 is not visible, remove the page1 elements from DOM and adjust scroll position by removing page1.height (heights["page1"]).
Load page 5 (step 7 and 8).
So now, there is page2 to page5 in the zone which page2 and page5 are not visible. If page3 is fully visible, than page4 is not, otherwise a part of page3 and page4 are visible. (Just to indicate possibilities, but not important)
When scrolling up and page2 is starting to be visible (so last element of rows["page2"]), load page1 by using rows["page1"], add page1.height (heights["page1"]) to scroll position and remove page5 from DOM. Here you can either remove it from variables rows && heights and maxPageNumber -= 1, but you can also keep them so that reloading this page is done in one process (so loading a page would imply to check if page definition already exists in those variables).
Playing around with Slickgrid. But got some questions that I'm not figurate out.
I have made an Regex filter on two X cells, and it works surprisingly well.
But for every time you filter or make other actions i want to flash all incorrect fields with cellFlash or highlighter.
Atm i have made a formatter with same regex as filter uses but it seems not 100% correct.
The problem when i'm using cellFlash is that it trigger the animation on ALL rows not only the rows thats rendered.
I'm not sure that i'm triggering the flashcell on correct callback/stage, I did it on my filter function i saved all incorrect rows in an array then i loop them throught and trigger flash.
So is it possible to get all items thats rendered in Viewport? Haven't find any information about this. Only data i can get out from getRenderedViewport.. is pxls. getRenderedRange() or getViewport()..
If you need to do processing on each data item in the current slick grid viewport, you can use getRenderedRange() to get the range of data item indexes that are rendered. You could then use that to get each visible data item
function forEachItemInViewport(fn) {
var range = slickGrid.getRenderedRange();
var bottom = range.bottom;
while(bottom--) {
var dataItem = slickGrid.getDataItem(bottom);
fn(dataItem);
}
}
forEachItemInViewport(function (item) {
// do your work on each item in viewport
});
I am implementing safari browser search kind of functionality.
function findSearchResults(searchString, direction)
{
if (direction == SEARCH_PREVIOUS)
{
backwards = true;
}
if (window.find(searchString, false, backwards, true))
{
//word highlight code
}
}
It is working as I wanted. The only thing I couldn't figure out is, When I am in the middle of document lets say 5 of 10 results, and search for another string, its not performing search from the top of the page instead it is searching from the position where it was in previous search in the document. Please help me.
The search begins from the current selection, if you want to start the search from the top of the page each time, you need to set the current selection appropriately.
window.getSelection().empty()
This should reset the selection and start the search from the top
http://help.dottoro.com/ljkjvqqo.php