Move, rotate and resize an element or class of elements.
Elements can be transformed both visually and interactively on the front end or in workflows on the back end.
Features:
Move a element visually:
Resize an element visually:
Rotate and element visually:
Move, rotate and resize the same elements in the back-end workflows. Keeping sync between both front-end and back-end transformations.
Lock the aspect ratio for resizing.
Restrict the transformations to a bounding container.
Set the color of the controls box.
Set snap distance for move, resize
Set angle resolution for rotation
Limitations:
Restrict and aspect ratio only work for visual transformation. Back-end actions will not be restricted.
Gotchas:
Remember the hash or dot for class and ID field.
The restrict field should be an element ID. Remember to include the has e.g. #myBox
The plugin back-end actions are standalone and should be used only for simple transformations when you don’t wan the visual element.
We are actively monitoring this thread. If you have an questions, bug reports, feature request, please let us know. We aim for a 24hr response time during the working week.
Make sure that you have activated the Expose Element ID option in Settings=>General
For a visual element.
3.1) Drag the visual transformation element onto your page.
3.2) Set its visibility to off.
3.3) Add the class or element id into the class field. Classes need a dot (.img) and IDs need a hash (#myImg).
3.4) Make sure your element has the same class/ID. Using classify you would put “myImg{addClass:” img"}" in the ID Attribute field to add the ID myImg and class img to your element. See the classify docs for details.
3.5) Complete the other option fields on the Visual Transform element as needed.
3.6) Add a workflow to make the Visual Transform Element visible once the page is loaded.
3.7) Load your page and play!
Back-end Workflows
4.1) For back-end workflows to work, you need to make sure you have a visual transform element on your page an visible.
4.2) Click Add Action => Element Actions => Move / Rotate / Resize a Visual Transform
4.3) Complete fields as required
4.4) Fire action
Additionally there are standalone back-end actions. Be warned these don’t play nice with elements that are also being used by the visual component. Use the element back-end actions for these.
5.1) Click Add Action => Plugins => Move & Rotate or Resize
5.2) Fill out fields as needed.
5.3) Fire actions.
Hello, this is awesome! I have a question however. Would this work for mobile apps as well? I was originally using the JQuery bubble drag and drop plugin but it just randomly stopped working about two days ago, not sure why. So if this could work for mobile apps, it would be fantastic!
There have been some minor updates. The font size now can be set to change with resize of the element, there has been some backend refactoring and states are handled better. An aspect ratio and dot size change are on the roadmap but not due for a couple weeks.
In our testing the plugin does work in the new engine. Please can you give me a bit more detail as to what is happening and I will try and resolve your issue. Thanks.
I got it almost working. But how do i set the start size height and width of 100px and that it is still scaleable bigger and smaller. Now i set an max-width:100px en max-height:100px and then it start at 100px but it can only be smaller, not bigger than 100px. If i use widht:100px and height:100px then it stays 100px; and when i use min-widht/height then it cannot be smaller.
@tech13 Hi, I’ve just purchased the plugin and I love it!
I’d also like to draw your attention to a tiny bug I’ve noticed: when the element controls for resizing and moving are visible and the element being manipulated gets hidden (e.g. the user clicks the X button to dismiss a floating group element), the element controls remain behind and the user then has to manually click somewhere else on the page so the controls would disappear as well. Any chance of fixing that in the next release?
Let’s say the element that’s set up to be moved and resized using the plugin is hidden at the moment. If the user clicks and drags anywhere on the web page, the normal text selection behavior is all gone and is now replaced by some sort of a selection rectangle being drawn by the user. Additionally, drawing that selection rectangle can also select the resizing/moving element controls for the hidden element, even though the element itself is still not visible. (I think it’s the same issue I pointed out above, with the controls being shown for hidden elements.)
Hi, I’m looking for a plugin that will automatically set the font size dynamically based on the size of the editor/group that the text is fitting in, so it doesnt overflow the allotted space. Is it possible with this plugin? Thanks,
Features:
