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
A little showcase for any website provided in the iFrame URL. Inspired by https://dribbble.com/shots/986009-Flat-Vector-Chrome-Frame
Updated to be grabbable.
A Pen by Chris Deacy on CodePen.
| <html> | |
| <head> | |
| <title>Google Maps Multiple Markers</title> | |
| <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div id="map" style="height: 400px; width: 500px;"> | |
| </div> | |
| <script type="text/javascript"> |
| <?php | |
| session_start(); | |
| $counter_name = "counter.txt"; | |
| // Check if a text file exists. If not create one and initialize it to zero. | |
| if (!file_exists($counter_name)) { | |
| $f = fopen($counter_name, "w"); | |
| fwrite($f,"0"); | |
| fclose($f); | |
| } |
| <form action="" enctype="multipart/form-data" method="post"> | |
| <input id="file" name="file" type="file" /> | |
| <input id="Submit" name="submit" type="submit" value="Submit" /> | |
| </form> |
