Ignition has a really javascript ability called moveto. It allows you to move an element on the page from one place to another when the size of the screen reaches a specific width.
This is a powerful event and is used by default on the menu which gets moved from the .site-top container to the .panel-left container when the site goes mobile. It is also used by the sidebar, (if there is one) and it moves that into panel right.
You can create your own moveto elements using the special data attribute “data-moveto”. Just create an element and add the attribute data-moveto and give it a value of the CSS selector where you want it to move to. It’s that simple!! Let’s give it a try:
<button class="button" data-moveto=".movetospot-1">Teleport Me!</button>The button above will appear below when you resize your browser.
There are other attributes you can use to help you a bit more in refining when and in what position your element should move. Here are the attributes:
data-moveto
This is the main one and must exist. It’s value should be a CSS selector.
data-moveat
Specify when the item should move. By default the item will move when the screen hits 1030 pixels. You can have a value that is an integer or you can pass a CSS variable like so: data-moveat=”–var”. Make sure the variable is an integer. This is all dynamic so if you change the CSS var, the item wont move until it reaches that value.
data-moveto-pos
You might want to move your item but prepend it, or append it to the other area. You can choose a position to move it to with a number. The higher the number the lower down it will move.
data-movefrom-pos
This does the same as above except in reverse. When the item comes back, it may need to come back as the third item. This allows you to move it to the right starting position after it’s been moved out already.
data-movefrom
You will probably never need to use this, as it is supplied for you automatically. This tells the item where to move back to.
The main menu Example
I think the best example is one that is actually working on every ignition site, which is the main menu. The main menu moves from the top into the panel-left. it uses all the attributes. Check it out.
