in my meteor app I have for every view its own template. I use iron:router to switch between the templates but it looks not that awesome without some transitions like fading or flipping the whole page. So I would like to make some fullpage transitions. Is there a common way to do this without changing too much code for upcoming views?
a simple way to achieve this would be to use the hooks available in iron router, particularly the onBeforeAction where you could apply a transition out to view, or view element, and use the onAfterAction to transition the new view in. You can also apply these either to all routes (I would use this for the transition out), and then apply specific transitions to bring views in.
Check out the Iron Router Guide :
https://github.com/EventedMind/iron-router/blob/devel/Guide.md#hooks
and heres a basic tutorial to get you going.
http://www.manuel-schoebel.com/blog/simple-page-transitions-with-iron-router-hooks
Related
I am wanting to recreate the vertical menu behavior Wordpress' admin dashboard has to learn more about Reactjs states, modular components, and more. The behavior I'm am talking about is where you can hover over a sub menu, select it, and then you can see the parent menu selected with the sub menu below it. Before I jump into coding I am looking for some pointers on how to create this efficiently and make it scalable.
Vide example of this Wordpress behavior:
https://i.imgur.com/hNFXYHW.mp4
I am still new to react but I am aware that there are React addons like the React router that can provide conditional logic where if you're on a certain URL you can trigger certain behaviors to happen. But I'm not sure if that's necessary to use at this point.
Is it advisable to use something like the React router for this type of behavior? Can this be mostly handled with vanilla Reactjs, bootstrap and CSS?
I'd like to make this functionality scalable so additional menu items added to the site could just drop into place like Wordpress plugins do.
Any advice is greatly appreciated!
I just want to add smooth transitions between pages. I'm using Meteor, React and FlowRouter. I tried to add several jquery plugins but it does not work. How can I do this?
I´m playing with meteor, iron router and famo.us (mjn:famous integration for meteor)and was wondering how is the common way to create full page transitions with famous surfaces without writing the same code again when I add more views. Does someone have an easy to understand code example for me to create simple transitions like fade from View A -> View B?
I also use gadicohen:famous-views.
I´m also confused which famous integration I should use. there is mjn:famous and raix:famono available for meteorJS
RenderController accepts some reactive data. Lets say that we have something
{{#RenderController}}
{{#if somethingTrue}}
{{>template1}}
{{else}}
{{>template2}}
{{/if}}
{{/RenderController}}
So when the somethingTrue changes reactively RenderController re-renders the page. Same thing comes to Iron router. Coz of Iron router {{>yield}} is reactive, pages are reactively changed with animations.
Very un-complete project.. but you can see codes & github
Famome
I'm trying to disable the Pagination control animation using JavaFX. I could not find any precise info on how to do that. I know some controls have the setAnimated(false) method, but this one doesn't.
Maybe there is a solution via CSS styling or via the Skin interface, but I'm kinda new to JavaFX
Any ideas?
For JavaFX 2.2, the pagination animation is going to be a little tough to disable.
As you note there is no public API to disable the animation (and there isn't anything in CSS). What you will need to is create your own skin and assign that skin to the pagination control.
To do this use the default JavaFX 2.2 pagination skin as a base and edit it so that it doesn't do animations. If you rename your custom pagination skin to another package (e.g. org.acme.javafx.scene.control.skin), then you can specify that new skin via assigning a css stylesheet to your app which includes the following rule:
.pagination {
-fx-skin: "org.acme.javafx.scene.control.skin.PaginationSkin";
}
Apart from the difficulty of initial implementation for a new JavaFX user (which is rather significant) another serious downside to this approach is that in JavaFX 2.2, the skin API is not public, so when JavaFX 8 is released where the skin api is public, your changes probably won't work, so you will need to recode them for JavaFX 8. The reason your changes won't continue to work for JavaFX 8 is that the com.sun.javafx.scene.control.skin.SkinBase class your custom pagination skin needs to derive from will have moved to something like javafx.scene.control.skin.SkinBase to become public API.
So I'd suggest living with the Pagination animation for now unless you really need to get rid of it.
There is currently a a request against the JavaFX runtime issue tracker to allow disabling animation in the Pagination control. See RT-26439 Pagination: Animation of page flip should be deactivatable.
I am currently using the jQuery autocomplete feature. Functionality wise, it works awesome!
But in terms of styling (in addition to theme roller), I would really like to see something like
http://loopj.com/jquery-tokeninput/ and
http://www.emposha.com/demo/fcbkcomplete/
I am still reading the codes in these plugin, so that I can achieve similar look/behavior. Ideally, I would rather stick with jQuery UI library than switching over to other plugin. How would one go about making this happen?
EVERYTHING in Jquery is style-able via CSS. If you want to achieve a different look, simply build CSS that will override the default styles. If there's a specific style you're trying to achieve, I'm sure quite a few of us would be happy to help with ideas to make them happen.
BTW, the emposa.com site link you provided is completely dead. I'm hoping you're not trying to achieve THAT style....