{"id":545,"date":"2018-08-21T06:13:47","date_gmt":"2018-08-21T13:13:47","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=3290"},"modified":"2018-08-21T06:13:47","modified_gmt":"2018-08-21T13:13:47","slug":"easy-i-ching-symbols","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=545","title":{"rendered":"Easy i-ching Symbols"},"content":{"rendered":"<p>I have so many little snippets like this laying around, at first I didn&#8217;t remember writing this when I found it the other day&#8230; then it slowly came back to me.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/mtcanvas.com\/z\/iching.html\" border=\"0\" width=\"100%\" height=\"400\"><\/iframe><\/p>\n<p>Looks like this is another one from the jQuery days:<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <title><\/title>\r\n    <script src=\"http:\/\/code.jquery.com\/jquery-latest.min.js\"><\/script>\r\n    <script>\r\n      $(function(){\r\n        \r\n        \/\/ meaning: http:\/\/www.ichingfortune.com\/hexagrams.php\r\n        \/\/ starting hex: \u4dc0\r\n        \r\n        var flash = $('.flash'),\r\n            syms = $('.syms'),\r\n            num = $('.num'),\r\n            start = 0x4DC0,\r\n            total = 64,\r\n            tick = 0;\r\n        \r\n        for (var i = 0; i < total; i++) {\r\n          $('<div>', {\r\n            html: '&#x' + (start + i).toString(16)\r\n          }).appendTo(syms);\r\n        }\r\n        \r\n        flash.html(syms.html());\r\n        flash.find('div').hide().first().show();\r\n        \r\n        setInterval(function() {\r\n          var index = tick % total,\r\n              curr = flash.children().eq(index)\r\n              .show()\r\n              .siblings().hide();\r\n          \r\n          curr = syms.children().eq(index)\r\n            .css('color', 'red')\r\n            .siblings().css('color', 'black');\r\n          \r\n          num.text(index + 1);\r\n          tick++;\r\n        }, 600);\r\n        \r\n      });\r\n    <\/script>\r\n    <style>\r\n      * {\r\n        font-family: \"Helvetica Neue\", Helvetica, sans-serif;  \r\n      }\r\n      \r\n      .syms div {\r\n        position: relative;\r\n        float: left;  \r\n        font-size: 3em;\r\n        -webkit-transition: color 300ms ease-out;\r\n        -ms-transition: color 300ms ease-out;\r\n        -o-transition: color 300ms ease-out;\r\n        transition: color 300ms ease-out;\r\n      }\r\n      \r\n      .flash {\r\n        position: relative;\r\n        height: 6em;  \r\n      }\r\n      \r\n      .flash div {\r\n        position: absolute;\r\n        left: 0; top: 0;\r\n        font-size: 6em;\r\n        color: red;\r\n        -webkit-transform: rotate(90deg);\r\n        -ms-transform: rotate(90deg);\r\n        -o-transform: rotate(90deg);\r\n        transform: rotate(90deg);\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <h2>i ching : <span class=\"num\">1<\/span><\/h2>\r\n    <div class=\"flash\"><\/div>\r\n    <div class=\"syms\"><\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n<p>The i-ching is a Chinese  divinatory system &#8211; the &#8220;hexagrams&#8221; just look very cool, when I noticed they were available starting at `0x4DC0` I made this snippet&#8230;  think ancient magic 8 ball.<\/p>\n<p>wikipedia article:<br \/>\n<a href=\"https:\/\/en.wikipedia.org\/wiki\/I_Ching\" target=\"blank\">https:\/\/en.wikipedia.org\/wiki\/I_Ching<\/a><\/p>\n<p>It&#8217;s pretty fun to play with this online version:<br \/>\n<a href=\"https:\/\/www.eclecticenergies.com\/iching\/virtualcoins\" target=\"blank\">https:\/\/www.eclecticenergies.com\/iching\/virtualcoins<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have so many little snippets like this laying around, at first I didn&#8217;t remember writing this when I found it the other day&#8230; then it slowly came back to me. Looks like this is another one from the jQuery days: i ching : 1 The i-ching is a Chinese divinatory system &#8211; the &#8220;hexagrams&#8221; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[134,145],"class_list":["post-545","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-javascript","tag-misc"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=545"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/545\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}