General question here not tied to a particular piece of code: I need to know the coordinates of an element in order to scroll down to it.
This element has a v-show condition and is hidden on page load, but user can click a button that will reveal the element (by satisfying the v-show condition).
Problem: if I immediately calculate the coordinates of the element when user clicks the button, I do NOT get the correct coordinates. I have to wait for a second or two with a setTimeout() to finally get the right coordinates.
Question: is there a way to make Vue do this as soon as possible, instead of making it wait some arbitrary length of time?
If you’re showing an element and then wanting to scroll to it, you could try using the nextTick callback:
// Set data that will show other element, i.e.
// this.showOtherElement = true;
// Use nextTick callback to scroll to element in the next tick
this.$nextTick().then(() => {
// Put code to scroll to element here
});
Related
I have to scroll right in cypress for a specific view part. Sometimes it automatically detect, but sometimes after scroll only it detect the button. Scrollbar has no unique ID. What is the solution for this scenario?
I tried cy.scroll(500,0) but this dont work
You can get the element then use .scrollIntoView() chained to the returned element.
cy.get('#uniqueId')
.scrollIntoView()
// now it will be in current viewport
I was trying to implement viewport. The thing I was doing is that I render in one viewport, than I call SDL_RenderPresent to update screen and then again I implemented viewport. The whole process was being controlled by key pressing, meaning by tapping c it used to render first viewport and then next one. But calling SDL_RenderPresent after everytime rendering viewport was clearing up screen. Why is this happening? And can someone tell me that if SDL_Renderer works like a pen/brush with what we can draw things? If not, then how does it work?
I have a problem. If I click on one button then it shows a little window where I need to click on another button. But it is hidden because that window is too small and needs to move with scrollbar. How should I click or move with that scrollbar and then click on the button?
If I try playground on that it takes full window.
Thank you for your answers.
Is that modal related to the width of the screen? If it is you can solve it by adding a new configuration for the viewport to cypress.json:
{
"viewportWidth": 1920,
"viewportHeight": 1280
}
And then of course to a width that is enough to solve your problem.
If that doesn't work, I believe this page can help you: https://docs.cypress.io/api/commands/scrollto.html#Scopes . The result will be something like this:
cy.get('modal_name')
.scrollTo('right')
Besides that I expected a cy.get() to still get the button you were looking for.
This is a very natural way of thinking whilst getting your element. However, imagine you are manually testing the screen above, you will have scroll in order to see and take action to the hidden element. Why should cypress be different?
It is important to transcript to your test, exactly the same actions you would do if manually executing the test. As a result, you should have a scrollIntoView action.
I'm using the fantastic svg-pan-zoom plugin (https://github.com/ariutta/svg-pan-zoom) to pan/zoom my svg element, I want to enable the mouse drag to let use move it.
I have a single elemen inside my svg where I want to prevent the drag because it has a click event and when the user clicks on it sometimes it drag the svg element.
The requested behavior is to drag as standard except when the mouse is down on this element.
I already try with event.stopPropagation() and event.preventDefault() but seems that svg-pan-zoom plugin has its own event management.
How can I prevent the mouse drag?
You can have 2 layers (if you don't need to pan/zoom that element).
Or you can still keep all elements zoomed but only some of them listening for events. Just place everything you want to listen for events in one SVG Group element <g> and set it to listen for events.
Last solution would be to override default events for click/drag and write your own handlers.
I would recommend option 1 if you don't need your element to be zoomed, or option 2 otherwise.
I have dgrid with paging, 50 rows per page, and using a memory store
The last 2 columns are editable select and filtering select, so when I change page it takes some time.
The problem is that there is not indication to the user that something is happening.
No loading message or a spinning image.
So I want to know if there is an event that fires up before the change of page, so I can manually show a spinner.
So far I have not been able to find such an event.
I used firebug to listen to all click that fires up when I click on the grid, and clicked on the next button to see what will happen.
The only event that fired up was after the rendering of the page. Before the rendering I got nothing.
So how can I show a busy indicator to user when I change page on the dgrid?
A div with the class dgrid-loading is added to the content area of the grid when Pagination loads a new page, and that div spans the full width and height of the content area. You can add styles to this class to add a loading indicator.
You can also add a loading message via the grid's loadingMessage property.
There's an explanation and demonstration of the loading node in the Grids and Stores tutorial in the Customizing Messages section.