I'm currently trying to implement the toolbar which is fixed to the right side of the screen. Initial state works fine. When I try to dynamically change the content width from the app, BrowserWindow is resized well, but there's a blink on the wrong location due to the delay between setPosition() and setSize().
To get a better idea about this:
Is there a way to either set the position and width at once, change the anchor point from top-left corner to top-right, rerender when its all done or anything else that would prevent the app from blinking when changing BrowserWindow width when doing this?
The way I currently do expand:
setSize() Change width from 75px to 475px
setPosition(): Recalculate position because we want it to stick to the right border of the screen and expand content from right to left
I've already tried with setBounds but it results in the same delay between this 2 actions.
Related
I don't know how to properly explain this.
I have a svg element which is a big rectangle. If i scroll down, then click on my element, the click isn't registered where my mouse is, but where my mouse would be if i didn't scroll down.
So, if i scroll down by 100px and click on my rectangle, the click will be registered 100px above where i actually clicked.
It's behaving as if i hadn't scrolled down.
Edit: I'm using event.clientX and event.clientY to get the mouse position.
I'm new to svg and i don't know the right keywords to describe my problem.
I'm using svg.js, though i don't think it's relevant to the problem.
I assume this is a well known thing. Can someone point me in the right direction? What kind of keyword am i looking for here?
The problem seems simple enough, i just need to know what to search for.
Thank you.
The problem was the utilization of (event.clientX, event.clientY) to get the mouse position.
In the presence of a vertical and/or horizontal scroll, using these properties caused a mismatch between where the mouse appeared within the page and the mouse position provided by (event.clientX, event.clientY).
I was using the mousedown event, with the mousemove event to create a selection rectangle, similar to what you can find in video games. When horizontal or vertical scrolling had been applied, my selection rectangle didn't appear where my mouse was.
This was solved by using event.pageX and event.pageY (instead of clientX and clientY).
Thank you to #ccprog for pointing me in the right direction.
I have an application that uses a non-decorated window (no title bar and so on, it's eventually intended to be a full-screen application). It also has one-pixel-wide line images around the outside to form a natural border with the outside world.
When I run this application and the Window gets its default position (i.e., not at the (0,0) origin), the borders are clearly visible.
However, when I perform a this.Move(0, 0) in the constructor of the main window to make sure the window is positioned correctly, the upper-right pixels seem to disappear thus:
Ignore the Act text in that capture, it's actually the Activities menu under Gnome desktop. The actual upper-left pixel of the window is where those two red lines would meet.
Does anyone know what could be causing this issue? Is it possibly something to do with the Gnome Shell extensions taking control of that area?
The missing pixels are an artifact of the way gnome-shell does rounded rectangles for its windows.
If you really want to change it, you can edit the file /usr/share/gnome-shell/theme/gnome-shell.css. Look for the CSS selector .panel-corner and set -panel-corner-radius to 0px. This will cause the windows to have square corners rather than rounded ones. You will probably need to restart gnome-shell after making the change by pressing Alt-F2 and enter the r command.
Whether that edit will survive a gnome-shell (or even a theme) update is unsure, you may have to put into place something that keeps it at the value you want (or install an extension to do that for you).
That is how gnome-shell renders the top corners of the main monitor, it's a rounded corner, just not very visible with black on black. Changing this rendering is not something an application should do.
If your application is supposed to be full screen instead of just positioned at the corner, you could request gnome-shell to do that with Window.fullscreen(). Do not rely on always being full screen though: the window manager can decide otherwise.
I'm trying to animate a search icon with Snap.svg. You can see that here on my Codepen, the search icon.
I use transform scale to have my icon "bouncing" on each click : loupe.animate({transform: 's1.2s.8'},300,mina.easeout);
The animation runs well except on first click, where it just scales down, then on the second click the effect is ok.
Same behavior with the refresh icon (at the bottom of the Pen), the rotation animation turn in the wrong sense on first click althought I reset transform before animate.
I guess maybe my icons aren't scaled and rotate on good position before first click but I can't find where I could check/set that.
Thank you very much for your help !
Hugo
Use absolute values by using capital letters:
loupe.animate({transform: 'S1.2S.8'},300,mina.easeout);
For the refresh icon, change the rotation from R180 to R-180 and R360 to R0. This seems to work consistently.
clicRefresh = function() {
fleche.stop().animate({transform: 'S.6,.6 R-180 114.75 122.5'}, 400, mina.easeout, function() {
fleche.stop().animate({transform: 'S1,1 R0 114.75 122.5'}, 600, mina.easeout);
});
};
I have a view withing a panel with this styleCLass applied.
.scrollPanel { width:100%; height: 375px; overflow: auto;}
That panel is nested with an extension pages Application control.
I want both the height and the width of the panel set so the scroll bars of the panel appear and the browsers scroll bars are NOT activated.
This CSS works perfectly for width. I can resize my browser window and the width of the panel adjusts as needed and the browser horizontal scroll bars never come on.
But if I try 100% for height, it does not work the same. If I resize for height then the vertical scroll bars for the browser appear.
Also it would be nice to have the height of the panel always equal to the height of the available screen. With 100%, the height is very small if the view is collapsed. The height expands when the view expands. I would like for it always to be the same size percentage wise to the available height of the browser.
P.S. The set size I have of 375 works perfectly with the exception it does not resize with the browser.
Is there any way to do this?
You would need to register a window.onresize event that fetches the actual size of the window and modifies the panel accordingly, e.g. by setting its height with a style.
So the best way would be to create a method that modifies the size of your panel according to the windows size, respecting a minimum and a maximum value. Once that function is finished, you would just need to register it to the onresize event that gets fired when anything has changed the viewports display dimensions (read, a real resize or something that has enabled the windows scrollbars).
In the perfect world you would debounce/throttle the execution of this method to maybe at most every 100ms to avoid excessive CPU load during a window resize with the mouse and a window border, because depending on the browser, that event gets fired on every single pixel the mouse has moved during such a resize - which is fairly often and may lead to a slower UI response.
I have a UIScrollView (managed by a view controller) which I am using both full screen and as a subview. The full screen version works fine - the subview does not.
The subview is positioned so that it takes up about the bottom half of the screen, with a small - 20 pixels or so - margin at the bottom.
Initially it displays in the correct position but overwrites the bottom margin - even though the scrollview's frame is set to leave the margin.
When I scroll the view up by dragging it, the whole view moves upwards and obscures the top of the window. The frame stops moving when it hits the navigation bar at the top and starts scrolling like a normal scrollview. If I scroll it enough it eventually reveals the margin at the bottom of the screen.
I am at a loss to know what to do - I've tried every spring combination I can think of. I'm now looking at subview clipping.
Images below. The first shows the scrollview on initial page load, positioned correctly aside from lower margin overwrite. The scroll view has a white background.
The second image shows it scrolled up toward the top:
The third image shows it scrolled all the way up to the top - note that the lower margin has become visible.
I'm not 100% sure on this one, but worthy the shot: my guess is you're likely not setting the Bounds property correctly on your table.
To solve this issue, the easiest way would be to set myscrollview.clipsToBounds = true.
Something is definitely wrong here. I think what happens is that you are adding the same instance of scrollview as a subview on itself. So basically what you are left with, is one instance alone. Anything you add to the "subview", is basically added on the superview, since it is the same object.
For example, this is what I think you are doing in the view controller:
//...
private UIScrollView myScrollView;
public override void ViewDidLoad()
{
this.myScrollView = new UIScrollView();
this.View = this.myScrollView;
this.View.AddSubview(this.mySrcollView); // same instance
this.myScrollView.AddSubview(aUIButton); // "aUIButton" will be added in View also, since it is the same object
}
If this is the case, it is wrong. I suggest not changing the controller's view at all. If you want to have a controller that has a fullscreen UIScrollView, just create it and add it as a subview, making sure the AutoSizesSubviews property to true.
That's my understanding at least.