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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()
| <!-- Javascript at the bottom for fast page loading --> | |
| <!-- Grab Google CDN's jQuery. fall back to local if necessary --> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> | |
| <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script> | |
| <!-- scripts concatenated and minified via ant build script--> | |
| <script src="js/plugins.js"></script> | |
| <script src="js/script.js"></script> |
| //one - more flexible possibility since it's made with flexible If snippet | |
| [[!If? &subject=`[[+introtext]]` &operator=`isnotempty` &then=`[[+introtext]]` &else=`[[+content:strip_tags:ellipsis=`500`]]` ]] | |
| //the better one when it comes to performance (thank you Mark-H) | |
| [[+introtext:default=`[[+content:strip_tags:ellipsis=`500`]]`]] |
| // code from my template | |
| // should result the meta-description | |
| // should strip html-tags from content and limit to 175 characters | |
| // actually doesn't stripTags but limits to 175 characters | |
| [[*content:stripTags:strip:limit=`175`]] |
| // if you have analytics, set them in pagevisibility mode to get real-user-trackig according to prerender-issues in Chrome/WebKit. | |
| var viewCounted = false; | |
| function handleVisibilityChange(evt) { | |
| //Only count the view once we're done prerendering AND the document is done loading | |
| if (document.webkitVisibilityState == 'prerender' | |
| || document.readyState != 'complete' || viewCounted) | |
| return; | |
| /* Implementation of view counting system starts here */ | |
| // Code for Google Analytics | Change UA-XXXXX-X to be your site's ID |
| <!-- backwards compatible solution --> | |
| <!-- the browser should read media-query and then download the right file for the actual screen size --> | |
| <img media-xs="(min-width:640px)" media-xs-src="http://cdn.url.com/img/myimage_xs.jpg" media-m="(max-width:1024px)" media-m-src="http://cdn.url.com/img/myimage_m.jpg" media-xl="(min-width:1025px)" media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg" src="http://cdn.url.com/img/myimage_xs.jpg" /> | |
| <img media-xs="(max-width:640px)" | |
| media-xs-src="http://cdn.url.com/img/myimage_xs.jpg" | |
| media-m="(max-width:1024px)" | |
| media-m-src="http://cdn.url.com/img/myimage_m.jpg" | |
| media-xl="(min-width:1025px)" | |
| media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg" |
| /** | |
| * The first commented line is your dabblet’s title | |
| */ | |
| body{ | |
| background: #CCC; | |
| padding: 500px; | |
| } | |
| #map_de_muc { |
| #id{ | |
| background: #999; | |
| position: fixed; | |
| top:0; | |
| width: 100%; | |
| height: 10em; | |
| z-index: 99999999999999; | |
| padding-top:4em; | |
| -webkit-transition: all linear 1s; | |
| -moz-transition: all linear 1s; |
| /** | |
| * circled-font | |
| */ | |
| /* currently it's an ellipse not a circle */ | |
| .iconstyle { | |
| background: #000; | |
| color: #B4E3FF; | |
| border-radius: 50%; | |
| padding: .6em; |