I have a WebView with a number of anchors like this:
<a name='some_id'></a>
I am able to jump to the anchors using something like:
webView.loadUrl("javascript:(function() { " +
"window.location.hash='#" + hash + "';" +
"})()");
But is it possible to smoothly scroll to the anchors somehow?
Unfortunately this would require a bit of effort on your end:
Instead of performing a fragment navigation, you'd need to determine the position of the anchor element on the page. You'd need to use addJavaScriptInterface to convey this back to the Java side, don't forget to convert the CSS pixels you get from JS to physical pixels by multiplying by webview.getScale().
Use an OverScroller to drive the animation to the desired scroll offset.
Related
I am working on a project using Leaflet. I want to place a label for objects on the map. I don’t want the label to appear on the map. I want the label placed above the map, but at the screen or div Left location from a latLng point.
I can’t seem to get the correct position using the functions available. Is there some example I can look at to give me insight? I would think Leaflet could do this.
The key here is to leverage the latLngToContainerPoint() method of L.Map - it will give you the pixel coordinates relative to the map container of the L.LatLng passed.
So create a container for a tick...
<div id="topbar"><span id="toptick">↓</span></div>
<div id="leaflet"></div>
...and use CSS to ensure it's on top of the map container, and has the same width. Then, run a function to translate the map point you want into an offset relative to the top-left corner of the map container...
function repositionEdges(){
var offset = map.latLngToContainerPoint(geopoint);
}
...run that after map initialization, and after every movement of the map...
repositionEdges();
map.on('move zoom', repositionEdges);
...and finally, inside that function, shift the tick horizontally tweaking its style...
function repositionEdges(){
var offset = map.latLngToContainerPoint(geopoint);
document.getElementById('toptick').style.left = offset.x + 'px';
}
You can see a working example at https://next.plnkr.co/edit/60qrWND50mCOQ11T?preview .
This is just one approach. The specific implementation will be different if you're using more than one point, or if you want to use <canvas> for drawing the ticks.
See also the graticule, edge scale bar and edge markers plugins from the Leaflet plugins list. Those plugins contain implementations of similar concepts.
I have canvas with vertical layout and 2 elements within (in fact it's element with only recttransform on it, let's call it container). So these 2 containers take a half of the screen by height and stretched by width, ok. How can I place an text element in above container and snap it to the bottom of this container? I tried press bottom button in recttransform widget (also with shift and alt) and it seems it doesn't affect my transform at all
P.s. May be I can use some free plugin instead of default unity components of UI layout?
There are different ways of placing your UI elements
Simply drag and drop it to the bottom where you want it
Use the anchor widget to set the anchoring to bottom with horizontal stretch and hold shift to also set pivot. Then set Pos Y to 0. Set Left and Right to 0.
Assuming you also want other elements in your containers, place a Vertical Layout Group on each container and make sure that your text element is the last child of the container in the hierarchy.
I would also advise you to seek out tutorials on Unity UI anchoring, positioning, scaling, and layout. You need a deeper understanding of how these things interact than you are likely to get from Stack Overflow. Otherwise you will suddenly find that your UI behaves in unexpected ways when rearranged or displayed on a different aspect ratio.
It's fairly easy with Unity UI system. You just need to get used to it. Here are simple steps to accomplish what you want:
Create Text element as a child of that container.
Select your newly created element and edit its RectTransform component values:
2.1. Set both Y axis anchors (min and max) to 0.
2.2. Set pivot value to 0 as well.
2.3. Set Pos Y value to 0 as well.
Now your Text element is anchored at the bottom of the container and its position (and height) is measured from the bottom of the Text element itself.
I am using d3 chart to plot some charts.
I am looking for something by which I can flip my axis on a click of a button. Having said that I mean, I am looking for the functionality which seamlessly works for all type of charts like bar, line, stack etc.
Has anyone done some awesome work like this? Please help
Here is the sample
http://jsfiddle.net/adityasethi2601/ae5BP/
If you arrange your chart carefully, you should be able to achieve the flip with SVG Transforms to rotate your image, translate it if necessary to new margins, and then reverse-rotate any text that you still want to be horizontal.
As a quick-and-dirty example, I've adapted your fiddle so that when the button is clicked, a class gets toggled on the SVG as a whole, which triggers a CSS rotate transform on the entire image.
Javascript:
d3.select("div#chart > svg") ///select the svg
.classed("rotate", function(){
return !d3.select(this).classed("rotate");
//check whether it is currently rotated
//and set it to the opposite
});
CSS:
svg.rotate{
/* rotate the entire image */
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
http://jsfiddle.net/ae5BP/6/
However, note that CSS transforms (which apply to html objects, such as the entire SVG when embedded in a webpage) are not directly equivalent to SVG transforms, so I wasn't able to get the "reverse-rotate" on text elements working. To use SVG transforms, you'll need to wrap your entire chart in a <g> element to which you can apply the rotation. You'll also need to figure out the appropriate "center of rotation" coordinate, otherwise things will be rotated around your (0,0) origin point.
But this should give you an idea of where to start.
P.S. I also adapted the fiddle to make proper use of JSFiddle formatting and the external resources option for loading D3 -- use this format in the future.
You could also draw two versions of your chart (vertical & horizontal bar versions), and achieve a similar affect by having the "Flip Axis" button toggle visibility between the two.
I am using iCarousel in my project. So is there a way i can set timer , while i scroll the Cylinder wheel. I need to keep the wheel rotated for 5 seconds.Need the scrolling animation until that.
Well if you read the documentation of The iCarousel carefully you will find that there are certain methods which include the time duration it takes for the iCarousel to move from one index to the other, namely -
- (void)scrollToItemAtIndex:(NSInteger)index duration:(NSTimeInterval)scrollDuration;
This method allows you to control how long the carousel takes to scroll to the specified index.
- (void)scrollByNumberOfItems:(NSInteger)itemCount duration:(NSTimeInterval)duration;
This method allows you to scroll the carousel by a fixed distance, measured in carousel item widths. Positive or negative values may be specified for itemCount, depending on the direction you wish to scroll. iCarousel gracefully handles bounds issues, so if you specify a distance greater than the number of items in the carousel, scrolling will either be clamped when it reaches the end of the carousel (if wrapping is disabled) or wrap around seamlessly.
- (void)scrollToOffset:(CGFloat)offset duration:(NSTimeInterval)duration;
This works the same way as scrollToItemAtIndex:, but allows you to scroll to a fractional offset. This may be useful if you wish to achieve a very precise animation effect. Note that if the scrollToItemBoundary property is set to YES, the carousel will automatically scroll to the nearest item index after you call this method. anyway.
- (void)scrollByOffset:(CGFloat)offset duration:(NSTimeInterval)duration;
This works the same way as scrollByNumberOfItems:, but allows you to scroll by a fractional number of items. This may be useful if you wish to achieve a very precise animation effect. Note that if the scrollToItemBoundary property is set to YES, the carousel will automatically scroll to the nearest item index after you call this method anyway.
Please check these methods . Hope they help...
I need a simple image viewer widget to display a Pixbuf, with a zoom factor that can be changed using the scroll wheel (integer factors only, nearest neighbor interpolation), zooming in should adjust the scroll position such that the current center or mouse position will be the origin. Clicking and dragging the mouse should move the surface accordingly; basically what eog or evince do.
There was once an external gtk-image-viewer component for GTK2, but I haven't found anything else…
So I tried implementing my own and this is how far I came:
struct ZoomableImage : public Gtk::Scrollable, public Gtk::DrawingArea {
ZoomableImage() {
auto h = get_hadjustment();
}
};
Which leads to a warning
gtk_scrollable_get_hadjustment: assertion `GTK_IS_SCROLLABLE (scrollable)' failed
I couldn't find any proper documentation about how to inherit interfaces in GTKmm, the headers hide a constructor from doxygen which is supposed to be called with the result of a base class's init() function?! Some examples initialize Glib::ObjectBase(typeid(ZoomableImage)), which only adds more errors.
(My idea was to put my ZoomableImage in a ScrolledWindow which should provide me with H/V-adjustments, these range from 0 to the image's real height/width, in on_draw, I would read the adjustment's value, apply the zoom factor and draw the Pixbuf accordingly. Would this make sense?)