Flowtime.js is a JavaScript framework to easily build HTML presentations. Animations are managed using native and accelerated CSS3 transitions.
It also provides a nice fragment navigation and overview of all slides.
It works on all modern browsers and mobile browsers, with full swipe functionality.
jQuery-Watch is a nice little plugin that monitors CSS, Attribute or Property changes in an element.
It uses the MutationObserver internally for modern browsers and uses setInterval() polling as a fallback for older browsers.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var element = document.getElementById("Notebox"); var observer = new MutationObserver(observerChanges); observer.observe(element, { attributes: true, subtree: opt.watchChildren, childList: opt.watchChildren, characterData: true }); /// when you're done observing observer.disconnect(); function observerChanges(mutationRecord, mutationObserver) { console.log(mutationRecord); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#btnChangeContent").click(function () { // assign text programmatically $("#SomeContent").text("Hello - time is " + new Date()); }); // watch the content $("#SomeContent").watch({ properties: "prop_innerHTML", watchChildren: true, callback: function (data, i) { console.log("text changed"); alert('text changed' + data.vals[i]); } }); |
When mapping shortcodes using vc_map, you can assign icons to your new Visual Composer element.
If you created a container element, that wraps around other elements, the child element icon will currently be overwritten with the parent icon. A fix is apparently on its way :)
Currently the only way is to skip the icon option completely and use pure CSS for that.
You can enqueue a CSSs file for the admin through a vc_map option “admin_enqueue_css“.
|
1 2 3 4 5 6 7 8 9 10 |
.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i, #vc_your_element i.vc_element-icon { background-position: 0 0; background-image: url(/path_to_images/vc_your_element.png)!important; -webkit-background-size: contain; -moz-background-size: contain; -ms-background-size: contain; -o-background-size: contain; background-size: contain; } |
The CSS targets the icon of the displayed element in the editor and the icon when adding new elements to the layout.
This video should give you a good idea what the addon can actually do.
In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:
The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.
Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.
Regards
Alexander
“CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.”
There is also ACE, but on Chrome CodeMirror behaves far more stable for me.
Update: Video Preview
I am still busy finalizing the Fullpage.js Addon for Visual Composer. Hope to have some more images or even a video next week :)
Some requirements for the Visual Composer Addon:
The Addon will ease Fullpage.js integration immensely, but for a more advanced integration some CSS / JavaScript knowledge will always be needed. Do checkout the main Fullpage.js documentation for more information.
Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.
Many developers hesitate to call WordPress a PHP development platform. I know what I am talking about, as I developed a platform of my own. PHP platforms normally only provide a skeleton and we need to
With WordPress you get most of this out-of-the-box, with some predefined structures.
Having a flexible administration backend in place makes it easy to concentrate on the things that matter for a project, which is designing a frontend experience.
And especially with the JSON REST API finding its way into the core slowly, you are completely free when it comes to using the stored data in your frontend designs.
Sure that was possible before, just with some more work on our side ;)
But WordPress embracing the “freeing of data” through JSON, shows us where the ride is going.
There has not been a single project of mine in the past year, that has not used the REST API in some way. And all of this fits perfectly into the new single page app universe.
WordPress interfaces with your javascript framework setup (client side templating, DOM manipulation, data binding, routing …) and frees you from any design handcuffs.
It has become much easier and faster over the past 2 years to say “YES” to many of my clients wishes.
Its nice to finally see data flow from the server to the client and back that easily.
If you are not exited about this … I am :)
How do I choose the right JavaScript framework for my next single-page application project?
A question I have asked myself over and over again.
There are countless options these days, that claim to be the ultimate solution to all our developments needs.
I have build applications with
I have looked at
And I seem to be evaluating new options every week :)
The only answer I can give you is that :
In the end its a matter of personal taste and project requirements. We only have limited resources to finish a project and find solutions to unsolved problems in a timely fashion (yes this always happens). Go out and play :) Also take a look at TodoMVC, which might help you to decide. No guarantees !
Over the past few month I have evaluated all the things that I used in the past. I started stripping it all down to a bare set of essentials, that have been following me for a long time. There are solutions that just fit and require no replacement.
So my answer for the perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony.
Like a painter I want to choose my own brushes and color mixture. Programming is an art that needs freedom. A freedom that can often be limited by a too strictly defined framework. Structure is important, but it should never dictate the options you have to fulfill your project goals and limit you.
I will be covering some of those tools here in coming articles.
I will talk about:
“Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.”
<%=foo%> or {{foo}} assignmentsAnother simple templating solution, that can speed up simple project tasks.
“jQuery Template is a plugin that makes using templates easy and quick. The plugin supports loading HTML files as templates, or taking a jQuery object as the template (usually using script tags to hold the template).”
Features
This is a nice and simple solution, with an easy learning curve ;) If you need more or would like to try other solutions, check the Template-Engine-Chooser :)