I have an SVG map with some pins on it that need to be clickable. Furthermore, a small animation is activated whenever the user hovers over one of the pins on desktop. My issue is that it is only the actual shape that receives the event, which is problematic, as the pins have a little "hole" in its center, so if the user hovers or clicks in the center of the pin nothing happens. Is there a way to make the event trigger whenever the user clicks or hovers over the bounding box of the shape, ie. the area is outlined when the element is viewed in the inspector, or would I have to extend the actual SVG with an invisible box or some other "hacky" solution"?
Yes, you'll need to add an invisible rectangle on top. You'll want to set that rectangle to pointer-events: fill, so it gets click events even though it is invisible.
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.
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
I have:
self.setScene(QtGui.QGraphicsScene(self))
self.setTransformationAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
self.setDragMode(QtGui.QGraphicsView.ScrollHandDrag)
where self is QGraphicsView. I am opening my svg in QGraphicsWebView() because of it's interactivity like this:
s = self.scene()
s.clear()
self.resetTransform()
self.webview = QGraphicsWebView()
self.webview.load(QtCore.QUrl(path_to_my_svg))
self.webview.setFlags(QtGui.QGraphicsItem.ItemClipsToShape)
self.webview.setCacheMode(QtGui.QGraphicsItem.NoCache)
self.webview.setZValue(0)
s.addItem(self.webview)
Zooming works fine, but when I click over webview item in order to drag it, nothing happens except cursor is changed to text cursor. I can drag svg only when I open it like self.svgItem = QtSvg.QGraphicsSvgItem(path_to_my_svg) but in that case it's rendered as static image so I lose interactivity in svg(mouseover, mouseout in svg elements)...
EDIT based on xndrme's comment:
As he suggested SHIFT+mouse left click works well, but it drags the whole SVG which is inside self.webview. Apparently I've thought that when I zoom with mouse scroll svg gets zoomed, but actually self.webview is the one that gets zoomed and scroll bars appears. So, what I've actually need to know is how to drag the whole self.webview within its scroll bar boundaries (with left mouse click)
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.
Using LWUIT, I have a Form (form1) which contains a Button (see the silver arrow at the bottom of the Form in the left image below). This Button is constructed using an image which has a transparent background to give the effect of a non-rectangular Button. When the Button is pressed it shows another Form (form2).
But unfortunately, when the user presses this Button, a white rectangular background appears for a few milliseconds in the background of the image. see the right image below:
The question is:
How may I prevent this white rectangle from being appeared after pressing the Button ?
You have modified the state of the button when it is selected or unselected. You also have to modify pressed style.
You can do it with button.getPressedStyle()
Try:
button.getPressedStyle().setBorder(null);
button.getPressedStyle().setBgTransparency(0);