{"id":631,"date":"2009-05-07T09:35:53","date_gmt":"2009-05-07T15:35:53","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=631"},"modified":"2015-02-25T12:49:29","modified_gmt":"2015-02-25T18:49:29","slug":"flexcal-slot-machine","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/05\/07\/flexcal-slot-machine\/","title":{"rendered":"<code>flexcal<\/code> Slot Machine"},"content":{"rendered":"<p>Modified 2009-05-19 to use a simpler technique to make it inline.<\/p>\r\n<p>OK, one more <a href=\"\/blog\/2009\/04\/03\/new-jquery-widget-flexcal\/\"><code>flexcal<\/code><\/a> transition, inspired by Stefan Petre's <a href=\"http:\/\/www.eyecon.ro\/slotmachine\/\">jQuery slot machine<\/a>. I should have been balancing my checkbook, but my kids thought this was cooler.<\/p>\r\n<script src=\"\/inc\/jquery.ui.subclass.js\"><\/script>\r\n<script src=\"\/inc\/jquery.textpopup.js\"><\/script>\r\n<script src=\"\/inc\/jquery.flexcal.js\"><\/script>\r\n<script>\r\n  $('<link rel=stylesheet href=\"\/inc\/flexcal.css\" \/>').appendTo('head');\r\n<\/script>\r\n<div style=\"width: 100%\" id=\"slots\"><\/div>\r\n<pre style=\"height: 20em\"><code class=\"language-javascript demo\">\r\n$('#slots').flexcal({\r\n\ttransition: function(o){ \r\n\t\tvar pane = o.elements.eq(1-o.currSlide), origTable = pane.find('table');\r\n\t\to.elements.eq(o.currSlide).css({zIndex: 1}).animate({top: -o.$cont.height()}, 'normal', 'easeInBack');\r\n\t\tpane.css({top: o.$cont.height(), zIndex: 2}).show().animate({top: 0}, 'normal', 'easeInBack', function(){\r\n\t\t\t\/\/ make two identical tables without headers and position them correctly (lined up with the bottom)\r\n\t\t\tvar spinners = tableSpinners (origTable, o.gif);\r\n\t\t\tvar tables = origTable.clone().add(origTable.clone()).appendTo(pane).\r\n\t\t\t\tfind('caption').remove().end().\r\n\t\t\t\tcss({bottom: 0 , marginBottom: 0, zIndex: 101}).hide();\r\n\t\t\tfunction dropOne(){\r\n\t\t\t\tif (spinners.length == 0){\r\n\t\t\t\t\ttables.remove();\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tvar spinner = spinners.eq(Math.floor(Math.random()*spinners.length));\r\n\t\t\t\tvar h = spinner.height();\r\n\t\t\t\tvar left = spinner.offset().left - origTable.offset().left;\r\n\t\t\t\tvar right = left + spinner.width();\r\n\t\t\t\tspinners = spinners.not(spinner.remove());\r\n\t\t\t\torigTable.animate({foo: 0}, { \/\/ the {foo:0} seems necessary because we need to animate some property, even if it isn't real\r\n\t\t\t\t\tduration: o.duration,\r\n\t\t\t\t\teasing: 'easeOutElastic',\r\n\t\t\t\t\tstep: function(now, fx){\r\n\t\t\t\t\t\tif (fx.state == 0){\r\n\t\t\t\t\t\t\ttables.show();\r\n\t\t\t\t\t\t\tfx.start = now = 0; \r\n\t\t\t\t\t\t\tfx.end = 3*h; \r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\ttables.eq(0).css(offsetColumn(right, left, h, now));\r\n\t\t\t\t\t\ttables.eq(1).css(offsetColumn(right, left, h, now-h));\r\n\t\t\t\t\t},\r\n\t\t\t\t\tcomplete: dropOne\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\tsetTimeout (dropOne, o.duration);\r\n\t\t})\r\n\t}, \r\n\tposition: {at: 'top', my: 'top'},\r\n\tspeed: 0,\r\n\thideOnOutsideClick: false,\r\n\ttransitionOptions: {\r\n\t\tduration: 1500,\r\n\t\tgif: '\/images\/ani-bw.gif'\r\n\t},\r\n\t\/\/ make room for the inline calendar\r\n\tshown: function() { $('#slots').height($('#slots').flexcal('box').height()); }\r\n});\r\n$('#slots').flexcal('around', 'commit', function(d){\r\n\tthis.d = d;\r\n\tthis.box().find('td a').removeClass('ui-state-active');\r\n\tthis.box().find('td a[rel=\"'+$.ui.flexcal.date2string(d)+'\"]').addClass('ui-state-active');\r\n\tthis.element.val(this.format(d));\r\n\tthis._trigger('commit', 0, d);\r\n});\r\n$('#slots').flexcal('show');\r\n\r\nfunction tableSpinners(t, gif){\r\n\tvar topRow = t.find('tr:first td, tr:first th'), botRow = t.find('tr:last td'), ret = [];\r\n\tfor(var i = 0; i &lt; topRow.length; ++i){\r\n\t\tvar topCell = topRow.eq(i), botCell = botRow.eq(i);\r\n\t\tret.push($('&lt;img&gt;').appendTo('body').css(topCell.offset()).\r\n\t\t\tcss({\r\n\t\t\t\tpaddingTop: '2px',\r\n\t\t\t\tpaddingBottom: '2px',\r\n\t\t\t\tposition: 'absolute', \r\n\t\t\t\twidth: botCell.outerWidth(true), \r\n\t\t\t\t\/\/ hack to avoid Firefox table height bug\r\n\t\t\t\theight: t.find('tbody').height()+t.find('thead').height(),\r\n\t\t\t\tzIndex: 101\r\n\t\t\t}).\r\n\t\t\tattr('src', gif)[0]);\r\n\t}\r\n\treturn $(ret);\r\n}\r\n\r\n\/\/ create a css object with bottom = b and clip set to rect(0 r h l) pixels, with\r\n\/\/ the top and bottom of that rect offset by b so the clip rect is fixed on the screen\r\n\/\/ and offsetting b if it is out of the range -h..h\r\nfunction offsetColumn (r, l, h, b){\r\n\tb = b%(2*h)-h; \/\/ move b into range\r\n\treturn {bottom: b, clip: ['rect(',b,'px ',r,'px ',b+h,'px ',l,'px)'].join('')};\r\n}\r\n<\/code><\/pre>\r\n<p>The code also shows how to make the datepicker \"inline\".<\/p>","protected":false},"excerpt":{"rendered":"Modified 2009-05-19 to use a simpler technique to make it inline. OK, one more flexcal transition, inspired by Stefan Petre's jQuery slot machine. I should have been balancing my checkbook, but my kids thought this was cooler. $('#slots').flexcal({ transition: function(o){ var pane = o.elements.eq(1-o.currSlide), origTable = pane.find('table'); o.elements.eq(o.currSlide).css({zIndex: 1}).animate({top: -o.$cont.height()}, 'normal', 'easeInBack'); pane.css({top: o.$cont.height(), zIndex: [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/631"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=631"}],"version-history":[{"count":96,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/631\/revisions"}],"predecessor-version":[{"id":3522,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/631\/revisions\/3522"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}