Is there an equivalent Greensock (GSAP) implementation or plugin that has similar behaviors to Metafizzy's Isotope.js (Masonry layout). Specifically, I have implemented a series of card and card promotion animations in isolation. I am now at the point of merging these into a single prototype. I am working behind a colleague who put together a separate prototype using Isotope that supports card shuffling even with cards "growing" to different states. I am unifying both internal efforts. Before I engage on GSAPifying Isotope, I would like to know if there is an existing or similar implementation that I can leverage.
Thanks in advance for your time!
Chris
For anyone still googling this, a quick solution to have gsap render the isotope animations is using the jquery-gsap-plugin that can be downloaded at their website. It needs to be added after all the other libraries, for example:
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.gsap.min.js"></script>
What this does is override all the jQuery.animate() methods - which is awesome. There are some exceptions however that are listed on the website as well.
Now the only thing that is left to do is tell isotope to use jQuery as the animation engine, details can be found in the documentation.
$('#grid').isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
//etc
animationEngine: 'jquery'
});
And viola! The only caveat here that jQuery is required, so for anyone using pure vanilla or whatever will have to override the animations manually - how that's done is a whole other topic.
Related
I found this card component example on the internet and would like to build something similar with Vuetify. I'd like to know what is the best/easiest way to approach this? Using default v-card and add custom elements/css inside.Or building the whole card with Vuetify gid?
You can recreate something similar with an outlined v-card with only a v-card-text child. The top section looks like an outlined v-alert with left border. Use v-row and v-col (col-auto on all) grid inside, with v-spacer for the whitespace after first column. Bottom section will also have the grid. You could also put the v-alert inside v-card-title for similar effect but I don't think the banner alert is appropriate as a "card title".
Vuetify is a Vue UI library that provides ready-to-use components saving the developer time. So if the components Vuetify makes available to you are fine out of the box, you're fine, otherwise there's nothing wrong with adding custom CSS. In reference to the screenshot you attached, vuetify allows you to make that card in a practically identical way. In addition to studying the functioning of the basic components, I recommend that you take a look at the ready-made CSS classes that Vuetify provides you. Thanks to those you can do a lot of things. I hope I was helpful.
I'm wondering how to replicate the functionality of the draggable column/row dividers such as found at http://jsfiddle.net/.
Is this built on top of some library?
Thanks!
The draggable dividers in the jsfiddle site are implemented using the code in jsfiddle.net/js/LayoutCM.js and jsfiddle.net/codemirror/js/codemirror.js.
Note: The new code change in SO makes it really finiciky to directly link to the jsfiddle implementation in order to explain how they implemented something.
Other relevant StackOverflow questions include
Resize elements by dragging divider handler
Draggable div without jquery ui
What is a lightweight script jquery extension that implements a draggable divide ?
The is functionality is provided various projects including jquery plugins and other javascript scripts
jquery-divider
jquery-splitter
splitplane
jqueryui Resizable (used as component to implement)
jqueryui Draggable(used as component to implement)
mootools splitter
yui resize (used as component to implement)
jquery split plane
Also see other resources including
An example jquery splitplane implementation
The example splitplane in Google's closure library
split plane control in yui example
Most people seem to use an existing jquery plugin or make their own implementation using the Draggable and Resizable components, for example code see the other StackOverflow posts mentioned.
We're actually planning a really complex web application. At least for my own standards.
In the past we have always been using a combination of a server side MVC Framework (Codeigniter) and client side functionality (jQuery and plugins). We have simply written inline javascript code in our views. This worked as expected, but of course with several disadvantages:
no caching
duplicated js code
maintainability issues
...
My main goal now is to organize the client side code in an efficient and easily maintainable way. But I want to stay with the server side MVC because of the existing know how and some existing interfaces. Furthermore I want to reduce complex DOM manipulation with jQuery and "spaghetti code".
Now I thought about a combination of Backbone.js and Require.js but I really can't find a tutorial or any solid description about how to combine them with a server side MVC.
Is it even recommended?
In my old apps I got a file structure like this:
application (CodeIgniter)
assets
js
css
imgs
Are there any ideas or best practices?
Thank you!
To add to mexique1's advice, it might be worth looking at the backbone-boilerplate project. It should provide you best-practice solutions for many of the problems you're currently considering, such as the combination of require and backbone, the organisation of the client-side of your project, and the reduction of complex DOM manipulation (see templating).
The challenge, as you anticipate, will most likely be in combining the boilerplate approach with the approach you're used to. However, it will almost certainly be worth the effort since it should provide you a solid foundation for this and future projects.
I think Backbone is a good choice, and Require is not mandatory here.
Require will just help you organize your source code and maybe improve performance. I think you can start right away with Backbone, which will be the thing you are going to use most, and add Require later.
Regarding Backbone, yes it's easy to use to use its Model with an existing MVC application, provided it returns JSON. To load your existing data you will want to use the fetch method combined to url to adapt to your existing code, or your own method.
Generally, think about which models are displayed in which views. Backbone helps you think this way : I'm displaying Models represented as JSON data in Views which are made by HTML.
Also, for the view layer, it's very easy to reuse your existing HTML, because views are not tied to anything, no JavaScript templating or nothing.
Simple example :
<div id="user">
<span class="name">John</span>
</div>
var UserView = Backbone.View.extend({
render: function() {
this.$el('.name').html(this.model.get('name'));
}
});
var userView = new UserView({el: $('#user')[0], model: ...});
In this example the #user div reflects the state of a User model, with its name.
Also check the Todo App example in Backbone.
I am designing a single page website and want the fixed nav links to change colour whenever the user scrolls to the specified location. Seems pretty easy to do, I thought it was pretty easy to do, but I am having problems making it work.
I only downloaded the Scrollspy JS Plugin, as I am not using the Twitter Bootstrap CSS. I just require the Scrollspy Plugin.
Could you check this jsFiddle and provide some guidance? I have already checked out the documentation here, but I've had no luck. Any help is greatly appreciated :)
http://jsfiddle.net/xjTpk/28/
Ignoring the serious issues with your use of JSFiddle1, and the typographic errors2, the principle things wrong are
You need the .nav class on the <ul> in the navbar, and
The #welcome is not an existing element, causing a JS error.
Here's a fixed demo:
JSFiddle
Oh, and you don't need both data-api and js to initialize the plugin; choose one.
1 Loading Bootstrap 2.0.2 + 2.0.4 at the same time; trying to include a <body> in the html panel
2 Using upperCamelCase on a function that doesn't need it: scrollSpy();
Key thing you are missing is you have to have a "nav" class on the ul element (or some other parent element) as that is used in the scrollspy code as part of a selector.
I couldn't get yours to work for some reason but here is a simplified example:
http://jsfiddle.net/UWzeD/5/
Your ul needs a nav class, but most important for scrollspy to work properly is that your target needs to be one level about the ul. Otherwise I've found that scrollspy doesn't work.
Currently, my anythingslider has too many slides to fit in the wrapper without wrapping some elements below the others. This should make sense to users of this plugin. I'd like to show/hide some of the invisible elements as the back/forward buttons are clicked. My problem so far is that the plugin is looking for elements that have been hidden after it's been initialized.
Is there a way to re-initialize the plugin so all slides are up-to-date on the fly?
I really hope this makes some sense!
Thanks.
This functionality was added in AnythingSlider version 1.5... there have been a few updates since ;)
Calling anythingSlider(); will re initialize the the slider. No need to specify the options. Just call $("#element").anythingSlider();