{"id":545,"date":"2019-02-07T21:31:14","date_gmt":"2019-02-07T21:31:14","guid":{"rendered":"https:\/\/ignition.press\/?post_type=documentation&p=545"},"modified":"2019-02-07T21:52:20","modified_gmt":"2019-02-07T21:52:20","slug":"moveto-event","status":"publish","type":"documentation","link":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/","title":{"rendered":"MoveTo Event"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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:<\/p>\n\n\n\n

<button class=\"button\" data-moveto=\".movetospot-1\">Teleport Me!<\/button><\/code><\/pre>\n\n\n\n
The button above will appear below when you resize your browser.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
data-moveto<\/h3>\n\n\n\n
This is the main one and must exist. It’s value should be a CSS selector. <\/p>\n\n\n\n
data-moveat<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
data-moveto-pos<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
data-movefrom-pos<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
data-movefrom<\/h3>\n\n\n\n
You will probably never need to use this, as it is supplied for you automatically. This tells the item where to move back to.<\/p>\n\n\n\n
The main menu Example<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"featured_media":0,"parent":504,"menu_order":2,"template":"","class_list":["post-545","documentation","type-documentation","status-publish","hentry"],"acf":[],"yoast_head":"\nMoveTo Event - ignition<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MoveTo Event - ignition\" \/>\n<meta property=\"og:description\" content=\"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…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/\" \/>\n<meta property=\"og:site_name\" content=\"ignition\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-07T21:52:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/\",\"url\":\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/\",\"name\":\"MoveTo Event - ignition\",\"isPartOf\":{\"@id\":\"https:\/\/ignition.press\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png\",\"datePublished\":\"2019-02-07T21:31:14+00:00\",\"dateModified\":\"2019-02-07T21:52:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#primaryimage\",\"url\":\"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png\",\"contentUrl\":\"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png\",\"width\":1090,\"height\":524},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ignition.press\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/ignition.press\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Javascript\",\"item\":\"https:\/\/ignition.press\/documentation\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"MoveTo Event\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ignition.press\/#website\",\"url\":\"https:\/\/ignition.press\/\",\"name\":\"ignition\",\"description\":\"The Starter theme that Could\",\"publisher\":{\"@id\":\"https:\/\/ignition.press\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ignition.press\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ignition.press\/#organization\",\"name\":\"ignition\",\"url\":\"https:\/\/ignition.press\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ignition.press\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ignition.press\/wp-content\/uploads\/2018\/07\/logo.svg\",\"contentUrl\":\"https:\/\/ignition.press\/wp-content\/uploads\/2018\/07\/logo.svg\",\"caption\":\"ignition\"},\"image\":{\"@id\":\"https:\/\/ignition.press\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MoveTo Event - ignition","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/","og_locale":"en_US","og_type":"article","og_title":"MoveTo Event - ignition","og_description":"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…","og_url":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/","og_site_name":"ignition","article_modified_time":"2019-02-07T21:52:20+00:00","og_image":[{"url":"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/","url":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/","name":"MoveTo Event - ignition","isPartOf":{"@id":"https:\/\/ignition.press\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#primaryimage"},"image":{"@id":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#primaryimage"},"thumbnailUrl":"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png","datePublished":"2019-02-07T21:31:14+00:00","dateModified":"2019-02-07T21:52:20+00:00","breadcrumb":{"@id":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#primaryimage","url":"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png","contentUrl":"https:\/\/ignition.press\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-07-16.48.24.png","width":1090,"height":524},{"@type":"BreadcrumbList","@id":"https:\/\/ignition.press\/documentation\/javascript\/moveto-event\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ignition.press\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/ignition.press\/documentation\/"},{"@type":"ListItem","position":3,"name":"Javascript","item":"https:\/\/ignition.press\/documentation\/javascript\/"},{"@type":"ListItem","position":4,"name":"MoveTo Event"}]},{"@type":"WebSite","@id":"https:\/\/ignition.press\/#website","url":"https:\/\/ignition.press\/","name":"ignition","description":"The Starter theme that Could","publisher":{"@id":"https:\/\/ignition.press\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ignition.press\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ignition.press\/#organization","name":"ignition","url":"https:\/\/ignition.press\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ignition.press\/#\/schema\/logo\/image\/","url":"https:\/\/ignition.press\/wp-content\/uploads\/2018\/07\/logo.svg","contentUrl":"https:\/\/ignition.press\/wp-content\/uploads\/2018\/07\/logo.svg","caption":"ignition"},"image":{"@id":"https:\/\/ignition.press\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/ignition.press\/wp-json\/wp\/v2\/documentation\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ignition.press\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/ignition.press\/wp-json\/wp\/v2\/types\/documentation"}],"up":[{"embeddable":true,"href":"https:\/\/ignition.press\/wp-json\/wp\/v2\/documentation\/504"}],"wp:attachment":[{"href":"https:\/\/ignition.press\/wp-json\/wp\/v2\/media?parent=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}