All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| #emptyDiv:after { | |
| content: 'alert("you gotta be kidding me")'; | |
| } |
| <script language="javascript"> | |
| // set viewport to zoom to 1200px wide on viewports > 640px wide | |
| var viewPortTag = document.createElement('meta'); | |
| viewPortTag.id = 'viewport'; | |
| viewPortTag.name = 'viewport'; | |
| if (screen.width > 640) { | |
| viewPortTag.content = 'width=1200'; | |
| } else { | |
| viewPortTag.content = 'width=device-width'; | |
| } |
| /** | |
| * Plugin function to insert spans into text: | |
| * usage | |
| * $(document).ready(function() { | |
| * $('p.charcount').charSpanCount(); }); | |
| * or $(document).ready(function() { | |
| * $('p.charcount').charSpanCount({'charcount' : 15}); | |
| * }); | |
| */ | |
| (function($) { |
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| <title>Ring Pulsers</title> | |
| <style type="text/css" media="screen"> | |
| .marker { | |
| left: 150px; | |
| height: 100px; | |
| position: absolute; |
| var parser = document.createElement('a'); | |
| parser.href = "http://example.com:3000/pathname/?search=test#hash"; | |
| parser.protocol; // => "http:" | |
| parser.hostname; // => "example.com" | |
| parser.port; // => "3000" | |
| parser.pathname; // => "/pathname/" | |
| parser.search; // => "?search=test" | |
| parser.hash; // => "#hash" | |
| parser.host; // => "example.com:3000" |
| //Extend Date to have a few extra fatures | |
| Date.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; | |
| Date.monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; | |
| Date.prototype.dayNames = Date.dayNames; | |
| Date.prototype.monthNames = Date.monthNames; | |
| Date.prototype.getDayName = function() { | |
| return this.dayNames[this.getDay()]; | |
| }; | |
| Date.prototype.getDayNameAbbr = function() { |
| // `Default font for form elements. | |
| //---------------------------------------------------------------------------------------------------- | |
| $form-font-stack: Arial, "Liberation Sans", FreeSans, sans-serif !default; | |
| $form-font-size: 13px !default; | |
| // `Form Element Reset. | |
| //---------------------------------------------------------------------------------------------------- | |
| input::ms-clear, |
#Four Ways To Do Pub/Sub With jQuery and jQuery UI (in the future)
Between jQuery 1.7 and some of work going into future versions of jQuery UI, there are a ton of hot new ways for you to get your publish/subscribe on. Here are just four of them, three of which are new.
(PS: If you're unfamiliar with pub/sub, read the guide to it that Julian Aubourg and I wrote here http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx)
##Option 1: Using jQuery 1.7's $.Callbacks() feature:
| /* | |
| * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/ | |
| * Better handling of scripts without supplied ids. | |
| * | |
| * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function. | |
| */ | |
| (function(doc, script) { | |
| var js, | |
| fjs = doc.getElementsByTagName(script)[0], |
