{"id":2736,"date":"2013-01-25T03:45:08","date_gmt":"2013-01-25T09:45:08","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2736"},"modified":"2013-01-25T04:12:26","modified_gmt":"2013-01-25T10:12:26","slug":"screenfade-a-new-jquery-plugin","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/01\/25\/screenfade-a-new-jquery-plugin\/","title":{"rendered":"screenfade<\/code>, a New jQuery Plugin"},"content":{"rendered":"

tl;dr: use $.screenfade(callback)<\/code> to gently fade the screen to white, have the callback<\/code> make changes, then fade the screen back in.<\/p>\r\n

Download the code<\/a>.<\/p>

See the demo<\/a>.<\/p>\r\n

I like WordPress's full screen editor mode<\/a> for distraction-free editing, and I especially liked how gradually it fades the full screen in and out. Making a text box fill the screen width is straightforward as long as you remember to set the box-sizing<\/code><\/a> as follows: textarea { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box;}<\/code>. There's no way to make the box fill the available screen height, though, with CSS alone and we have to resort to Javascript:<\/p>\r\n

\tvar defaultHeight = $('#editor').height();\r\n$(window).on('resize', function(){\r\n\tvar restHeight = $('body').outerHeight(true)-$('#editor').height();\r\n\t$('#editor').height(Math.max($(window).height()-restHeight, editorHeight));\r\n});<\/code><\/pre>\r\n
And then use CSS to remove the distractions:<\/p>\r\n
body.fullscreen head, body.fullscreen footer, body.fullscreen nav {display: none}\r\nbody.fullscreen article {width: 100%; margin: 0; background: white}<\/code><\/pre>\r\n
And use $('body').toggleClass('fullscreen'); $(window).trigger('resize')<\/code> to switch between full screen and full distractions modes.<\/p>\r\n
But the other thing WordPress does is make the transition gradual, fading out the screen then fading the new mode back in, which I find much more pleasant. I initially used CSS3 transitions<\/a>, which work wonderfully for the CSS changes but we need to trigger the Javascript as well. There is a transitionend<\/code> event that we could bind to, but that would mean having the height adjust after<\/em> the other transitions. I didn't like that.<\/p>\r\n
Then I tried fadeOut<\/code><\/a> of the entire body<\/code> then fading back in, but jQuery adds a display: none<\/code> at the end of fading out via opacity<\/code>, so that ended up being too jerky. $('body').animate{opacity: 0}<\/code> was smooth enough, but left the body background color in place, which then changed abruptly to the new color. $('html').animate{opacity: 0}<\/code> worked beautifully, almost.<\/p>\r\n
There's a weird Chrome bug (seems to be http:\/\/code.google.com\/p\/chromium\/issues\/detail?id=131588<\/a> but they claim to have fixed it) where the scroll bars lose their alpha-channel when the opacity is less than 1, so they turn black<\/em> rather than transparent. Ugly (demo page<\/a>).<\/p>\r\n
So I decided instead of fading out<\/em> the real elements, I'd fade in<\/em> a covering element, make my changes, then fade the cover out.<\/p>\r\n
The plugin is called as $.screenfade(callback, [options])<\/code> where callback<\/code> is a function to be called after the fadeout and before the fadein, and options<\/code> is a bit of a hack: it is passed both as the CSS<\/a> of the covering element, and as the options object for the animation<\/a>. Since the two do not have overlapping parameters, it should work. Thus\r\n$.screenfade(callback, {background: black, duration: 2000 })<\/code> will fade the screen to black over 2 seconds, execute the callback, then fade back to normal over two seconds.<\/p>","protected":false},"excerpt":{"rendered":"tl;dr: use $.screenfade(callback) to gently fade the screen to white, have the callback make changes, then fade the screen back in. Download the code.See the demo. I like WordPress's full screen editor mode for distraction-free editing, and I especially liked how gradually it fades the full screen in and out. Making a text box fill […]","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\/2736"}],"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=2736"}],"version-history":[{"count":8,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2736\/revisions"}],"predecessor-version":[{"id":2743,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2736\/revisions\/2743"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}