I want to achive a Navigation for my application that looks like a TreeView but is animated like a TitledPane. That is, a Transition when expanding/collapsing an item for its content.
What I did so far is to nest multiple Accordions like this:
- TopAccordion
---- TitledPane
------- Accordion
----------TitledPane
----------TitledPane
----------TitledPane
---- TitledPane
------- Accordion
----------TitledPane
----------TitledPane
----------TitledPane
etc. Unfortunately, this results in same ugly transitions (notice the large gap when opening a nested TitledPane):
Is there a way to animate TreeViews and how? I couldn't find a way to do it by looking at the TreeCell/TreeItem API.
Regards,
Sebastian
I think, there exists a way to implement visual effect of opening like in Accordion/TitledPane for TreeView.
What you need to understand is the following thing :
There is a scenegraph (tree of nodes, which are shown on the scene). When you expand a treeItem, some TreeCells are added in the scenegraph, and content of the tree is reallocated. What you need - is to add animation, which will change the height of cells smoohtly, so that scenegraph engine will redraw the cells, while they have an encreasing height.
But you will have to do it be yourself. And I think, there is no direct support from TreeView or TreeCell for that.
You will find this decision working, and find, that it can be implemented for a wide range of situations, you can file an RFE in jfx-jira for animation support.
Related
I've implemented a Masonry layout that adjusts dynamically to the window size and it all works very well. I calculate its height and width and reset the cell measurements when any outside dimensions change.
I just need to be able to programmatically slide into view a specific item while it is being edited as well as scroll back to top programatically. Is this possible? I've tried to set scrollTop or scrollToIndex but it has no effect (unlike List). I have the feeling that I'm missing something obvious.
Thank you!
Unfortunately, the Masonry component does not currently support a scrollTop prop (other than a partial support required to work with WindowScroller). I would be willing to review a PR adding this functionality, but whether it landed would depend on the complexity. :)
How can I apply slide methods of jQuery to a non-SVG DOM element in d3.js?
Is there something I can use out of the box?
No, there's nothing out of the box, but you can do this by simply animating the relevant dimensional attributes, e.g. slide down would be something like
d3.select("#element").attr("height", 0)
.transition().duration(500).attr("height", realheight);
Depending on what you want to animate, you might have to work with clip paths to hide part of the element as it is being slid in.
You can of course simply use the JQuery methods. There should be no problem with that unless you want to run D3 transitions on the same object at the same time.
I met a limit with quite typical operation. Simple document:
http://i.stack.imgur.com/JNI9v.png
As you can see, image has right and bottom margins. But... CKEditor image dialogue provides VSpace and HSpace parameters which influence together to Top-Bottom or Left-Right twin values and adds unnecessary top and left margins:
http://i.stack.imgur.com/vo3oC.png
Of course, users won't use pure code to define this in style="..." attribute. So, how to allow users insert images as shown on the first image? Maybe exists CKEditor plugin or patch... and i just can't find it.
Another, maybe even a simpler way, to achieve what you want would be to use a predefined set of styles for images and use the "Styles" combo to apply one of preselected classes. This way the styles used for images could be more consistent.
To see what I mean you can check the "Standard" demo - click on an Image and in the "Styles" combo select "Object styles -> Styled image (right)"
I was looking for a custom image grid and found a similar question that had a really sweet component in an answer.
I downloaded the code and after some fiddling, I managed to get it to compile in DXE2. It looks really cool, but I can't get either scrollbar to show up. I also can't figure out how to dynamically control the images displayed. Or how to update the grid based on keyboard events.
Also, to get it to compile I had to remove the GR32 references; the library I downloaded had too many incompatibilities with DXE2 for me to resolve.
Any help would be greatly appreciated. This really looks like a killer component.
Update from Bill:
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question.
If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better. Any idea on what is going on?
... but I can't get either scrollbar to show up.
Well, there is no horizontal scrollbar. There is the property ColWidth that controls how much images are drawn in one row, depending on the control's width. You might update ColWidth in an OnResize event handler due to anchor settings, for example.
The vertical scroll bar appears automatically when not all images (incl. spacing) fit in the clientrect. The images are drawn on a TPaintBox and that paint box' size is updated as soon as the image count changes:
procedure TImageGrid.RearrangeImages;
begin
...
FPainter.Height := Max(ClientHeight,
FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing);
The component inherites from TScrollingWinControl, so the scroll bar should modify accordingly. If not, then Bill has a workaround found as commented:
VertScrollBar.Range := FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing;
I understand this obviously also works, but I really wonder why the scroll bar's range should be modified manually. Here in D7 I have no problem with a hidden vertical scroll bar.
... I also can't figure out how to dynamically control the images displayed. ...
The most easy way to fill the component is by assigning the Folder property to a path with images. Only the images with the file formats in the FileFormats property will be loaded. To specify the images manually (e.g. to combine multiple folders), use the FileNames property. When the Folder property is set, then the FileNames property is updated accordingly, but those file names are not stored in the DFM. When you change the file names (e.g. you delete one from the folder), then the Folder property is cleared and the component uses the FileNames property instead.
... Or how to update the grid based on keyboard events. ...
The only keystrokes currently implemented are Up, Down, PageUp, PageDown, Home and End which all scroll the control. What more key actions do you wish? It's a viewer.
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question. ... If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better.
While loading the images, a temporary rect is drawn with size ColWidth * RowHeight. All images are stretchdrawn within that size, so adjust your ratio of these properties to make the spacing equal everywhere. Note that you can also influence appearance with the ImageHorzAlign and ImageVertAlign properties.
Update:
The component you refer to is recently completely rewritten, and some of the answers above are outdated.
It now has a Propertional property that defaults to True, but when set False, it will stretch up the thumbs to whatever cell size you have set, independent from the original image sizes. Small images could remain narow though, unless you set the new Stretch property to True.
It now distinguishes between RowHeight and CellHeight, and ColWidth and CellWidth. The difference between both is CellSpacing.
The component does not descend from TScrollingWinControl anymore, but from TCustomControl and only the vertical scroll bar is added.
I'm new to webkit animations and I have been trying out to do this kind of animation
http://demo.jeffrey-way.com/tutsMobile/#site.php?siteName=psdtuts
If you click the list element you will see page sliding in and sliding out.
I want to implement this animation to my app which is built with backbone.js, underscore.js, zepto.js
I could use jqTouch or jquery mobile but I would like to make it as light weight as possible, because I'm building it only for IOS. So thats way I wan't to implement it by my self.
Any hints to make this implementation or should I go with jqTouch?
In this example, there is some sort of (I hate to be vague...) ajax based content loading system. Take a look at the source:
<div data-role="page" id="article.php?siteName=psdtuts&origLink=http%3A%2F%2Fpsd.tutsplus.com%2F%3Fp%3D15026" class="ui-page ui-body-c">
When you first visit, that div doesn't exist. It's created by javascript when content is required, then filled with that content, then translated (animated) into the viewport.
Here is a step by step, deduced from a quick look at the page:
Base page is loaded, including css, javascript, nav list
Script is waiting for a nav item to be clicked.
Upon clicking, an ajax request is made to the content corresponding to the clicked item; determined by href="article.php?siteName=psdtuts&origLink=http://psd.tutsplus.com/?p=15081". My guess? This ajax request is getting content from the same place as psdtuts.com, likely in a database.
While that stuff is loading, javascript shows a loading animation. When loading is complete, it's hidden again.
Once the new content-filled div is created, it is given a default position with its left edge placed right outside of the right edge of the screen. Upon the event of being positioned, javascript then determines the view's dimensions and translates the div across the horizontal dimension. At the same time, the nav list is moved the same direction and distance.
When back is clicked, the view's dimensions are determined again (In case the window size changed) and the nav and content are translated to the right, hiding the content and showing the navigation again.
Repeat
I could be off from how this exact sample is being done, but... Well, this would work.
You wouldn't be that crazy to use a framework for something like this, but I can understand wanting to do a custom job. It would certainly be faster for users, but slower for you. Depending on your intent, that would be just fine.
edit: If you're only serving this to users with webkit, using a framework is even less necessary... If you're not worrying about cross browser support, there's really not a lot going on here that you couldn't accomplish easily with raw javascript.
The only reason I use jQuery for example, most of the time, is to ensure things work alright in most use cases. It just smooths so many things out... Even if 95% of the framework isn't being utilized, it's worth it when you've got a deadline.
I founded out one good example
http://andrew.hedges.name/blog/2009/05/29/animating-your-iphone-web-application