This release makes the html attributes a lot more flexible. In addition to a few API updates and performance improvements, I’ve, worked with the contributors and created an all around better system for interacting with contexts and axes. What I noticed was that users were making a lot of specifications in html that look like this:
This is unfortunate, but until now there was no way around it. The better way is to specify that an element should respond on a particular axis. For example:
The above specification applies a class of the name of the current context to the element. That means in portrait mode the element looks like:
and in landscape mode:
With these new changes to Intention.js, Context.js has been given an overhaul as well. Now all of the axes have names and can be taken advantage of using the method outlined above. Here’s the breakdown of the axes in Context.js:
- width
- mobile
- tablet
- standard
- orientation
- portrait
- landscape
- touch (only one context with same name)
- highres (only one context with same name)
To accomplish this a few changes have been made to the way axes are made.
Consider the following:
The above example is an axis that is designed to respond on the window scroll event. The most obvious use for this is sticking components at specific scroll depths.
Previously intent.responsive returned a function, now that function is a property of the object returned. This way all of the information about the axis is accessible by the implementor of the library at any time.
Now I will attach the respond function to the window scroll event using jquery,call the same function to set the initial state of the axis and add a responsive element to intent.
Assuming this exists in the DOM:
A class of either “shallow,” “deep,” or “reallyDeep” will be added to that element depending on the current scroll depth!
Enjoy!
Important Notes
This post was updated on September 9, 2013 to reflect a change in syntax. The appropriate syntax for axis-based Intentional attributes is now intent in-axisID:
. A previous version of this post stated the syntax was intent in-axisID
.