Capture iframe load complete event

<iframe> elements have a load event for that. How you listen to that event is up to you, but generally the best way is to: 1) create your iframe programatically It makes sure your load listener is always called by attaching it before the iframe starts loading. <script> var iframe = document.createElement(‘iframe’); iframe.onload = function() … Read more

How to load up CSS files using Javascript?

Here’s the “old school” way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute unfortunately IE6 doesn’t support it consistently. var cssId = ‘myCss’; // you could encode the css path itself to generate id.. if (!document.getElementById(cssId)) { var head = document.getElementsByTagName(‘head’)[0]; var link = document.createElement(‘link’); link.id = cssId; … Read more

Print only?

Here is a general solution, using CSS only, which I have verified to work. @media print { body * { visibility: hidden; } #section-to-print, #section-to-print * { visibility: visible; } #section-to-print { position: absolute; left: 0; top: 0; } } Alternative approaches aren’t so good. Using display is tricky because if any element has display:none … Read more

How do I attach events to dynamic HTML elements with jQuery? [duplicate]

I am adding a new answer to reflect changes in later jQuery releases. The .live() method is deprecated as of jQuery 1.7. From http://api.jquery.com/live/ As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). For jQuery 1.7+ … Read more

How do I retrieve an HTML element’s actual width and height?

You should use the .offsetWidth and .offsetHeight properties. Note they belong to the element, not .style. var width = document.getElementById(‘foo’).offsetWidth; The .getBoundingClientRect() function returns the dimensions and location of the element as floating-point numbers after performing CSS transforms. > console.log(document.getElementById(‘foo’).getBoundingClientRect()) DOMRect { bottom: 177, height: 54.7, left: 278.5,​ right: 909.5, top: 122.3, width: 631, x: … Read more

jQuery document.createElement equivalent?

Here’s your example in the “one” line. this.$OuterDiv = $(‘<div></div>’) .hide() .append($(‘<table></table>’) .attr({ cellSpacing : 0 }) .addClass(“text”) ) ; Update: I thought I’d update this post since it still gets quite a bit of traffic. In the comments below there’s some discussion about $(“<div>”) vs $(“<div></div>”) vs $(document.createElement(‘div’)) as a way of creating new … Read more