I used css & corner images to get rounded corners on a map but when showing streetview the close button is under the image and can't be clicked. Anybody have any ideas?
I ran into this problem recently... I created a "frame" (ie: a div that acts like a like a "picture frame" that sits perfectly on top of the map div; position it absolutely if you need to) and apply the rounded effects and corner images to the frame instead of the map div.
Alternatively you could experiment with wrapping the map inside a parent div with overflow hidden.
I ended up binding an event to the top right div to close the street view on click.
Related
Currently on a page I am building I have heremaps as the background page, designs call for two elements on the left and on the right that I'm placing over the map element. Right now, when I'm selecting the options button on here maps to select the map view type and other options, those views get hidden as my right element covers it. I've noticed the here map logo has a z-index of 1. Is there a way to change the zIndex of the options button on the buttom right corner?
This code should work for you:
// assuming ui is instance of H.ui.UI
ui.getElement().style.zIndex = 999;
For more information see https://developer.here.com/documentation/maps/topics_api/h-ui-ui.html#h-ui-ui__getelement
For exame, the enable vr mide button in the lower right hand corner. I need the buttons and text to appear and stay fixed to the screen when an event is triggered. Similar to how a canvas and button works in unity.
Parent the buttons to the camera. Then they will stay locked to the camera.
Move the buttons using the position component, and they will move in their local coordinate space.
Parent/child relationships are created by nesting the entities, like this.
<a-scene>
<a-box>
<a-sphere></a-sphere>
<a-light></a-light>
</a-box>
</a-scene>
iOS can use layer.cornerRadius to make a round UIButton.
Does WKInterfaceButton have this property?
If not, how can I make a round WKInterfaceButton in WatchKit.
If you put an image inside a group, you can then set the radius of the group. This crops the image into a circle. In the picture below, I have:
Group (radius 56)
Group (radius 52)
Image (a square image)
While this example is with an image, you can use the same technique for a button. Previously the dog was clickable as a button so this is doable.
WKInterfaceButton does not have a corner radius property. You can make a circular button by setting a circular image as the button's background image. You can generate the image in code doing something like this: Draw a simple circle uiimage
You don't need an image to make WKInterfaceButton rounded. Instead:
Go to Attributes inspector for the button, and select content type: Group
Inside the button find the group and set its corner radius to whatever you need.
Scroll down the inspector and set both fixed Width and Height to the value equal to the radius doubled. Here you go
You can put whatever you want inside the button, for example a text label. This way you also can make oval buttons.
I'm doing an application in flex where I draw different sprites inside a canvas. Depending of the dimensions, scrollbars can be appear. I would like to move the "image" with the movement of the mouse as you can see at the Adobe Reader when you are reading a document with zoom (hand mouse icon). In this way, you dont have to touch the scrollbar.
I'm start trying with drag and drop properties of the canvas, setting the position of the scrollbar according with the movement of the mouse but that is not as I expect.
Any ideas or suggestions?
Thanks in advance.
Recipe:
Listen for the mouseMove (MouseEvent.MOUSE_MOVE) event on the canvas
In event listener, examine event.localX, event.localY
Based on those values and the canvas's width and height, set the canvas's horizontalScrollPosition and verticalScrollPosition accordingly
Hope this helps.
What you can do is, change the position of the scrollbar , when the mouse reaches the last 20 pixels on the left or the right, or the top and bottom.
What you would really need to do is, have a mouseMove listener on the whole application, and when the mouse is within the end ranges of any of the sides, you can use the scroll.scrollTo function to move the scrollbars.
I am having an iframe on a page. The iframe resizes itself based on the content loaded in it. So, it won't be having any scroll bars.
The iframe contains a list of draggable elements (Prototype & Scriptaculous). I have to drag the elements from bottom to top or vice versa, and while dragging, the parent window should scroll accordingly. I have modified the dragdrop.js file accordingly to scroll based on "window.parent.window" element. The outcome is that the parent window scrolls from bottom to top automatically on the drag of an element, but not vice versa.
Ok guys, thanks everyone. I think I have resolved this issue myself.
All I had to do was to calculate the position of the IFrame window and minus it from the top scroll value calculated by the drag & drop js code.