We Keep Coding

Diagonal scrolling when both X and Y scrollbars are available

I use a magic trackpad (a touchpad) and one thing I have noticed is that applications such as Adobe Photoshop will let me scroll diagonally (both X and Y axis at the same time).
I never thought about using that same functionality in my browser, as I didn't have any use case for it. Until now. I'm working on a project which has a "canvas" (a drawing area) that is bigger than the visible area of the browser.
I have scrolling bars (overflow: auto;), but moving around the canvas just doesn't feel as "good" (in terms of UX) as with Photoshop. That's because I can't scroll both axes at the same time.
Eg, if I'm at the top left corner of the canvas and I want to go to the bottom right corner, in Photoshop I just touch-drag diagonally two fingers on my touchpad, but in Chrome/Safari/Firefox I first have to scroll down and then scroll right.
Visual example: https://codepen.io/alexandernst/pen/XWpPJNj (the left area shows the entire canvas, the right one is what the user sees. Try to scroll in the right area until you see the red square.)
Is there any way I can implement diagonal scrolling?

Keeping rectangle in place after rotating

I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!

HighChart/HighStock not showing closest tooltip

I'm having this wired tooltip hover problem. It basically feels like HighStock is showing the wrong tooltip when you are close to the edge of the chart.
If you hoover in the middle of the chart, it's spot on. The closer you come to the edge, the more "off" it gets.
I see there are a rect.highchart-data-label-box overlay around the points, that are pretty close to the mouse position in question, but it still shouldn't take preference of the box I'm inside of with the mouse button in the same given moment?
View this screencast
You will see I have the mouse pointer directly outside of the chart (to the left) – fair enough, it snaps to the closest point(s).
Then I move the mouse pointer direct on the first set of points on the Y-axix – it should still snap to the closest point(s)?
I've tried setting snap to zero, tried setting shared to false, among other things.
Have anyone have the same or similar problem? Suggestions on what could be wrong?

CSS hexagon rendering issue in ff/ie

I have a hexagon menu on this site which is correctly working in chrome but it has rendering issues in FF and IE.
http://wrausch.de.w013b68e.kasserver.com/
When you hover the hexagon menu in FF/IE you can see 2 blue lines which are not fully covered by the hovereffect.
Since I just got the site from a colleague who left I don't know where to begin.
Any help would be appreciated.
Thanks

Transformed elements - like the skewed elements you used to create the hexagons - end up in positions that are measured in fractions of a pixel, and so the browser has to make a judgment about how to display elements on a screen where mathematically perfect shapes need to be represented in a grid of blocky pixels.
Two transparent elements are next to each other and are slightly overlapping due to this rounding. Since the elements are slightly transparent, any overlapping would show up as a dark line.
Mathmatically, the elements are not touching, but due to the expression and simplifications of the browser, they are now slightly overlapping.
On Firefox the lines appear only when the transition is complete. This occurs because the rendering engine behaves differently during an animation than when it is complete.
To fix this I would try using fully opaque background colors when the user hovers. That way even dramatic overlapping would not cause a change in color.

Firefox: Get mouse coordinates of top-left corner of viewport

Good day everyone.
I am working on a Firefox extension, and I want to pop up a tooltip at a certain offset from the mouse cursor. However, the problem comes when this offset is out of the viewport. It gets displayed but the user will have to scroll over there. I hope to enhance this by moving the tooltip pop-up within the current viewport.
However, a problem arises because the only clue I have to where I am in the document is the mouse-position. A partial solution would be to calculate how much to move my tooltip by finding out if the current mouse coordinate + the tooltip width/height and see if it will exceed window.innerHeight or window.innerWidth.
However, I come to realize that if it was a very long document and the user scrolled down a fair bit, the mouse coordinate would have a very large y value. Therefore, I can't rely solely on window.innerHeight to see if I am still within the viewport. Anyone found a way to find out the mouse coordinate of the top left corner in the viewport if the user has scrolled down a lot?
Thank you in advance! =)

More specifically in your case, document.body.scrollTop.
However, that's pretty IE-specific, which defeats the purpose of most FireFox extensions. ;-) There are also some DTD dependencies to boot.
This looks like what you want: Determining browser dimensions and document scroll offsets

I think you are looking for something like the scrollTop property:
scrollTop gets or sets the number of pixels that the content of an element is scrolled upward.

#WAI - Well what you said is correct but precisely you will have to use the following if you are working for firefox extension:
window.content.pageXOffset
OR
window.content.pageYOffset